Design
System
Tokens y componentes base del sitio. Modo único «de marca» (oscuro), paleta de apetito, escala tipográfica fluida, grid de 8pt y motion con easing custom. Toda esta referencia se construye encima de los tokens en src/styles/tokens.css.
Paleta de apetito
Fondos casi-negros cálidos + acentos rojo/mostaza de alto contraste. Todos los pares texto/fondo cumplen contraste AA mínimo.
Tinta (superficies)
- ink-950#0d0d10Fondo de página
- ink-900#141419Superficie base / inputs
- ink-850#191920Superficie elevada
- ink-800#202027Superficie interactiva
- ink-700#2c2c36Bordes
- ink-600#3d3d49Bordes suaves / placeholder
- ink-500#52525eTexto deshabilitado
Crema (texto)
- cream-50#fdf8efTexto principal
- cream-100#f6eddaTexto fuerte
- cream-300#dccbafTexto secundario
- cream-400#c6b393Texto terciario
- cream-500#a89774Texto muted
Ember (rojo de apetito)
- ember-300#f8916eHover / glows
- ember-400#f2694bAcento en texto
- ember-500#e0442cPrimary CTA
- ember-600#c2331dPrimario pressed
- ember-700#9f2a18Patty / profundidad
Mostaza
- mustard-300#ffd36bHover / highlights
- mustard-400#f4b93fFocus ring / acento
- mustard-500#daa02aAcento sólido
- mustard-600#b98317Pressed
- whatsapp-500#25d366CTA de pedido
- whatsapp-600#20bd5aHover / success
Escala fluida
Anton (display, para titulares con carácter) + Archivo Variable (texto, alta legibilidad). Auto-hospedadas con font-display: optional: cero layout shift, cero requests externos.
- text-hero · clamp(3rem → 7.5rem) · lh 0.95Crunchy burger
- text-4xl · clamp(2.25rem → 4rem) · lh 1.05Crunchy burger
- text-3xl · clamp(1.875rem → 3rem) · lh 1.1Crunchy burger
- text-2xl · clamp(1.5rem → 2.25rem) · lh 1.2Crunchy burger
- text-xl · clamp(1.25rem → 1.75rem) · lh 1.35Crunchy burger
- text-lg · clamp(1.125rem → 1.375rem) · lh 1.5Crunchy burger
- text-base · clamp(1rem → 1.125rem) · lh 1.6Crunchy burger
- text-sm · clamp(0.875rem → 1rem) · lh 1.5Crunchy burger
- text-xs · clamp(0.75rem → 0.875rem) · lh 1.5Crunchy burger
UI base
Botones
Badges
Inputs
Te confirmamos el pedido por este número.
Cards
Superficie base. Hover en producto lo «levanta» con sombra dinámica.
Pasa el mouse: se eleva, el borde toma mostaza y crece la sombra.
Easing y profundidad
Nada de ease-lineal. Cada transición usa curvas pensadas. Todas las animaciones respetan prefers-reduced-motion.
Easings
- ease-out-expocubic-bezier(0.16, 1, 0.3, 1)Transiciones de UI y entradas
- ease-out-power3cubic-bezier(0.22, 1, 0.36, 1)Scroll / GSAP
- ease-springcubic-bezier(0.34, 1.56, 0.64, 1)Micro-interacciones con rebote