Design Tokens

The v2 warm ink/cream colour, typography, spacing, and risk tokens used across Kredal.

Kredal's Visual Identity v2 is a warm ink/cream system derived from a full design-token extraction of cursor.com, adapted for Kredal (see ADR 0010). Tokens are CSS variables in kredal-app/src/app/globals.css (Tailwind v4, @theme). The canonical rulebook is the repo-root design.md; the living showcase is the public /styleguide page.

Colour — light theme (default)

Token	Value	Role
`background`	`#f7f7f4`	Page canvas (warm paper)
`foreground`	`#26251e`	Ink text, primary buttons
`card`	`#fdfdfc`	Elevated cards
`muted`	`#f2f1ed`	Wells, code bg, table heads
`card-02` / `card-03`	`#ebeae5` / `#e6e5e0`	Tint ladder
`card-warm`	`#f3ede6`	Warm feature card
`border`	`#e6e5e0`	Hairlines
`brand`	`#f54e00`	Orange accent — CTAs, focus ring, links
`muted-foreground`	`#6b6a61`	Secondary text

Colour — dark theme (warm ink)

Token	Value
`background`	`#14120b`
`foreground`	`#edecec`
`card` / hover	`#1b1913` / `#201e18`
`border`	`#2c2a23`
primary button	cream `#edecec` on ink, hover `#d7d6d5`

Risk semantics (fixed meaning)

Risk colours mean risk level only — never decorative — and always pair with an icon and label. The band→risk mapping lives solely in src/lib/scoring/risk.ts.

Risk	Score band	Light	Dark
Low	80–100	`#1f8a65`	`#3fbd90`
Medium	55–79	`#b45309`	`#f2b13e`
High	0–54	`#cf2d56`	`#f47b96`

Badge backgrounds are soft tints (risk-*-bg) with AA-checked foregrounds (risk-*-foreground).

Typography

Inter (grotesque tuning: tracking −0.01em body, −0.02em ≥ h2; buttons 400–500, never bold). Geist Mono for code and tabular numbers.

Style	Size / line	Weight
`display`	2.8rem / 1.04	700 (marketing may use 500)
`h1`	2rem / 1.1	700
`h2`	1.5rem / 1.15	600
`h3`	1.125rem / 1.2	600
`body`	1rem / 1.5	400
`body-sm`	0.875rem / 1.45	400
`caption`	0.75rem / 1.35	400–500
`score-xl`	3.5rem / 1.05	700 tabular — the readiness score only

Shape, spacing, motion

Spacing: 4px base scale (4·8·12·16·24·32·48·64); marketing sections use 96–128px vertical rhythm.
Radius: cards 8–16px (--radius 10px base); buttons and badges are full pills.
Elevation: borders + tint ladder first; soft warm shadows xs→xl sparingly.
Motion: 0.14s ease-out for hovers/toggles; 0.4s reserved for the score gauge fill; prefers-reduced-motion honoured.

Charts

Categorical pastels: #dfa88f · #9fc9a2 · #9fbbe0 · #c0a8dd · warm grey. Risk colours appear in charts only when encoding risk.

Accessibility rules

WCAG AA in both themes; ink-on-cream is 13.9:1.
Orange #f54e00 is ≈3.4:1 on cream — CTAs, large text, and icons only; never body text.
Risk is never colour-only; focus rings visible everywhere; touch targets ≥ 44px.