The principles
behind the brand
Built for coherence, adoption, and responsible progress
This guide defines how structure, value and vision work together at scale — across channels, audiences and time.
The principles
behind the brand
Built for coherence, adoption, and responsible progress
This guide defines how structure, value and vision work together at scale — across channels, audiences and time.
Not novelty for its own sake — originality that holds up under scrutiny, in systems other people have to run.
Work counts when it is used. Structure, enablement and habit over launch moments.
Challenge the default, carry the consequences. Governance is part of the idea, not a brake on it.
Precision without coldness. Confident, intentional, never loud.
The wordmark is the brand. Nat Vernier — Nat in Neue Hans Kendrick ExtraLight, Vernier in SemiBold. No symbol, no alternate lockup.
Clear space on all sides equals the cap height of the V. Nothing enters it.
Minimum 96px wide on screen, 24mm in print. Below that the counters close up.
✕ Don’t stretch, condense, use in serif or change wording
✕ Don’t recolour outside charcoal, ash or verve ink
✕ Don’t set verve on a light ground
Nine tokens, one accent. Verve carries emphasis; it never carries reading text.
#F4F4F4
Page ground, light mode
#67FF56
Accent only — never body text
#1D8757
Accent text, light mode
#B9FF9B
Hover state
#39D029
Pressed state
#2B3234
Page ground, dark mode
#202627
Sunken panels, dark mode
#585E5E
Secondary text on light
#B4C4C5
Hairlines, muted text on dark
Rule — Verve is an accent, capped at roughly 10% of any surface. For text on a light ground use Verve Ink #1D8757; Verve on Ash fails contrast at 1.19:1.
One specimen, ordered by actual size.
type/h5-number · 466 / 406 · numeric
type/h5 · 180 / 149 · sans
type/h1 · 125 / 130 · display
type/h2-display · 88 / 88 · display
type/statement · 88 / 88 · display
type/h1-compact · 80 / 75 · display
type/stat · 64 / 80 · numeric
type/h4 · 60 / 63 · display
type/h2 · 40 / 50 · display
type/h4-script · 40 / 50 · script
type/h2-list · 34 / 42 · display
type/h3 · 24 / 36 · display
type/paragraph · 24 / 36 · sans
type/lead · 20.8 / 32 · sans
One scale in a rhythm of 15s, four breakpoints, one grid. Every gap on the site is one of these seven steps.
4 px · Icon to label
8 px · Inside a chip
15 px · Stacked text
30 px · Block to block
60 px · Within a section
120 px · Section to section
240 px · Major break
margin 120 · content 1320
section gap 240 · block gap 60
Reference 1920 × 1080. Top bar, dot rail as a column.
margin 60 · content 900
section gap 160 · block gap 40
Reference 1440 × 900. The Webflow base breakpoint.
margin 60 · content 900
section gap 160 · block gap 40
Seeded from Laptop, not yet tuned. Top bar down to 768.
margin 20 · content 350
section gap 80 · block gap 24
Reference 390 × 844. Thumb bar below 768, touch targets ≥ 48.
radius/none · 0
radius/s · 10
radius/m · 18
radius/l · 26
radius/pill · 999
Editorial modules are square-cornered (radius/none). Rounded radii belong to interactive UI only: pills for buttons and HUD, m and l for game panels. Glass is the one elevated surface: bg/glass with a 14 px background blur, used where content floats over something that moves.
Motion clarifies relationships, establishes rhythm and rewards curiosity — always supporting comprehension. It is playful, minimal, and invites discovery.
Subtle parallax, gentle hover states and cursor-responsive images — present but never loud.
Quotes in TT Barrels appear letter by letter, sticky on scroll — editorial cadence brought to the interface.
Vertical to horizontal to vertical on the long pages — measured, readable, purposeful.
A state change is a change of fill or edge, not of size or position. Nothing moves under the cursor, so nothing has to be re-aimed.
Confident, intentional, precise. Humour, where it appears, is a playful critique of the current discourse — never of a person. Stated once, then shown.
Reduced delivery effort from 30 to 7 person-days, a 72% cut.
Dramatically transformed delivery performance across the board.
AI that fits the workflow people already have.
An agentic, end-to-end AI-native paradigm shift.
Could today have been an email?
Meetings, am I right? 😅
Here is what we measured, and what we chose not to pursue.
This approach works every time, guaranteed.
Every pair the system actually uses, measured. WCAG 2.1 AA needs 4.5:1 for body text and 3:1 for large text and UI edges.
charcoal on ash · #2B3234 on #F4F4F4 · Body text
AA body
graphite on ash · #585E5E on #F4F4F4 · Secondary text
AA body
verve ink on ash · #1D8757 on #F4F4F4 · Accent text
AA large only
verve on ash · #67FF56 on #F4F4F4 · Accent text — why verve ink exists
Fails AA
charcoal on verve · #2B3234 on #67FF56 · Text on accent
AA body
ash on charcoal · #F4F4F4 on #2B3234 · Body text
AA body
carbon on charcoal · #B4C4C5 on #2B3234 · Secondary text
AA body
verve on charcoal · #67FF56 on #2B3234 · Accent text
AA body
ash on qubit · #F4F4F4 on #202627 · Body on sunken
AA body
Consequence — verve never carries reading text on a light ground. Light mode uses verve ink for accent type and keeps verve for fills, edges and signals, where the 3:1 UI threshold applies instead.