The complete visual language of this study guide — colors, type, spacing, components, and motion — extracted from the built pages, audited against WCAG 2.1, and documented so any page added later stays consistent.
What the audit found, and what changed
An automated extraction across 292 elements scored the system 89/100, with perfect marks for color discipline, spacing, and border-radius consistency — but 29 WCAG contrast failures.
The cause: the five accent colors were defined once and reused in both themes. #e63a00 on white measures 4.23:1 against a 4.5:1 requirement for small text; amber #f5a524 measured 2.04:1. Since red and amber are exactly the colors that mark high-yield content and memory hooks, the most important material was the hardest to read.
The extraction reported these as light-mode problems. They were not only light-mode problems — a direct measurement found #e63a00 at 3.74:1 on the dark raised surface as well, and the tertiary text token failing in both themes.
Fixed: each theme now gets its own accent values at identical hue and saturation, with only lightness moved — darker on white, lighter on black. The vivid #e63a00 survives as --red-br for the chapter rule and pill borders, where the 3:1 requirement for large text and UI components applies.
Nine colors, no gradients, no shadows. Three carry meaning and must never be used decoratively.
Semantic accents — these encode meaning
Neutrals — dark theme (default)
Neutrals — light theme
| Token | Was | Ratio | Light | Dark | Worst ground |
|---|---|---|---|---|---|
| --red | #e63a00 | 4.23 | #be3000 5.04 | #ff4607 4.62 | .hy box · --bg3 |
| --amber | #f5a524 | 2.04 | #976007 4.62 | #f5a524 7.49 | --bg3 |
| --green | #2ecc71 | 2.10 | #1c7b44 5.29 | #2ecc71 8.31 | --bg2 |
| --blue | #4aa3ff | 2.63 | #0069d6 5.26 | #4aa3ff 6.63 | --bg2 |
| --purple | #a97bff | 3.02 | #803bff 4.68 | #a97bff 5.19 | .pit box |
| --tx3 | #7a828c | 3.73 | #666d75 4.60 | #818c99 4.63 | --bg3 |
| --red-br | — | — | #e63a00 in both themes · 3.71 | Borders and 3px rules only — 3:1 applies | |
| --red-solid | — | — | #ca3300 in both themes · white text 5.27 | Filled controls carrying white text | |
Three rounds were needed. The first pass fixed the five accents against plain surfaces; a second found dark mode failing too (#e63a00 was 3.74:1 on the raised surface); a third caught text sitting on tinted grounds — the red-tinted .hi table row and the .hy / .mem / .pit boxes drop the effective ratio by roughly 0.2, which pushed #ca3300 back under 4.5 and forced #be3000.
How this is kept from regressing
node build/contrast.js audits every text token against every background it actually appears on — the three surfaces plus the five tinted composites — in both themes, and exits non-zero on any failure. A live sweep over the rendered pages confirms it: 20,758 text nodes across the full guide, zero failures in either theme.
Three families, each with one job. Body copy is system sans; the serif appears only in lead paragraphs and book titles; monospace carries every label, number, and code value.
| Token | Stack | Used for |
|---|---|---|
| --sans | -apple-system, BlinkMacSystemFont, Segoe UI, Inter, Helvetica, Arial | Body, headings, UI |
| --serif | Iowan Old Style, Palatino Linotype, Georgia | Lead paragraphs, book titles |
| --mono | ui-monospace, SF Mono, Menlo, Consolas | Labels, captions, all numbers |
System stacks only — no webfonts, so pages render instantly offline and print without network access.
Base unit 2px. Container 1180px with 26px gutters.
| Property | Value | Applied to |
|---|---|---|
| radius sm | 4px | Inline code, small chips |
| radius lg | 12px | Every card, box, table wrapper, figure |
| radius full | 999px | Pills — 110 instances |
| elevation | none | Flat by design: 1px borders carry all separation |
| transition | 0.14s | The only duration in the system |
| hover lift | translateY(-2px) | Chapter cards only |
| breakpoint | 720px | Single breakpoint, max-width |
| z-index | 50 | One layer — the sticky top bar |
Six content containers. Each has one meaning; using the wrong one is a content error, not a style choice.
High yield — .hy
Red border, red-tinted fill. Opens every chapter with the ranked list of what is actually tested. Never used for ordinary emphasis.
Memory hook — .mem
Amber. A mnemonic, an anchor, or the reason a number is not round — like mirrors at 20 inches because a plate is 18 inches across.
Exam trap — .pit
Purple. The distractor the exam actually uses, and why it is wrong. Always names the wrong answer explicitly.
Definition — .def · Blue left rule. A term stated the way the exam states it.
Neutral box — .box
Supporting lists and protocol steps that carry no special weight.
.num. A value that must be recalled exactly, in monospace at 22px.All 54 diagrams are inline SVG using the palette tokens — never hardcoded hex — so they retheme automatically and print as vectors. Text inside figures uses the same monospace and sans stacks as the page.
Figure rules
var(--red), var(--amber), var(--purple), var(--muted), currentColor. A hardcoded hex breaks dark mode.width and an inline min-width set to 80% of that width. It shrinks to fit down to that floor, then the figure — not the page — scrolls horizontally. Measured on the blueprint chart: 11px labels at 1440px and 1180px, 10.3px at 900px, and 8.8px from 768px down to 375px, with no sideways page scroll at any width. Without the floor, that chart rendered its labels at 5.1px on a narrow viewport.Extraction scored the system 89/100 before the fix, with accessibility the only category below 85. Every text token now clears WCAG AA in both themes at the smallest size it is actually rendered at — verified by build/contrast.js, which fails the build if any pair regresses. Dark mode needed correcting too: #e63a00 measured 3.74:1 on the raised surface and is now #ff4607.