Auditoría de diseño — ASICS España

Colores Primarios

#ffffff Color primario · 58 usos

#000000 Color secundario · 32 usos

#001e63 Fondo base · 12 usos

Colores Secundarios

#001e62 Acento 1 · 12 usos

#efefef Acento 2 · 7 usos

#00184f Acento 3 · 5 usos

Texto 13 distintos

Zapatillas de running para hombre

Desde 89,95 € · Envío gratuito

Zapatillas de running para hombre

Desde 89,95 € · Envío gratuito

Zapatillas de running para hombre

Desde 89,95 € · Envío gratuito

Zapatillas de running para hombre

Desde 89,95 € · Envío gratuito

Zapatillas de running para hombre

Desde 89,95 € · Envío gratuito

Zapatillas de running para hombre

Desde 89,95 € · Envío gratuito

Enlaces 7 distintos

Ver todas las zapatillas →

Bordes 17 distintos

Buscar productos

Fondos 9 distintos

#000000

Fondo oscuro / overlay 176 usos

#ffffff

Fondo blanco 84 usos

#efefef

Fondo neutro 6 usos

#e4e5f3

Fondo sección 4 usos

#001e63

Fondo marca 4 usos

#001e62

Fondo marca 4 usos

Variantes reales detectadas en home, listado y ficha de producto. Se excluyen controles de menú, búsqueda y elementos sin padding visual.

Primario / CTA · Listado

Cargar más

bg: rgb(0, 30, 98) text: rgb(255, 255, 255) radius: 9999px · padding: 0px 20px

CTA alternativo (fondo claro) · Home

Hombre

bg: rgb(255, 255, 255) text: rgb(0, 30, 99) radius: 20px · padding: 10px 30px

Primario / CTA · Home

Más información

bg: rgb(0, 30, 99) text: rgb(255, 255, 255) radius: 20px · padding: 10px 30px

Secundario / outline · Home

Más información

bg: rgba(0, 0, 0, 0) text: rgb(0, 30, 99) radius: 20px · padding: 10px 30px

Gradiente	Usos	Colores
`radial-gradient(farthest-side, rgb(72, 92, 199) 94%, rgba(0, 0, 0, 0)), conic-gradient(rgba(0, 0, 0,…`	1	`rgb(72, 92, 199)` `rgba(0, 0, 0, 0)` `rgba(0, 0, 0, 0)` `rgb(72, 92, 199)`

Sombras del design system

Ningún elemento visible tenía box-shadow aplicado en el snapshot auditado. Estas sombras provienen de las variables CSS del sistema de diseño — probablemente se usan en estados hover, modales o dropdowns que no estaban activos en la captura.

shadows-2xl 0px 32px 48px -6px rgba(0,0,0,.04),0px 40px 73.9px -12px rgba(0,0,0,.06) Design token

shadows-2xs 0 1px rgba(0,0,0,.05) Design token

shadows-error 0px 0px 1px 3px rgba(159,40,4,.2) Design token

shadows-inset-2xs inset 0 1px rgba(0,0,0,.05) Design token

shadows-inset-sm inset 0 2px 4px rgba(0,0,0,.05) Design token

shadows-inset-xs inset 0 1px 1px rgba(0,0,0,.05) Design token

shadows-lg 0px 12px 24px 0px rgba(0,0,0,.08),0px 12px 32px -6px rgba(0,0,0,.04) Design token

shadows-md 0px 8px 16px 0px rgba(0,0,0,.08),0px 8px 16px -4px rgba(0,0,0,.04) Design token

shadows-sm 0px 4px 8px 0px rgba(0,0,0,.08),0px 4px 8px -4px rgba(0,0,0,.08) Design token

shadows-xl 0px 4px 32px -4px rgba(0,0,0,.08),0px 32px 40px -8px rgba(0,0,0,.06) Design token

shadows-xs 0px 4px 4px 0px rgba(0,0,0,.05) Design token

Sistema detectado

SVG inline / componentes SVG

921 iconos analizados

Tamaños de icono (12–64px)

24px 78 usos

40px 60 usos

32px 42 usos

38px 28 usos

Colores de icono

rgb(0, 24, 79) 246 usos

rgb(0, 0, 0) 232 usos

rgb(0, 30, 98) 229 usos

rgb(0, 0, 238) 141 usos

rgb(161, 165, 175) 34 usos

rgb(0, 30, 99) 26 usos

2 fallan AA 5 pasan AA 10 pasan AAA 17 combinaciones evaluadas

FALLA AA Problemas de contraste

..." (botón)

"..." (botón)

sobre #a1a5af / #e1e1e6

Oscurecer el texto; probar #00184f o un tono más oscuro sobre #e1e1e6

Previous slide

"Previous slide"

sobre #a1a5af / #ffffff

Oscurecer el texto; probar #00184f o un tono más oscuro sobre #ffffff

PASA AA Cumplen AA, no AAA

Rebajas de invierno" (botón)

"Rebajas de invierno" (botón)

sobre #d93733 / #ffffff

Cumple AA; para AAA subir a 7:1 usando #001e63 o fondo más contrastado

.text.text--variant_body-s

sobre #5f6674 / #f1f2f2

Cumple AA; para AAA subir a 7:1 usando #001e63 o fondo más contrastado

Venta privada: Regístrate y

"Venta privada: Regístrate y ahor…"

sobre #b9411d / #ffffff

Cumple AA; para AAA subir a 7:1 usando #001e63 o fondo más contrastado

España (Español)" (botón)

"España (Español)" (botón)

sobre #5f6674 / #ffffff

Cumple AA; para AAA subir a 7:1 usando #001e63 o fondo más contrastado

Venta privada: Regístrate y

"Venta privada: Regístrate y ahor…"

sobre #485cc7 / #ffffff

Cumple AA; para AAA subir a 7:1 usando #001e63 o fondo más contrastado

PASA AAA Combinaciones excelentes

ASICS Knowledge Hub" (enlace

"ASICS Knowledge Hub" (enlace · nav)

sobre #000000 / #ffffff

H2: Corre más lejos - estabi

H2: Corre más lejos - estabilidad

sobre #000000 / #ffffff

Enviar comentarios" (botón)

"Enviar comentarios" (botón)

sobre #000000 / #efefef

Next slideNOVABLAST 5 EKIDE

"Next slideNOVABLAST 5 EKIDENZapatillas de running para homb" (enlace · body)

sobre #00184f / #ffffff

H2: Materiales y tecnología

sobre #00184f / #ffffff

H1: ¿Quieres encontrar tu za

H1: ¿Quieres encontrar tu zapatilla …

sobre #001e62 / #ffffff

Localizador de tiendas" (enl

"Localizador de tiendas" (enlace · body)

sobre #001e62 / #ffffff

Cargando...Cargar más" (enla

"Cargando...Cargar más" (enlace · body)

sobre #ffffff / #001e62

Controles adicionales de accesibilidad

2 fallos · 3 avisos · 6 comprobaciones automáticas (WCAG 2.1 AA)

79 variables detectadas · prefijo principal --colors-input*

Brand 9

Token	Valor	Vista previa
`--colors-border-brand-strong`	`#00184f`
`--colors-brand`	`#001e62`
`--colors-brand-600`	`#3c568e`
`--colors-brand-indigo300`	`#e4e5f3`
`--colors-button-brand-gold-bg-hover`	`#cfa64f`
`--colors-button-brand-gold-fg`	`#00184f`
`--colors-button-brand-gold-ring-focus`	`#00184f`
`--colors-button-brand-outline_alt-fg-disabled`	`#a1a5af`
`--colors-button-brand-outline-bg`	`transparent`	—

Text 4

Token	Valor	Vista previa
`--colors-foreground-weak`	`#5f6674`
`--colors-input-fg-error`	`#6d0000`
`--colors-input-fg-hover`	`#00184f`
`--colors-input-fg-placeholder`	`#3c568e`

Color 33

Token	Valor	Vista previa
`--colors-amber-200`	`#fde68a`
`--colors-background-layout`	`#fff`
`--colors-blue-100`	`#cce3ea`
`--colors-blue-600`	`#4d9eb5`
`--colors-border-disabled`	`#f1f2f2`
`--colors-border-heavy`	`#a1a5af`
`--colors-card`	`#fff`
`--colors-errors-bg-hover`	`#fef4eb`
`--colors-errors-border-weak`	`#fef4eb`
`--colors-fuchsia-100`	`#fae8ff`
`--colors-fuchsia-50`	`#fdf4ff`
`--colors-green-200`	`#d9f0e1`
`--colors-green-500`	`#00b388`
`--colors-info-bg`	`#f7f7f7`
`--colors-input-bg`	`#fff`
`--colors-input-bg-disabled`	`#f1f2f2`
`--colors-lime-100`	`#ecfccb`
`--colors-lime-200`	`#d9f99d`
`--colors-pink-700`	`#be185d`
`--colors-pink-800`	`#9d174d`
`--colors-purple-400`	`#c084fc`
`--colors-purple-950`	`#3b0764`
`--colors-red-200`	`#feefe1`
`--colors-red-800`	`#860e00`
`--colors-stone-100`	`#f5f5f4`
`--colors-success-border-hover`	`#003409`
`--colors-teal-200`	`#99f6e4`
`--colors-unique-colors-membership300`	`#fcf5e5`
`--colors-violet-700`	`#6d28d9`
`--colors-warning-border-weak`	`#ffe9cc`
`--colors-white-400`	`hsla(0,0%,100%,.5)`
`--colors-yellow-50`	`#fefce8`
`--colors-yellow400`	`#f1eb9c`

Gray scale 6

Token	Valor	Vista previa
`--colors-gray-400`	`#a1a5af`
`--colors-slate-100`	`#f1f5f9`
`--colors-slate-200`	`#e2e8f0`
`--colors-slate-700`	`#334155`
`--colors-slate-950`	`#020617`
`--colors-zinc-600`	`#52525b`

Typography 7

Token	Valor	Vista previa
`--font-sizes-3xl`	`1.75rem`	Ag
`--font-sizes-md`	`1rem`	Ag
`--font-weights-bold`	`700`	Aa
`--font-weights-medium`	`500`	Aa
`--line-heights-11`	`2.25`	—
`--line-heights-7`	`1.5`	—
`--line-heights-relaxed`	`1.625`	—

Spacing 9

Token	Valor
`--adyen-sdk-spacer-020`	`0.5rem`
`--border-spacing-x`	`0`
`--sizes-11`	`2.75rem`
`--sizes-14`	`3.5rem`
`--sizes-2`	`0.5rem`
`--sizes-breakpoint-2xl`	`1536px`
`--spacing-12`	`3rem`
`--spacing-2.5`	`0.625rem`
`--spacing-80`	`20rem`

Radius 3

Token	Valor	Vista previa
`--radii-2xl`	`1rem`
`--radii-3xl`	`1.5rem`
`--radii-md`	`calc(0.5rem - 2px)`

Border 1

Token	Valor	Vista previa
`--borders-primary`	`1px solid #353a45`	—

Shadow 1

Token	Valor	Vista previa
`--shadows-xl`	`0px 4px 32px -4px rgba(0,0,0,.08),0px 32…`

Focus 1

Token	Valor	Vista previa
`--colors-input-bg-focus`	`#fff`

Other 5

Token	Valor	Vista previa
`--blurs-sm`	`8px`	—
`--breakpoints-sm`	`640px`	—
`--breakpoints-xl`	`1280px`	—
`--invert`		—
`--scale-x`	`1`	—

Familias tipográficas

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ¡¿?!&@#%

AsicsFont 2200 usos

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ¡¿?!&@#%

Asics 3.0 206 usos

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ¡¿?!&@#%

Arial 19 usos

Pesos disponibles

Aa

Regular 400 · 1688 usos

Aa

Medium 500 · 1219 usos

Aa

Bold 700 · 419 usos

Aa

SemiBold 600 · 24 usos

Aa

ExtraBold 800 · 9 usos

Tamaños detectados

54px42px32px30px24px18px16px15px14px12px

Escala tipográfica — vista previa real

Cada estilo se renderiza con el tamaño, peso y familia detectados en el sitio, usando texto real extraído del DOM.

Colección NATURE BATHING™

H1 54px · Medium 500 4 usos · AsicsFont

¿Quieres encontrar tu zapatilla ideal?

H1 42px · Medium 500 1 usos · AsicsFont

Zapatillas de running para hombre

H1 32px · Regular 400 1 usos · AsicsFont

NOVABLAST 5 EKIDEN

H1 24px · Bold 700 1 usos · AsicsFont

Explora nuestros deportes

H2 42px · Regular 400 1 usos · AsicsFont

Corre a tu ritmo con las zapatillas de running para hombre de ASICS

H2 30px · Regular 400 2 usos · AsicsFont

Corre más lejos - estabilidad

H2 24px · Bold 700 34 usos · AsicsFont

Ancho

H2 16px · Bold 700 1 usos · AsicsFont

Diseñada para ser visible.

H3 30px · Bold 700 3 usos · AsicsFont

Balonmano

H3 30px · Regular 400 3 usos · AsicsFont

Contigo, sea cual sea tu objetivo

H3 18px · Regular 400 3 usos · AsicsFont

Descubre más

Enlace 18px · Bold 700 · LH 1.22 · LS 0.3px 3 usos · Asics 3.0

Envíos y pruebas de equipo de 90 días gratis para

Enlace 16px · Medium 500 · LH 1.50 16 usos · AsicsFont

Gestionar preferencias de cookies

Enlace 16px · Regular 400 · LH 1.50 4 usos · AsicsFont

Zapatillas de running METASPEED™

Enlace 15px · Bold 700 · LH 1.33 · LS 0.3px 5 usos · Asics 3.0

chaquetas de running

Enlace 15px · Bold 700 · LH 1.30 · LS 0.3px 4 usos · AsicsFont

Zapatillas

Enlace 14px · Medium 500 · LH 1.40 · LS 0.14px 2 usos · AsicsFont

Cargar más

Enlace 14px · Medium 500 · LH 1.43 1 usos · AsicsFont

OneASICS Términos y condiciones

Enlace 14px · Medium 500 · LH 1.50 39 usos · AsicsFont

Ventajas de OneASICS

Enlace 12px · Regular 400 · LH 1.50 · LS 0.12px 2 usos · AsicsFont

Colección NATURE BATHING™

Body 54px · Medium 500 · LH 1.11 · LS 0.3px 8 usos · Asics 3.0

¿Quieres encontrar tu zapatilla ideal?

Body 42px · Medium 500 · LH 1.10 · LS 0.3px 2 usos · Asics 3.0

256 g/9 oz

Body 32px · Regular 400 · LH 1.20 1 usos · AsicsFont

SIENTE LA COMODIDAD, ENCUENTRA LA POSITIVIDAD

Body 18px · ExtraBold 800 · LH 1.22 · LS 0.3px 4 usos · Asics 3.0

@font-face declaradas

ASICS 3.0
Graphik
Sportstyle
FontAwesome
VideoJS
AsicsFont
AsicsFontSportStyle

Escala de spacing (frecuencia)

3911960

40

1px

30

2px

391

4px

24

5px

6

6px

389

8px

29

10px

18

12px

1

14px

9

15px

58

16px

31

19.92px

Paddings más frecuentes

Contenido

0px 0px 0px 8px 145 usos Padding detectado

Contenido

4px 4px 0px 145 usos Barra superior

Contenido

0px 0px 0px 40px 61 usos Padding detectado

Contenido

8px 0px 0px 25 usos Padding detectado

Contenido

98px 24px 56px 24 usos Padding detectado

Contenido

0px 5px 0px 0px 24 usos Padding detectado

Contenido

0px 16px 16 usos Layout horizontal

Contenido

0px 0px 0px 20px 13 usos Padding detectado

Margins más frecuentes

Bloque

0px 0px 8px 61 usos

Bloque

-1px 34 usos Margin negativo

Bloque

19.92px 0px 31 usos

Bloque

0px 0px 0px -8px 26 usos Margin negativo

Bloque

16px 0px 16 usos

Bloque

0px 0px 24px 8 usos

Gap (flex / grid)

8px 126 usos Flex / grid gap

4px 100 usos Flex / grid gap

2px 26 usos Flex / grid gap

10px 14 usos Flex / grid gap

12px 13 usos Flex / grid gap

16px 9 usos Flex / grid gap

Border radius

2px 435 usos Base / inputs

9999px 84 usos Píldora / pill

20px 13 usos Botones ASICS

4px 10 usos Chips / badges

6px 5 usos Elementos pequeños

25px 1 usos Cookies / secundario

Border radius casi plano

El valor más frecuente es 2px (435 usos). Los botones ASICS usan 20px y pills 9999px — dos sistemas de redondeo conviviendo.

Anchos de contenedor (frecuencia)

161810

1

224px

5

300px

2

420px

2

843px

1

1150px

1

1224px

15

1440px

2

33.3333%

161

100%

Márgenes negativos detectados

8 valores distintos (ej. -1px) — patrón legacy de compensación de layout. Considerar migrar a gap en flex/grid.

Anatomía de sección típica

margin

padding

Contenido gap: 8px · 16px

Valores más habituales detectados: padding 0px 0px 0px 8px, margin 0px 0px 8px, gap 8px.

13Colores de texto

9Colores de fondo

17Colores de borde

1Gradientes

749CSS Variables

10Cumplen AAA

2Fallan WCAG AA

11Sombras

Fortalezas

Sistema de design tokens detectado con 749 variables CSS

10 combinaciones de color alcanzan nivel AAA

Tipografía contenida en 3 familia(s) principal(es)

Uso activo de gap en layouts flex/grid

Problemas detectados

Alta prioridad

Contraste insuficiente en ""..." (botón)"

Ratio 1.89:1 sobre #a1a5af / #e1e1e6 (3 usos)

Fix: Oscurecer el texto; probar #00184f o un tono más oscuro sobre #e1e1e6

Media prioridad

Múltiples colores de enlace sin consolidar

7 azules/colores de enlace distintos detectados

Fix: Unificar en un único token de enlace (--link-color) para nav, body y footer

Baja prioridad

Uso de márgenes negativos (posible deuda de layout legacy)

8 valores de margin negativo distintos

Fix: Migrar layouts a flex/grid con gap en lugar de compensaciones con margin negativo

Alta prioridad

Área táctil mínima (44×44px)

611 elementos interactivos por debajo de 44×44px

Fix: Aumentar padding o dimensiones mínimas de botones, enlaces e iconos clicables

Media prioridad

Textos alternativos en imágenes

1 de 180 imágenes sin atributo alt

Fix: Añadir alt descriptivo a imágenes informativas; alt="" solo en decorativas

Media prioridad

Etiquetas en formularios

2 de 2 inputs sin label asociado

Fix: Asociar cada input con <label for="..."> o aria-label

Paleta de Marca

Colores Primarios

Colores Secundarios

Colores Funcionales / UI

Texto 13 distintos

Enlaces 7 distintos

Bordes 17 distintos

Fondos 9 distintos

Estilos de Botones

Gradientes & Efectos de Marca

Sombras

Iconografía

Tamaños de icono (12–64px)

Colores de icono

Análisis de Contraste WCAG

FALLA AA Problemas de contraste

PASA AA Cumplen AA, no AAA

PASA AAA Combinaciones excelentes

Controles adicionales de accesibilidad

Área táctil mínima (44×44px)

Textos alternativos en imágenes

Etiquetas en formularios

Jerarquía de encabezados (H1)

Iconos sin nombre accesible

Indicador de foco visible

Design Tokens (CSS Variables)

Brand 9

Text 4

Color 33

Gray scale 6

Typography 7

Spacing 9

Radius 3

Border 1

Shadow 1

Focus 1

Other 5

Tipografía

Familias tipográficas

Pesos disponibles

Tamaños detectados

Escala tipográfica — vista previa real

@font-face declaradas

Spacing & Border Radius

Escala de spacing (frecuencia)

Paddings más frecuentes

Margins más frecuentes

Gap (flex / grid)

Border radius

Anchos de contenedor (frecuencia)

Anatomía de sección típica

Resumen y Recomendaciones

Fortalezas

Sistema de design tokens detectado con 749 variables CSS

10 combinaciones de color alcanzan nivel AAA

Tipografía contenida en 3 familia(s) principal(es)

Uso activo de gap en layouts flex/grid

Problemas detectados

Contraste insuficiente en ""..." (botón)"

Múltiples colores de enlace sin consolidar

Uso de márgenes negativos (posible deuda de layout legacy)

Área táctil mínima (44×44px)

Textos alternativos en imágenes

Etiquetas en formularios