Foundations
Colour system
Core palette
Five named tokens. Light to dark:
#f9f6f6
#e8e3e3
#71b8b8
#366867
#2c3030
| Token | Value | Contrast on offwhite | Usage |
|---|---|---|---|
--color-offwhite | #f9f6f6 | — | Page background. No plain white on the site. |
--color-bg | → offwhite | — | Semantic alias for page background |
--color-border | #e8e3e3 | — | Borders and dividers |
--color-primary | #71b8b8 | 2.11:1 | Decoration only: backgrounds, accents, tints. Never text or links. |
--color-primary-rgb | 113, 184, 184 | — | For rgba() usage |
--color-mid | #366867 | 5.86:1 AA ✓ | The only teal safe for text or links |
--color-dark | #2c3030 | 12.43:1 AAA ✓ | Primary text and the site header background. Near-black with a slight cool cast, not a teal. |
--color-mid exists. The brand teal (#71b8b8) fails WCAG AA contrast on the offwhite background (2.11:1 vs. the required 4.5:1). Rather than darken the brand color globally, we keep the brand teal for decorative use and introduce --color-mid (#366867, 5.86:1) for any text or interactive element that needs accessible contrast.Teal tints
The brand teal is also used at reduced opacity for backgrounds. These are not named tokens; they are computed with rgba(var(--color-primary-rgb), alpha).
callout
nav hover
tags / rows
headers
| Alpha | Usage |
|---|---|
| 0.06 | Rationale callout boxes |
| 0.07 | Sidebar nav hover, docs active items |
| 0.08 | Blog tag pills, mobile nav items, table row hover |
| 0.10 | Table section headers, docs section header backgrounds |
| 0.15 | Focus rings and tinted borders on interactive elements |
All tints are decoration-only. Never use them as a background behind text that relies on contrast with the offwhite page background.
Text colors
| Token | Value | Contrast on offwhite | Usage |
|---|---|---|---|
--color-text | → dark | 12.43:1 AAA ✓ | Primary text (alias for --color-dark) |
--color-text-light | #464646 | 8.78:1 AA ✓ | Secondary text |
--color-text-muted | #6b6b6b | 4.96:1 AA ✓ | Metadata, captions, de-emphasised labels |
Business function colors
Each business function has a dedicated color used consistently across the model, sidebar navigation, and practice pages.
Each has a -light variant for hover states and cell accents. These colors carry meaning; they are not decorative tints. Never use a BF color outside its business function context.
Surfaces
Three surface levels create depth without heavy shadows. Cards lift from the page background through color, not box-shadow.
Typography scale
Based on the golden ratio with half-power steps (√φ ≈ 1.272). The base is 1rem (typically 16px). Each step multiplies or divides by 1.272.
Font stacks
| Token | Stack | Usage |
|---|---|---|
--font-brand | “Days One”, sans-serif | Headings, logo, hero text |
--font-sans | system-ui, -apple-system, “Segoe UI”, sans-serif | All body text |
--font-mono | ui-monospace, “SF Mono”, “Fira Code”, monospace | Code blocks, tokens |
--line-height | 1.618 (φ) | Body line height |
Days One is loaded from Google Fonts and scoped strictly to headings and the logo. Body text uses system fonts for performance: no flash of unstyled text, no network dependency for readability.
Spacing scale
Pure golden ratio, base 1rem (16px). Each step multiplies by φ (1.618) going up or divides going down.
| Token | Value | Ratio | Usage |
|---|---|---|---|
--space-xs | 0.382rem (≈6px) | φ⁻² | Icon-to-text gaps, tight inline spacing |
--space-sm | 0.618rem (≈10px) | φ⁻¹ | Button padding (vertical), badge padding |
--space-md | 1rem (16px) | φ⁰ | Base unit — body gaps, card padding |
--space-lg | 1.618rem (≈26px) | φ¹ | Section gaps, nav item padding, content padding |
--space-xl | 2.618rem (≈42px) | φ² | Large section margins, hero padding |
--space-2xl | 4.236rem (≈68px) | φ³ | Hero spacing, page-level gaps |
--space-3xl | 6.854rem (≈110px) | φ⁴ | Logo sizes, large image containers |