Design

Le site appartient à l'écosystème YuTheme : le même fond noir absolu (AMOLED) et des surfaces quasi noires chaudes, le type Geist, les bordures fines, le mouvement retenu et la clarté éditoriale utilisés dans les produits de Yuri, tout en gardant une identité propre.

Identité

La marque d'Ella est un « E » doré carré (utilisé dans le header et le favicon) plus un losange doré utilisé comme accent récurrent avant les eyebrows. Pas d'avatar, pas de visage, pas de mascotte. L'identité vit dans la typographie, la composition, la couleur et les petits détails graphiques.

Tokens

Valeurs canoniques YuTheme, définies dans apps/web/src/app/[locale]/globals.css :

• canvas #000000, window/surface #0b0b0a, raised #151514
• texte primaire #f4f1e8, secondaire #b3ad9f, tertiaire #8e887c
• doré d'accent #d6a84f, hover #e0b760
• bordures alpha neutres : faint 0.08, subtle 0.13, défaut 0.2, strong 0.32
• rayons 4/8/12px, fenêtre 14px, transition 160ms cubic-bezier(0.2, 0, 0, 1)

N'ajoutez pas de couleurs approximatives quand un token canonique existe.

Typographie

• Geist Variable pour tout ; Geist Mono Variable pour les labels et la metadata.
• h1 du hero : clamp(2.25rem, 5vw, 3.25rem), poids 400, letter spacing -0.03em, avec le « Ella » doré en italique.
• Titres de section : clamp(1.5rem, 3vw, 2.25rem), poids 500.
• Eyebrows : mono, 11px, majuscules, espacées, avec losange doré et numéro de section (01, 02...).

Composition

• Header fixe à 64px ; le scrollspy marque la section active en doré.
• Le hero est une grille à deux colonnes sur desktop : le texte à gauche, une carte terminal à droite. Sur mobile, ça s'empile.
• Les sections éditoriales utilisent une grille 1fr / 1.4fr avec des bordures supérieures subtiles et un padding généreux ; elles passent à une colonne sous 900px.
• La carte terminal présente les lignes de statut d'Ella avec un curseur doré clignotant. C'est un élément de design, pas un terminal réel.

Motion

Calme et fonctionnel :

• shimmer sur le nom du hero et la signature du footer ;
• une entrée avec flou (yu-rise) sur les colonnes du hero ;
• une lueur focale discrète derrière le terminal ;
• révélations au scroll avec un petit stagger, pilotées par IntersectionObserver ;
• tout est contrôlé par prefers-reduced-motion: no-preference. En reduced motion, tous les effets sont désactivés et le contenu doit rester visible.

N'ajoutez pas de motion décorative sans chemin reduced motion.

Anti-patrons

Évitez le chrome SaaS, le violet néon, le style anime de cliché, les dégradés excessifs, le glassmorphism gratuit, les tableaux de bord, les murs de cartes et la décoration sans fonction.