Design tokens & style system
One canonical source for the colors, type, spacing and components already in use across the seven page designs, pulled from the real mockups, not invented. Marketing site only; the audit report stays Inter + JetBrains Mono.
Internal reference, not a marketing page.
Decisions made in this pass
Critical / error color
Adopted both: #B4432E as the base value (paper/light surfaces), #E4714F as its lift, used on dark surfaces and for hover/tint states. Mirrors the charcoal base/lift pattern already in the logo mark.
Muted text · #6B6A62 vs #8E8C82
Confirmed as two intentional tokens, not a duplicate: Muted label (#6B6A62) for mono eyebrows/captions/small stats; Muted body (#8E8C82) for readable paragraph copy. Kept both.
Full dark theme?
Shipped as a toggle. Every page now reads CSS custom properties only, no hardcoded hex outside this reference and the :root blocks.
Colors
Several pairs follow the same rule as the logo's charcoal: a deeper base value for paper/light surfaces and a lifted, brighter value for dark surfaces, so contrast holds either way.
Dark surfaces
Ink
#111111
--bg / --ink
Primary dark background, everywhere
Card / inset
#0A0A0A
--bg-sunken / --code-bg
Chart panels, code blocks
Hairlines · dark
Hairline
#2A2A2A
--hairline
Section dividers, card borders
Hairline · inner
#1F1F1F
--hairline-inner
Nested row dividers
Brand / accent
True Green
#37D399
--true
Accent, brand, primary CTA
Green · hover
#4EE0A8
--true-hover
Primary CTA hover state
Green · border
#1F7D5C
--true-dim
Card border, pill outline
Status · critical / rust
Rust · base
#B4432E
--rust
Critical/error on paper
Rust · lift
#E4714F
--rust-lift
Critical on dark / hover-tint
Text
Text · primary
#F5F5F5
--text
Default text on dark
Muted · body
#8F8F8F
--text-muted
Paragraph / muted body copy
Muted · label
#8A8A8A
--text-label
Mono eyebrows, captions, small stats
Type scale
Newsreader (display and serif body) + Hanken Grotesk (UI) + JetBrains Mono (data, labels, code). Sizes shown are the existing clamp() desktop ceiling → mobile floor already used across pages.
Hero H1
500 · 42–76px · lh 1.0
Chaos in. Predictability out.
Page hero headline
Section H2
500 · 28–46px · lh 1.02
The license ladder.
Section headings
Card H3
500 · 19–24px
Health Check
Card / tier titles
Footer display
500 · 32–52px · lh 1.04
Start with the health check.
Closing CTA banners
Lede
400 · 19–23px · lh 1.45
Run it yourself, or have us run it with you.
Hero subhead
Body serif
400 · 19–21px · lh 1.5
The machine does the cheap work.
Section intros
Body UI
400 · 17px · lh 1.6
Base paragraph and UI copy.
Default body text
Small body
400 · 13–15px · lh 1.5
Feature list / fine print.
Card features, footnotes
Eyebrow
400/500 · 13px · sentence case
MOTION 1 · SELF-SERVE
Section labels
Mono data
400 · 21–40px
6.6
Stats, scores, prices
Button / CTA
500 · 13–14px
Subscribe →
Buttons, pills
Spacing scale
Base-4 scale, grounded in the gaps/padding already in use. Read from named steps, not per-page magic numbers.
44px
Icon-to-label gaps, tightest spacing
88px
Chip/tag gaps, feature-row gaps
1212px
Small stacks, CTA row gaps
1616px
Card internal rhythm, list gaps
2424px
Grid gaps between cards
3232px
Page gutter, card padding
4848px
Section-internal breathing room
6464px
Large block separation
Layout constants
Content max-width1080px
Page gutter32px
Section vertical padding88px
Hero padding158px / 76px
Footer padding100px / 70px
Card / control radius7–14px
Pill / tag radius99px
Nav height~64px
Components
Recurring atoms, documented once.
Buttons / CTAs
Radius 7px (rect) / 99px (pill). Default → hover: bg #37D399 to #4EE0A8, +translateY (-1 to -2px), transition .15–.2s. Disabled: bg #2A2B28, text #6B6A62, no transform.
Cards
Card · on dark, default
Card · on dark, highlighted
Card · on paper
Radius 10–14px. Border #2A2A2A default, #1f7d5c on hover/highlight. Hover lift: translateY (-3 to -4px), transition .3s. Paper card fill #FBFAF6 on #F2EFE8 page bg, border #E2DECF.
Badges / pills
lowmediumcriticalMost bookedEU AI ActAI
Severity dot 8px circle: low, medium, critical. Callout pill (e.g. "Most booked"): solid #37D399 bg. Framework/AI tag: outline #1f7d5c, text #37D399, 99px radius.
Dividers / hairlines
Section divider · dark · #2A2A2A
Nested row divider · dark · #1F1F1F
Section divider · paper · #D4D4D4
Row divider · paper · #E0E0E0
Code blocks
// empty-catch-block
async function saveVendor(data) {
try {
return await api.save(data);
} catch (e) {
// nothing here: the error is swallowed
}
}
keyword · #9AA8FF
function · #F0C97A
text · #AAAAAA
comment · #8C8C8C
line # · #7C7C7C
flagged · #FF7B7B