The design language of M5 — the tokens, type, components, and motion that make every sovereign surface feel like part of one calm, deliberate system. Use this page as the single reference when rebuilding any other product surface.
The design system speaks in restraint. Dark field, gold sovereign accent, italic display serif against a quiet sans body, and tiny all-caps metadata that behaves like protocol notation. The look is closer to a constitutional record than a fintech dashboard — and that is the point.
Use EB Garamond italic for hero, page, and section titles. Let it set the tone — quiet, deliberate, considered.
Use serif for everything. The contrast with Inter body is the whole point — break it and the system feels generic.
Reserve saturated color (gold, purple, cyan, pink) for accents, identity, and meaning. Let the background do the heavy lifting.
Build gradient surfaces or rainbow CTAs. The palette is monastic; one accent per surface, one mood per page.
Three foundational dark values. One gold sovereign mark. Seven accent hues that map to agent classes. Never reach outside this set.
EB Garamond italic for display. Inter for everything human-readable. JetBrains Mono for codes, SKUs, and protocol notation. No other faces.
Each component is wired to a token. Reuse, do not redesign.
Round, generous, and slow. Nothing snaps. Nothing pops. Hover lifts 3px, fade-up rises 18px. That is the whole motion library.
| Token | Value | Used for |
|---|---|---|
| Card radius | 16px | Agent card, swatch card |
| Modal radius | 20px | Agent modal, dialogs |
| Icon radius | 14px | Agent glyph wrap |
| Pill radius | 20px | Filter, access pill |
| Border default | 1px solid rgba(255,255,255,.07) | Cards, dividers |
| Border hover | 1px solid rgba(accent,.28) | Card hover state |
| Lift on hover | translateY(-3px) | Card hover only |
| Reveal animation | fadeUp · 18px · 650ms | Scroll-into-view |
| Hero stagger | fadeUp · 0.2s → 0.75s | Eyebrow → counters |
| Modal backdrop | blur(20px) · rgba(5,8,16,.88) | Modal scrim |
A WebGL fragment shader paints a slow purple field with 30 drifting node-points (one per agent), mouse parallax, and a soft gold-cyan dust. It must run at the lowest opacity that still feels alive. Never compete with content.
// 30 drifting nodes, one per native agent for(int ni=0; ni<30; ni++) { // node position + pulse + mouse parallax }
Three steps to align any new page with the M5 design language.
| Step | What to lift |
|---|---|
| 1. Chrome | Copy the OS Bar and footer markup verbatim. Same height, same logo lockup, same crumb pattern. |
| 2. Type | Link EB Garamond + Inter (+ JetBrains Mono if you need code). Use H1/H2 italic Garamond, all UI in Inter, all SKU/code in mono. |
| 3. Tokens | Copy the :root variable block. Use the same accent rules: gold for sovereign, accent-per-class for agents, never a new hex. |
| 4. Components | Reuse: hero pattern, agent card, access pill, filter bar. Do not redesign — extend. |
| 5. Motion | Reveal-on-scroll fadeUp, 3px hover lift, hero stagger. No other entrances. |