Retoños del Edén

Sistema Edén

Acuarela + tinta: pigmentos con borde irregular, papel con grano y líneas temblorosas. Todo definido como tokens en src/styles/tokens.css.

← Volver al sitio

Pigmentos

Cada color existe como lavado (claro) y pigmento concentrado (oscuro). Los contrastes de texto usan siempre --tinta sobre fondos claros o --papel sobre los 700.

Miel

--miel-100
--miel-200
--miel-300
--miel-500
--miel-700

Pistacho

--pistacho-100
--pistacho-200
--pistacho-300
--pistacho-500
--pistacho-700

Lavanda

--lavanda-100
--lavanda-200
--lavanda-300
--lavanda-500
--lavanda-700

Barro

--barro-100
--barro-200
--barro-300
--barro-500
--barro-700

Cielo

--cielo-100
--cielo-200
--cielo-300
--cielo-500

Papel & Tinta

--papel
--papel-warm
--tinta-tenue
--tinta-suave
--tinta

Tipografía

Fraunces Variable (display, con ejes SOFT/WONK para el gesto orgánico) + Outfit Variable (texto y UI). Escala fluida con clamp().

Retoños del Edén

Nuestra historia, contada volando — fs-900

Talleres en la chacra — fs-700

Texto de lectura en Outfit: los pistachos tardan cinco años en dar fruto, y la paciencia es como la miel. — fs-400

KICKER / ETIQUETA — fs-300

Espacio & forma

Base de 4 px. Radios generosos y un radio “mancha” (--r-blob) para elementos orgánicos.

--sp-1
--sp-2
--sp-3
--sp-4
--sp-5
--sp-6
--sp-7
--sp-8
--r-sm
--r-md
--r-lg
--r-blob

Movimiento

Regla de oro: el contenido nunca depende de la animación. Con prefers-reduced-motion todo queda visible y quieto.

TokenUso
--dur-1 · 140 msMicrofeedback: hover, focus, chips
--dur-2 · 260 msTransiciones de UI: botones, tarjetas
--dur-3 · 520 msEscenas: modales, sheets, reveals
--ease-outEntradas y salidas estándar
--ease-bouncePersonalidad: Meli, íconos, botones

Componentes

Botones

Chips

Pistacho Miel Lavanda Barro

Tarjeta + burbuja

Ejemplo

Tarjeta

Fondo blanco cálido, sombra suave, se eleva al pasar el cursor.

Hola, soy una burbuja de diálogo. Meli habla en Fraunces itálica suave.

Formulario

Meli