Ella Mizuki
Toutes les docs

DOC/ Mis à jour le 2026-09-19

Design

Le langage visuel, les tokens YuTheme et l'identité d'Ella.

Le site appartient à l'écosystème YuTheme : la même palette sombre et chaude, 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.

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.

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

  • canvas #1a1813, surface #191811, raised #1f1d17
  • texte primaire #f4f1e8, secondaire #b8b2a4, tertiaire #827c70
  • doré d'accent #d6a84f, hover #e0b760
  • bordures alpha chaudes : faint 0.06, subtle 0.08, défaut 0.14, strong 0.22
  • rayons 4/6/8px, transition 160ms cubic-bezier(0.2, 0, 0, 1)

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

  • 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...).

  • 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.

Calme et fonctionnel :

  • shimmer sur le nom du hero, le bouton primaire, la marque du header et la signature du footer ;
  • lueur ambiante de fond qui dérive lentement ;
  • 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.

É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.