DOC/ Aktualisiert am 2026-09-19
Design
Die visuelle Sprache, YuTheme-Tokens und Ellas Identität.
Die Website gehört zum YuTheme-Ökosystem: dieselbe warme dunkle Palette, der Geist-Schriftschnitt, feine Linien, zurückhaltende Bewegung und redaktionelle Klarheit aus Yuris Produkten, mit einer eigenen Identität.
Ellas Markenzeichen ist ein quadratisches goldenes „E" (im Header und im Favicon) plus eine goldene Raute als wiederkehrendes Akzent vor den Eyebrows. Kein Avatar, kein Gesicht, kein Maskottchen. Identität lebt in Typografie, Komposition, Farbe und kleinen grafischen Details.
Kanonische YuTheme-Werte, definiert in
apps/web/src/app/[locale]/globals.css:
- Canvas
#1a1813, Surface#191811, Raised#1f1d17 - Text primär
#f4f1e8, sekundär#b8b2a4, tertiär#827c70 - Akzentgold
#d6a84f, Hover#e0b760 - warme Alpha-Ränder: faint 0.06, subtle 0.08, Standard 0.14, stark 0.22
- Radien 4/6/8px, Übergang 160ms cubic-bezier(0.2, 0, 0, 1)
Keine ungefähren Farben hinzufügen, wenn ein kanonischer Token existiert.
- Geist Variable für alles; Geist Mono Variable für Labels und Metadata.
- Hero-
h1: clamp(2.25rem, 5vw, 3.25rem), Gewicht 400, Letter-Spacing -0.03em, mit dem kursiven goldenen „Ella". - Abschnittstitel: clamp(1.5rem, 3vw, 2.25rem), Gewicht 500.
- Eyebrows: Mono, 11px, Großbuchstaben, gesperrt, mit goldener Raute und Abschnittsnummer (01, 02...).
- Header fix bei 64px; Scrollspy markiert den aktiven Abschnitt in Gold.
- Das Hero ist auf Desktop ein zweispaltiges Raster: Text links, eine Terminal-Karte rechts. Auf Mobile stapelt es sich.
- Redaktionelle Abschnitte nutzen ein 1fr / 1.4fr-Raster mit feinen oberen Rändern und großzügigem Padding; unter 900px fallen sie auf eine Spalte.
- Die Terminal-Karte zeigt Ellas Statuszeilen mit blinkendem goldenem Cursor. Sie ist ein Designelement, kein echtes Terminal.
Ruhig und funktional:
- Shimmer auf dem Hero-Namen, dem primären Button, der Header-Marke und der Footer-Signatur;
- ambienter Hintergrund-Schein, der langsam drifft;
- Scroll-Reveals mit kleinem Stagger, gesteuert über IntersectionObserver;
- alles hinter
prefers-reduced-motion: no-preference. Bei Reduced Motion sind alle Effekte deaktiviert und der Inhalt muss sichtbar bleiben.
Keine dekorative Motion ohne Reduced-Motion-Pfad hinzufügen.
SaaS-Chrome, Neon-Lila, klischeehafter Anime-Stil, übermäßige Verläufe, kostenlose Glassmorphism, Dashboards, Kartenwände und Dekoration ohne Funktion vermeiden.