Feature card
Icon + title + body. Used in 2–4-up grids on the home page and section intros. Headings inside cards are h3 — never skip levels.
Design system · living reference
One system, every page.
Every swatch and component on this page renders from the same CSS custom properties and classes the rest of the site uses — change a token in v3.css and this guide updates itself. Tokens over hex, always.
01 / COLOR
Tokens, not hex.
Components never hardcode color. The blue scale carries the brand; each accent ships with a dark ink twin that clears WCAG AA (4.5:1) as text on cream surfaces.
BRAND SCALE
blue-50
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900
ACCENTS + INK TWINS
--v3-blue-500 / ink
Primary brand — bright for fills, ink for text.
--v3-coral / ink
Warm accent — bright for fills, ink for text.
--v3-gold / ink
Highlight — bright for fills, ink for text.
--v3-green / ink
Live / success — bright for fills, ink for text.
NEUTRALS
charcoal
ink
slate
mist
line
paper
cloud
white
charcoal/ink for text, slate for secondary, line for borders, paper/cloud for surfaces.
02 / TYPE
Four faces, four jobs.
Each family has one role. Body and mono load as display: optional so the LCP element paints at fallback render — only the display face is allowed to swap in.
Display · Bricolage Grotesque
Grotesque, but make it friendly.
h1–h2, hero text, big numbers. display: swap — brand-critical.
Body · Hanken Grotesk
The quick brown fox jumps over the lazy dog — 0123456789.
Paragraphs, lede, prose. display: optional — keeps LCP at fallback render.
Logo · Baloo 2
wordmark only
Reserved for the wordmark lockup.
Mono · JetBrains Mono
v0.1.0 · 32230 · 00FF88
Labels, numerals, eyebrows, version pills.
SCALE
Heading one
Heading two
Heading three
Lede paragraph — the one-sentence promise under every h1.
Body paragraph. Comfortable measure, generous line-height, slate for secondary text and charcoal for primary.
03 / COMPONENTS
The working set.
Pills tag and categorize, buttons act, panels contain, eyebrows introduce. Everything below is the real class, not a mockup.
PILLS
FlagshipResearchReferenceLive
v3-pill v3-pill--{color} — one per card, top-left, always before the title.
EYEBROW + ACCENT
Section eyebrowTitle with an accent.
Eyebrows use blue-ink (not blue-500) so they clear contrast on cream. v3-accent underlines the payoff word in the heading.
04 / SURFACES
Radius and elevation.
Four radii, four shadows. Sections alternate cloud and paper backgrounds; cards sit on either with sh-1 at rest and sh-2 on hover.
RADII
r-sm · 5px
r-md · 9px
r-lg · 13px
r-xl · 18px
SHADOWS
sh-1 · Resting cards
sh-2 · Hover lift
sh-3 · Hero / featured
sh-glow · Focus / active glow
05 / MOTION
Reveal on scroll, eager above the fold.
Every section you've scrolled past on this page faded in through V3Reveal — an IntersectionObserver that adds .is-in once. Above-the-fold content uses the eager prop so first paint is already at full opacity and the LCP element never waits on JavaScript.
<V3Reveal eager> // hero, h1, lede — painted at full opacity, no observer
<V3Reveal> // everything below the fold — fades in on scroll
<V3Reveal delay={i * 60}> // stagger card grids 60ms per itemHOUSE RULES
- Tokens over hex — components never hardcode a color.
- Bright accents fill; ink twins write. Text on cream always uses the ink variant.
- Headings never skip a level; cards under an h2 use h3.
- One primary button per view.
- Above-the-fold reveals are eager — LCP never waits on an observer.
- Every page ships with a per-route OG card and passes the audit suite (axe, visual, perf budget).
Source of truth: app/v3.css — this page reads the tokens live.