Design

The site belongs to the YuTheme ecosystem: the same warm dark palette, 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 src/styles/global.css:

• canvas #1a1813, surface #191811, raised #1f1d17
• text primary #f4f1e8, secondary #b8b2a4, tertiary #827c70
• accent gold #d6a84f, hover #e0b760
• warm alpha borders: faint 0.06, subtle 0.08, default 0.14, strong 0.22
• radii 4/6/8px, 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, primary button, header mark, and footer signature;
• ambient background glow that drifts slowly;
• 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.