8-Point Grid Audit

Verificación de que el design system respeta la regla de 8. Todos los tamaños de fuente son múltiplos de 4px y las alturas de componentes son múltiplos de 8px.

Múltiplo de 8px Múltiplo de 4px Eliminado

Escala tipográfica — 8 pasos

TokenPreviewTailwindRegla 4px
--font-size-tiny
The quick brown fox
text-xs12px
--font-size-regular
The quick brown fox
text-base16px
--font-size-large
The quick brown fox
text-xl20px
--font-size-xl
The quick brown fox
text-2xl24px
--font-size-2xl
The quick brown fox
text-3xl32px
--font-size-3xl
The quick brown fox
text-4xl40px
--font-size-4xl
The quick brown fox
text-5xl48px
--font-size-5xl
The quick brown fox
text-[56px]56px

Eliminados del sistema

--font-size-small: 14pxno es múltiplo de 414px
--font-size-medium: 18pxno es múltiplo de 418px

Alturas de componentes — regla de 8px

Cada barra representa la altura real del componente. Todas son múltiplos de 8px.

Button sm

32px
32px

Button default

36px → 40px

40px
40px✓ corregido

Button lg

40px
40px

Input

36px → 40px

40px
40px✓ corregido

Toggle default

36px → 40px

40px
40px✓ corregido

Select default

36px → 40px

40px
40px✓ corregido

Tabs list

36px → 40px

40px
40px✓ corregido

Input OTP slot

36px → 40px

40px
40px✓ corregido

Componentes reales (inspect para confirmar alturas)

32px
40px
40px
40px
40px
40px
TabsList: 40px

Escala de espaciado

Tailwind v4 usa una escala base de 4px. Todos los valores usados en componentes son múltiplos de 4px. No se usan valores fraccionarios (1.5, 2.5, 3.5).

p-1
4px
p-2
8px
p-3
12px
p-4
16px
p-6
24px
p-8
32px
p-10
40px
p-12
48px

2

Fuentes eliminadas

14px y 18px

8

Escala tipográfica

pasos ×4px

9

Componentes fijos

h-9 → h-10

3

Fraccionarios quitados

gap/px 1.5, 2.5