Design system — Bento Caramelo v2
Bento Caramelo v2 — Sistema de diseño
Cuerpo — clamp(16 → 21 px) según la anchura del contenedor. Medida máxima 60 caracteres.
Cada sección tiene su familia y no la cambia nunca. El paso tint es fondo, el base es superficie de tarjeta y el deep es el único válido para texto pequeño, enlaces y anillo de foco (contraste ≥ 4.5:1 sobre papel).
−2 px en Y + barrido de color desde el borde inferior. 180 ms · ease-snap.
El borde negro se separa 6 px. Elevación sin sombra. 320 ms.
La rotación queda reservada al sello y al logo. En ningún otro sitio.
- --dur-1 120 ms · micro / reduced-motion
- --dur-2 180 ms · hover de píldora
- --dur-3 320 ms · tarjetas y color
- --dur-4 600 ms · entrada en viewport
- --ease-snap cubic-bezier(.2,.9,.25,1)
- --ease-out-soft cubic-bezier(.16,1,.3,1)
Cada tarjeta entra con translateY 12 px + fade + escala 0.985, stagger de 60 ms, disparada por IntersectionObserver una sola vez.
Con prefers-reduced-motion todo se reduce a un fade de 120 ms y los hovers no mueven nada.
Foco: anillo de 3 px en coral deep con offset de 3 px, visible sobre el borde negro. Altura 44–52 px, radio 999, borde 2 px siempre, nunca sombra.
6 columnas en escritorio, 2 en tablet, 1 en móvil. Gap 16 px, ancho máximo 1280 px. Radio 24 px en tarjeta, 14 px en muestra, 999 px en píldora.
Frases cortas. Verbos concretos. Cero «potenciar», «disruptivo» o «ecosistema» usado como relleno.
Si una frase se puede decir con tres palabras menos, se dice con tres palabras menos. El chiste va al final, nunca al principio.
Nunca prometemos transformación. Prometemos algo que hacer el lunes.
Toda foto entra en escala de grises y se tiñe con dos tokens: las sombras suben al tono deep de la familia y las luces bajan al tono tint. Al pasar el ratón o enfocar con teclado la tarjeta que la contiene, la imagen recupera su color natural en 600 ms. Con prefers-reduced-motion el cambio es inmediato, sin transición.
