Design

Die Website gehört zum YuTheme-Ökosystem: derselbe Grund in Reinschwarz (AMOLED) mit warmen Fast-Schwarz-Flächen, der Geist-Schriftschnitt, feine Linien, zurückhaltende Bewegung und redaktionelle Klarheit aus Yuris Produkten, mit einer eigenen Identität.

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.

Tokens

Kanonische YuTheme-Werte, definiert in apps/web/src/app/[locale]/globals.css:

• Canvas #000000, Window/Surface #0b0b0a, Raised #151514
• Text primär #f4f1e8, sekundär #b3ad9f, tertiär #8e887c
• Akzentgold #d6a84f, Hover #e0b760
• neutrale Alpha-Ränder: faint 0.08, subtle 0.13, Standard 0.2, stark 0.32
• Radien 4/8/12px, Fenster 14px, Übergang 160ms cubic-bezier(0.2, 0, 0, 1)

Keine ungefähren Farben hinzufügen, wenn ein kanonischer Token existiert.

Typografie

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

Komposition

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

Motion

Ruhig und funktional:

• Shimmer auf dem Hero-Namen und der Footer-Signatur;
• Blur-in-Eingang (yu-rise) auf den Hero-Spalten;
• ein dezenter fokaler Schein hinter dem Terminal;
• 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.

Anti-Muster

SaaS-Chrome, Neon-Lila, klischeehafter Anime-Stil, übermäßige Verläufe, kostenlose Glassmorphism, Dashboards, Kartenwände und Dekoration ohne Funktion vermeiden.