SISTEMA.
*Bowlby One SC / DM Sans / Special Elite — toca todo, si no hace ruido visual no sirve*
COLOR + TIPO
Clic en un color para copiar su hex. Contraste: tinta sobre marfil siempre; rojo solo para acentos y errores.
#050505
#F7F0E4
#B8B2A8
#F45145
Se usa en mayúsculas, apretado, nunca en párrafos largos.
La llave de cuerda gira y la web hace wiggle. Juego, no formulario.
Special Elite — notas: *hecho a mano, no perfecto*
TOCABLES
Sombra dura 4px que se hunde al presionar. Focus rojo visible con teclado (prueba con Tab).
PREGUNTA BONITO
Prueba a enviar vacío: verás error en rojo. Con nombre + email válido: verás ok en verde.
*pop al marcar, pomo con punto rojo, riel rallado; Tab = foco rojo*
*el mismo slider del truco boceto → tinta*
SELLOS Y RUIDO
12 PRINCIPIOS
Todo el motion de chapa. sale de aquí. Tokens: --ease-chapa (sobrepaso), --ease-suave, --t-snap 150ms / --t-ui 300ms / --t-show 900ms. Si activas “reducir movimiento”, todo se queda quieto.
Botón real hundiéndose solo: sombra 4px→0 con squash. Es el mismo press de toda la página.
Pull-back a la izquierda y luego salto. Así entrará el CTA principal de la home.
Un foco con resplandor rojo, resto dim 55%. Así abre el modal real (clic fuera = cerrar).
el navegador interpola
Card real entre 2 poses clave. Así flotarán las tarjetas de la home al hacer scroll.
Toast real con sobrepaso --ease-chapa. Igualito al aviso de “copiado” y al modal.
Curva campana: arranca y frena despacio. Nada se mueve linear salvo el ejemplo malo.
✦La mascota real: crece al hover y el ✦ respira solo. Appeal = ojos grandes + guiño.
Balanceo en curva, nunca en recta. Así flotará la mascota del hero: arco ±8°.
Hover ×1.22, press con squash ×1.3. Exagera 2 frames y calma: CTA de footer.
Componentes reales, sombras duras abajo-derecha. Principio estático: volumen sin motion.
El toast entra y la estrellita lo sigue 150ms después. Secundario nunca roba el foco.
Mueve el slider: snap ~150ms, UI ~300ms, show ~900ms. Los dots irregulares = ritmo, no metrónomo.