Herramienta interna — no indexable

Design System — Foundations

Validación visual de los tokens definidos en src/app/globals.css. Fase 1: solo foundations, sin componentes.

1.1Color

Escala neutra, primario (Casa Blue), acento (Terracotta) y semánticos. Cada swatch usa la clase Tailwind real generada por el token — si el color no se ve, el token no está registrado.

Neutral

neutral-0

#FFFFFF

neutral-50

#F7F8FA

neutral-100

#EEF0F3

neutral-200

#E1E4E9

neutral-300

#C9CED6

neutral-400

#A6AEBB

neutral-500

#7C8695

neutral-600

#5B6472

neutral-700

#3F4753

neutral-800

#262C35

neutral-900

#161A21

neutral-950

#0C0E12

Primario — Casa Blue

primary-50

#EAF1FB

primary-100

#CFE0F5

primary-200

#A3C4EA

primary-300

#6E9FDA

primary-400

#3E78C2

primary-500

#215694

primary-600

#184270

primary-700

#123457

primary-800

#0E2842

primary-900

#0A1D30

Acento — Terracotta

accent-50

#FDF1EC

accent-100

#F9DACB

accent-400

#E4794A

accent-500

#D35F2E

accent-600

#B54A1F

accent-700

#8F3A18

Semánticos

success-50

#EAF7F1

success-500

#1E9563

success-600

#16794F

success-700

#0F5B3A

warning-50

#FDF5E4

warning-500

#B37B00

warning-600

#946200

warning-700

#734B00

danger-50

#FCEBEA

danger-500

#D33530

danger-600

#B3261E

danger-700

#8A1D17

info-50

#EAF2FB

info-500

#2670C0

info-600

#1B5FA8

info-700

#144A85

Tokens semánticos derivados

background

surface

surface-elevated

surface-sunken

border-subtle

border-strong

text-primary

text-secondary

text-muted

text-link

1.2Tipografía

Inter (sans, UI + body) y Source Serif 4 (serif, solo titulares editoriales de blog). Redimensiona la ventana entre 360px y 768px+ para ver la interpolación fluida (clamp) entre el tamaño móvil y el desktop.

text-h1 · 36 → 52px / 800

text-h2 · 32 → 42px / 700

text-h3 · 28 → 34px / 700

text-h4 · 24 → 28px / 700

text-h5 · 20 → 24px / 600

text-h6 · 18 → 20px / 600

text-body-lg · 19 → 20px / 400

Body large — lead paragraph

text-body · 17 → 18px / 400

Body — texto por defecto

text-body-sm · 16px / 400

Body small

text-small · 15px / 400

Small — helper text

text-caption · 13px / 500

CAPTION — metadatos

font-sans (Inter) — pesos 400/500/600/700/800

Regular — El fontanero llegó a las 9 en punto.

Medium — El fontanero llegó a las 9 en punto.

SemiBold — El fontanero llegó a las 9 en punto.

Bold — El fontanero llegó a las 9 en punto.

font-serif (Source Serif 4) — solo blog

Cómo elegir un fontanero de confianza

Straße, Übergabe, größte — Eszett y diéresis alemanas. Ñoño, cañería, año — eñes y tildes españolas.

1.3Espaciado

Base 4px — coincide con la escala numérica por defecto de Tailwind v4, no requiere tokens nuevos.

space-1 · 4px

space-2 · 8px

space-3 · 12px

space-4 · 16px

space-5 · 20px

space-6 · 24px

space-8 · 32px

space-10 · 40px

space-12 · 48px

space-16 · 64px

space-20 · 80px

space-24 · 96px

space-32 · 128px

1.4Radios de borde

rounded-sm

rounded-md

rounded-lg

rounded-xl

rounded-full

1.5Sombras (elevation)

shadow-elevation-1

shadow-elevation-2

shadow-elevation-3

shadow-elevation-4

1.7Motion

Pasa el ratón por cada bloque. Con “Reducir movimiento” activado en el sistema operativo, la transición se anula automáticamente (ver prefers-reduced-motion en globals.css).

duration-fast (120ms)

duration-base (200ms)

duration-slow (320ms)

1.8Z-index scale

z-sticky-header (30)

z-drawer (50)

z-toast (70)

1.9Foco visible

Navega con Tab: el anillo de foco (token shadow-focus-ring) debe verse en ambos elementos.

Enlace de ejemplo