One page, eighteen moments. The experience moves from quiet micro-motion to cinematic scroll storytelling, and never leaves the same visual system to do it.
Every moment can feel different without every section looking like a different website.
One system, many expressions
Built from reusable rules, not random decoration.
Compositions and behaviour change from section to section. Typography, spacing, surfaces and component logic do not. Each card below is the same object with a different payload.
01
Responsive rhythm
Four responsive states — 1440, 1366, 1024 and 768 — are designed, not derived. Layouts reorganise instead of shrinking.
02
Semantic hierarchy
Display, Heading, Lead, Body and Label are roles with fixed behaviour, not ad-hoc font sizes.
03
Surface discipline
Light, elevated and dark surfaces are introduced only when information structure asks for a new layer — never for variety alone.
04
Motion hierarchy
Micro-motion supports scanning. Complex animation is reserved for narrative moments where movement carries meaning.
05
Reusable interaction
Tabs, accordions, cards and buttons keep the same shape and behaviour throughout, so the page stays learnable.