Design

The site belongs to the YuTheme ecosystem: the same AMOLED true-black ground and warm near-black surfaces, Geist type, hairline borders, restrained motion, and editorial clarity used across Yuri's products, while keeping an identity of its own.

Identity

Ella's mark is a square gold "E" (used in the header and favicon) plus a gold diamond used as a recurring accent before eyebrows. There is no avatar, no face, no mascot. Identity lives in typography, composition, color, and small graphic details.

Tokens

Canonical YuTheme values, defined in apps/web/src/app/[locale]/globals.css:

• canvas #000000, window/surface #0b0b0a, raised #151514
• text primary #f4f1e8, secondary #b3ad9f, tertiary #8e887c
• accent gold #d6a84f, hover #e0b760
• neutral alpha borders: faint 0.08, subtle 0.13, default 0.2, strong 0.32
• radii 4/8/12px, window 14px, transition 160ms cubic-bezier(0.2, 0, 0, 1)

Do not add approximate colors when a canonical token exists.

Typography

• Geist Variable for everything; Geist Mono Variable for labels and metadata.
• Hero h1: clamp(2.25rem, 5vw, 3.25rem), weight 400, letter spacing -0.03em, with the italic gold "Ella".
• Section titles: clamp(1.5rem, 3vw, 2.25rem), weight 500.
• Eyebrows: mono, 11px, uppercase, letterspaced, with a gold diamond and section number (01, 02...).

Composition

• Header fixed at 64px, scrollspy marks the active section in gold.
• Hero is a two column grid on desktop: copy on the left, a terminal card on the right. On mobile it stacks.
• Editorial sections use a 1fr / 1.4fr grid with faint top borders and generous padding; they collapse to one column below 900px.
• The terminal card presents Ella's status lines with a blinking gold cursor. It is a design element, not a live terminal.

Motion

Quiet and functional:

• shimmer on the hero name and footer signature;
• blur-in entrance (yu-rise) on the hero columns;
• a quiet focal glow behind the terminal;
• scroll reveals with a small stagger, driven by IntersectionObserver;
• everything gated behind prefers-reduced-motion: no-preference. Under reduced motion all effects are disabled and content must remain visible.

Do not add decorative motion without a reduced-motion path.

Anti-patterns

Avoid SaaS chrome, neon purple, cliche anime styling, excessive gradients, free glassmorphism, dashboards, card walls, and decoration without function.