Auditoría de Color, Tipografía y Spacing

Paleta de Marca

Los colores principales que componen la identidad visual de Pluxee en su sitio web.

Colores Primarios

#221c46

Deep Blue · Primary Brand

--plx-semantic-color-brand-primary

#00eb5e

Ultra Green · CTA Primary

--plx-semantic-color-cta-primary

#ffffff

White · Fondos & Texto inverso

--color-white

Colores Secundarios

#17ccf9

Boldy Blue

--color-brand-tertiary

#ffdc37

Very Yellow

--color-brand-quaternary

#ff7375

Confidently Coral

--color-brand-quinary

Escalas de Tintes

#c7fccaDimmed

#85fd96Light

#00eb5eBase

#00330ePressed

#def3fbDimmed

#88ddfbLight

#17ccf9Base

#26a3ddDark

#fdf3d6Dimmed

#fdeec1Light

#ffdc37Base

#fbdddaDimmed

#fcc1beLight

#ff7375Base

Colores Funcionales / UI

Colores aplicados a texto, enlaces, fondos y bordes en la interfaz.

Texto

Texto Primario

#221c46 · 1161 usos

Texto Secundario

#463f5f · 7 usos

Texto Terciario

#5a5469 · 7 usos

Negro Puro (legacy)

#000000 · 216 usos

Texto Inverso

#ffffff · 98 usos

Gris Oscuro

#555555 · 15 usos

Enlaces

Link Primary

#1b51dc · Interactive / Focus

Link Brand

#26a3dd · Header search

Accent Magenta

#cc1480 · Blog categories

Link Secondary

#3860be · Alternative links

Fondos

#ffffff

Fondo Principal · 46 usos

#faf8ff

Fondo Primario

#f3f3fc

Fondo Info

#f8f8f8

Fondo Neutro

#221c46

Fondo Oscuro · 9 usos

#362f54

Fondo Menú

#dafcdb

Fondo Verde Claro

#aefcc9

Fondo Verde Medio

Sombras

Box shadows utilizadas en el sitio para dar profundidad a los elementos.

Button Shadow 2px 2px 0 0 deep-blue/20%

Overlay Shadow 0 0 18px 0 black/20%

Card Inner -3px -3px 5px -2px gray

Card Diffuse 0 0 12px 2px gray

Análisis de Contraste WCAG

Evaluación de las combinaciones texto/fondo según los estándares de accesibilidad WCAG 2.1.

FALLA AA Problemas de Contraste

"Buscar" header

sobre

#26a3dd / #fff

2.85:1

Info cookies

sobre

#7f7f9d / #f8f8f8

3.64:1

Filter icon

sobre

#555 / #3860be

1.27:1

PASA AA Cumplen AA, no AAA

"Más información"

sobre

#3860be / #fff

5.86:1

"Apply" button

sobre

#fff / #346e4a

6.04:1

"Skip to content"

sobre

#1b51dc / #fff

6.45:1

Texto en menú

sobre

#5a5469 / #dafcdb

6.51:1

PASA AAA Combinaciones Excelentes

Texto principal / blanco

sobre

#221c46 / #fff

15.88:1

Blanco / Deep Blue

sobre

#fff / #221c46

15.88:1

CTA: Deep Blue / Green

sobre

#221c46 / #00eb5e

9.86:1

Stats / Yellow bg

sobre

#221c46 / #fdeec1

13.74:1

Tabla / Green bg

sobre

#221c46 / #aefcc9

13.28:1

Footer nav

sobre

#e1e2f8 / #362f54

9.72:1

Design Tokens (CSS Variables)

Sistema de tokens semánticos con prefijo --ssa-color-palette-plx-semantic-*

Token	Valor	Categoría
--color-brand-primary	#221c46	Brand
--color-brand-secondary	#00eb5e	Brand
--color-brand-tertiary	#17ccf9	Brand
--color-brand-quaternary	#ffdc37	Brand
--color-brand-quinary	#ff7375	Brand
Texto
--color-text-primary	#221c46	Text
--color-text-secondary	#463f5f	Text
--color-text-tertiary	#5a5469	Text
--color-text-disabled	#b5b2bc	Text
--color-text-link	#1b51dc	Text
--color-text-inverse	#ffffff	Text
Interactive / CTA
--color-cta-primary	#00eb5e	CTA
--color-cta-primary-hover	#c7fcca	CTA
--color-cta-primary-pressed	#00330e	CTA
--color-outline-focus	#1b51dc	Focus
Escala de Grises
--gray-10	#f2f2f2	Gray
--gray-20	#dbdbdc	Gray
--gray-30	#bfbfbf	Gray
--gray-70	#484848	Gray
--gray-80	#323232	Gray
--gray-90	#222222	Gray

Tipografía

Análisis de la tipografía del sitio: familias, pesos, escala y jerarquía.

TT Travels

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ¡¿?!&@#%

Familia TT Travels

Fallback Verdana, sans-serif

Formato WOFF2

Base size 16px

Line height 1.5 (body) / 1.35 (h)

Token --ssa-font-stacks-tt-travels

Pesos Disponibles (@font-face)

Medium

500

DemiBold

600

Bold

700

ExtraBold

800

Black

900

Otras Fuentes Detectadas

Icomoon (Icon Font)

weight: normal · format: woff
Uso: Iconos del sistema de diseño

Stacks Alternativos (tokens CSS)

--ssa-font-stacks-arial: Arial, Helvetica Neue
--ssa-font-stacks-roboto: Roboto, sans-serif
--ssa-font-stacks-playfair-display: Playfair Display, serif
--ssa-font-stacks-sansapro: SansaPro, Arial

Escala Tipográfica

H1 Beneficios para empleados

42pxBlack 900LH 1.35

H2 Miles de empresas ya se

42pxBold 700LH 1.35

H2 Pluxee España (footer)

24pxBold 700LH 1.30LS -0.8px

H3 Retribución flexible

24pxBold 700LH 1.30

H3 Productividad laboral: ¿qué es?

20pxBold 700LH 1.30LS -1px

H4 Con Cobee by Pluxee

20pxBold 700LH 1.25LS -1px

H3 Pluxee Restaurante

16pxBold 700LH 1.50LS -0.8px

H5 Con otras soluciones

16pxBold 700LH 1.25

H2 Soluciones Pluxee (nav)

14pxMedium 500LH 1.35LS -0.8px

p Impulsa la motivación de tu equipo con el líder global

16pxMedium 500LH 1.50

p Estas cookies son necesarias para que el sitio

14pxMedium 500LH 1.43

a Retribución Flexible (nav)

16pxDemiBold 600LH 1.50

a Cobee by Pluxee (footer)

14pxDemiBold 600LH 1.50

a Sobre nosotros (footer legal)

12pxBold 700LH 1.50

Tamaños Detectados

42px

24px

20px

18px

16px base

14px

12px

Design Tokens Tipográficos

Token	Valor	Categoría
Font Family
--ssa-font-stacks-tt-travels	"TT Travels", Verdana, sans-serif	Primary
--ssa-font-stacks-arial	Arial, "Helvetica Neue", Helvetica, sans-serif	System
--ssa-font-stacks-roboto	"Roboto", sans-serif	Alt
Font Size Scale
--font-size-base	1rem (16px)	Base
--font-size-xl	2.25rem (36px)	XL
--font-size-h1	2.027rem (32.4px)	H1
--font-size-h2	1.802rem (28.8px)	H2
--font-size-h3	1.602rem (25.6px)	H3
--font-size-h4	1.424rem (22.8px)	H4
--font-size-h5	1.266rem (20.3px)	H5
--font-size-h6	1.125rem (18px)	H6
--font-size-s	0.889rem (14.2px)	Small
--font-size-xs	0.79rem (12.6px)	X-Small
Line Height
--line-height	1.5	Body
--line-height-heading	1.3	Headings

Observaciones Tipográficas

Fuente única consistente

Todo el sitio usa exclusivamente TT Travels en 5 pesos (500-900), dando una identidad tipográfica muy cohesiva.

Jerarquía clara

Buen contraste visual entre niveles de encabezado (42px → 24px → 20px → 16px) con pesos diferenciados.

H2 con 3 tamaños distintos

Se detectan H2 a 42px, 24px y 14px. Esto rompe la jerarquía semántica: un H2 de menú a 14px es menor que los H3.

Usar H4/H5 para elementos menores

Letter-spacing inconsistente

Mezcla de normal, -0.8px y -1px en encabezados del mismo nivel. Unificar por nivel de jerarquía.

Estandarizar LS por heading level

Spacing & Border Radius

Análisis de los espaciados (padding, margin, gap) y bordes redondeados utilizados en el sitio.

Escala de Spacing (frecuencia de uso)

4px

139

8px

12px

343

16px

20px

173

24px

32px

48px

56px

64px

Design Tokens de Spacing

--space-xs

0.5rem (8px)

--space-s

0.75rem (12px)

--space-m

1rem (16px)

--space-l

1.5rem (24px)

--space-xl

3rem (48px)

--base-border-radius

2px

Anatomía de Sección Típica

margin

0 64px (lateral) · 0 0 56px 0 (inferior típico)

padding

56px 0 (secciones) · 24px (cards) · 9px 24px (botones)

Contenido
max-width: 1077px (boxed)
gap: 8px · 32px (flex)

Paddings Más Frecuentes

Valor	Usos	Elementos
0 16px	119	CTA header, columnas, layout
56px 0	18	Secciones principales (vertical)
24px	16	Testimonial cards, containers
9px 24px	12	Botones CTA (primary-button)
24px 24px 32px 24px	8	Cards con fondo blanco
8px 0	26	Menu items
12px 30px	6	Botones slider nav
32px 64px 32px 60px	5	Submenú openers
18px 16-18px	8	Table cells (comparativas)
10px 20px	4	Cookie buttons

Margins Más Frecuentes

Valor	Usos	Elementos
0 -16px	47	Row inner (negative margin pattern)
0 64px	31	Contenedores boxed (centrado lateral)
16px 0 0 0	23	CTA wrappers, headings
0 0 24px 0	15	Párrafos (margen inferior)
0 0 16px 0	13	H2 headings, list items
24px 0 0 0	12	Slick dots, CTA buttons
0 auto	11	Menu items centrados
0 0 32px 0	11	Containers (margen inferior medio)
0 0 56px 0	7	Section headings (margen inferior grande)
0 0 64px 0	3	Slider nav bottom

Gap (Flex/Grid)

Valor	Usos	Display	Elementos
8px	5	flex	Play/pause buttons, blog cards
32px	1	flex	Blog articles container

Uso mínimo de gap

Solo 6 elementos usan la propiedad gap. La mayoría del espaciado se logra con padding y margin negativos, un patrón más frágil.

Adoptar gap en layouts flex/grid

Border Radius

0px

Mayoritario

1px

8 usos

2px

15 usos · base token

3px

2 usos

17px

1 uso

20px

3 usos

50px

1 uso

55%

8 usos · dots

Anchos de Contenedor

Container boxed

max-width: 1077px (content)
= viewport - 2 × 64px margin

Container full

max-width: 1392px
Slider containers

Half container

max-width: 50%
Text+Image blocks (2 cols)

Blog card max

max-width: 688px
Article cards

Observaciones de Spacing

Tokens de spacing definidos

Sistema de 5 niveles (xs/s/m/l/xl) con escala coherente de 8px a 48px, siguiendo un ritmo lógico.

Ritmo vertical consistente

Las secciones principales usan 56px de padding vertical de forma consistente, creando un ritmo visual predecible.

Border radius casi nulo

El token base es 2px y la gran mayoría de elementos tiene 0px. Esto es coherente con el estilo angular de los corner-cuts, pero limita la suavidad visual.

Intencional: alineado con corner-cut identity

Negative margin pattern

47 elementos usan margin: 0 -16px (patrón de row/gutter). Es funcional pero frágil y puede sustituirse por gap en flex/grid.

Migrar a CSS gap cuando sea posible

Resumen y Recomendaciones

Estadísticas generales y hallazgos clave de la auditoría.

Colores de texto

Colores de fondo

Colores de borde

Gradientes

100+

CSS Variables

20+

Cumplen AAA

Fallan WCAG AA

Sombras

Fortalezas

Tokens bien estructurados

Sistema robusto de 100+ design tokens con naming semántico claro y prefijo consistente.

Excelente contraste principal

La combinación Deep Blue/blanco alcanza un ratio de 15.88:1 (AAA), muy por encima del mínimo requerido.

Paleta vibrante y diferenciada

5 colores de marca bien definidos con escalas de tintes consistentes (dimmed, light, base).

Identidad visual única

El sistema de corner-cuts (esquinas cortadas a 315°) aporta un elemento diferenciador muy reconocible.

Problemas Detectados

Contraste insuficiente en "Buscar"

#26a3dd sobre blanco solo alcanza 2.85:1 (se requiere 4.5:1 para texto normal).

Oscurecer a #1a89c9 o similar

Texto gris en cookies

#7f7f9d sobre #f8f8f8 da 3.64:1. No cumple el mínimo AA.

Usar #5a5469 (text-tertiary del sistema)

Negro puro residual (#000)

216 elementos usan #000000 cuando el estándar de marca es #221c46 (Deep Blue).

Migrar a --color-text-primary (#221c46)

Fragmentación de azules en links

Se detectan 4 azules distintos para enlaces: #1b51dc, #26a3dd, #3860be, #0000ee.

Consolidar en max. 2 tonos de enlace

Auditoría de Color, Tipografía & Spacing

pluxee.es

Paleta de Marca

Colores Primarios

Colores Secundarios

Escalas de Tintes

Colores Funcionales / UI

Texto

Enlaces

Fondos

Estilos de Botones

Gradientes & Corner-Cuts

Sombras

Análisis de Contraste WCAG

FALLA AA Problemas de Contraste

PASA AA Cumplen AA, no AAA

PASA AAA Combinaciones Excelentes

Design Tokens (CSS Variables)

Tipografía

Pesos Disponibles (@font-face)

Otras Fuentes Detectadas

Escala Tipográfica

Tamaños Detectados

Design Tokens Tipográficos

Observaciones Tipográficas

Spacing & Border Radius

Escala de Spacing (frecuencia de uso)

Design Tokens de Spacing

Anatomía de Sección Típica

Paddings Más Frecuentes

Margins Más Frecuentes

Gap (Flex/Grid)

Border Radius

Anchos de Contenedor

Observaciones de Spacing

Resumen y Recomendaciones

Fortalezas

Problemas Detectados