Diseño

El sitio pertenece al ecosistema YuTheme: el mismo fondo negro absoluto (AMOLED) y superficies casi negras cálidas, el tipo Geist, los bordes finos, el movimiento contenido y la claridad editorial usados en los productos de Yuri, manteniendo al mismo tiempo una identidad propia.

Identidad

La marca de Ella es una "E" dorada cuadrada (usada en el header y el favicon) más un rombo dorado usado como acento recurrente antes de los eyebrows. No hay avatar, rostro ni mascota. La identidad vive en la tipografía, la composición, el color y los pequeños detalles gráficos.

Tokens

Valores canónicos YuTheme, definidos en apps/web/src/app/[locale]/globals.css:

• canvas #000000, window/surface #0b0b0a, raised #151514
• texto primario #f4f1e8, secundario #b3ad9f, terciario #8e887c
• dorado de acento #d6a84f, hover #e0b760
• bordes con alpha neutro: faint 0.08, subtle 0.13, por defecto 0.2, fuerte 0.32
• radios 4/8/12px, ventana 14px, transición 160ms cubic-bezier(0.2, 0, 0, 1)

No añadas colores aproximados cuando existe un token canónico.

Tipografía

• Geist Variable para todo; Geist Mono Variable para labels y metadata.
• h1 del hero: clamp(2.25rem, 5vw, 3.25rem), peso 400, letter spacing -0.03em, con la "Ella" dorada en cursiva.
• Títulos de sección: clamp(1.5rem, 3vw, 2.25rem), peso 500.
• Eyebrows: mono, 11px, mayúsculas, espaciadas, con rombo dorado y número de sección (01, 02...).

Composición

• Header fijo de 64px; el scrollspy marca la sección activa en dorado.
• El hero es una cuadrícula de dos columnas en escritorio: texto a la izquierda, tarjeta terminal a la derecha. En móvil se apila.
• Las secciones editoriales usan una cuadrícula 1fr / 1.4fr con bordes superiores sutiles y padding generoso; colapsan a una columna bajo 900px.
• La tarjeta terminal presenta las líneas de estado de Ella con un cursor dorado parpadeante. Es un elemento de diseño, no un terminal real.

Motion

Tranquilo y funcional:

• shimmer en el nombre del hero y la firma del footer;
• entrada con desenfoque (yu-rise) en las columnas del hero;
• un brillo focal discreto detrás del terminal;
• revelaciones de scroll con pequeño stagger, dirigidas por IntersectionObserver;
• todo controlado por prefers-reduced-motion: no-preference. Con reduced motion, todos los efectos se desactivan y el contenido debe permanecer visible.

No añadas motion decorativo sin un camino de reduced motion.

Anti-patrones

Evita chrome de SaaS, púrpura neón, estilo anime de cliché, gradientes excesivos, glassmorphism gratuito, paneles, muros de tarjetas y decoración sin función.