Sistema visual
Guía de estilo
Paleta “ventana al anochecer”, tipografías y tokens que comparten todas las páginas del sitio. Modo activo: claro. Cualquier sección nueva que use estos tokens hereda el estilo automáticamente.
Paleta
Papel cálido
--background / paper
Fondo base
Tinta
--foreground / ink
Texto principal
Azul crepuscular
--primary / dusk
Cabeceras y CTA
Latón de lámpara
--accent / lamp
Acentos y foco
Cristal
--glass
Detalles y reflejos
Neutro
--muted
Superficies suaves
Tarjeta
--card
Bloques de contenido
Error
--destructive
Errores de formulario
Éxito
--success
Confirmaciones
Tipografía y escala
Espaciado, radios y sombras
Espaciado
- --spacing-gutter · 1.25rem
- --spacing-block · 2.5rem
- --spacing-section · 5rem
- --spacing-section-lg · 7.5rem
Radios
- rounded-xs
- rounded-sm
- rounded-md
- rounded-lg
- rounded-2xl
Sombras
- shadow-soft
- shadow-elegant
- shadow-lamp
Galería de componentes
Variantes y estados (normal, hover, foco de teclado, error, carga y deshabilitado) mostrados a la vez en modo claro y oscuro. Navega con Tab para comprobar el contraste del foco.
Modo claro
Prueba con Tab: todos muestran el anillo de foco en latón.
Modo oscuro
Prueba con Tab: todos muestran el anillo de foco en latón.
Exportación de tokens
Los tokens viven en src/design/tokens.ts y se publican también como /design-tokens.json. Cualquier sección nueva que use estas clases hereda el estilo automáticamente.
Colores
10
--accent · bg-accent
Radios
5
--radius · rounded-lg
Espaciados
4
--spacing-section
Sombras
3
--shadow-soft