The design system
A scalable foundation of typography, spacing, and modular components.
Every layout, interaction and motion curve is decided by hand. No templates, no defaults.
- Display
- Syne
- Body
- DM Sans
- Accent
- #D4D93F
- Motion
- Framer Motion
Bespoke typography
No default browser fonts. Every headline is set, scaled and spaced by hand — Syne for display, DM Sans for reading.
AaDisplaySyne
AaBodyDM Sans
Kinetic motion
Physics-based animations powered by GSAP and Framer Motion.
Core palette
Four colours, used with discipline. Paper to read on, navy for depth, yellow to point the way, ink to close.
Paper#F2F1EA
Navy#200F8C
Yellow#D4D93F
Ink#0B0B12