§ Codex — the learning wiki
The design system — graph-paper field manual
Codex looks like an engineer's graph-paper field manual: a cool off-white page with a faint grid, technical monospace structure, and a single ink-blue accent. Per the VPS design rule, every site must look like it came from a different studio — this is Codex's identity, documented in its own design.md.
Palette
| Role | Hex | Use |
|---|---|---|
| Paper | #F6F7FB |
page background (with a 24px grid) |
| Ink | #1B2233 |
body text, code blocks |
| Ultramarine | #3B47D6 |
the one accent — links, rules, section crests |
| Hairline | #DFE3EC |
borders, dividers |
Sections can override the accent (teal/amber/rose/violet/green) via a data-accent attribute that swaps the --acc CSS variable — so each project's pages carry their own colour while the structure stays identical.
Type
- IBM Plex Sans for prose — humanist, technical, very legible at body sizes.
- JetBrains Mono for structure — headings, breadcrumbs, the brand, the outline, code. Using mono for the chrome (not just code) is the signature move that sells the "field manual" feel.
Layout
Three columns on desktop: a sticky sidebar tree (the whole wiki, current section expanded), a reading column capped at ~74ch for line length, and a sticky on-this-page outline on the right. On mobile the sidebar becomes a slide-in drawer and the outline drops away.
Signature moves
- The faint graph-paper grid behind everything.
- Monospace headings + breadcrumbs — structure reads as "technical document".
- Numbered section TOCs (
01 02 03) like a manual's contents page. - Hover-copy buttons on every code block.
Anti-patterns (kept out on purpose)
- No dark mode / neon — that's the monitor and terminal sites' territory.
- No playful gradients or rounded "app" cards — this is a reference document, not a product landing page.
- No decorative motion; transitions are short and respect
prefers-reduced-motion.