Reference
Design system
The tokens, type, and components that build this site — and the WCAG 2.2 AA rules every one of them must pass. This page is part of the proof: it is itself keyboard-operable and verified axe-clean in both the dark and light themes.
Color tokens
Semantic tokens, not raw hex. Each name maps to a different value per theme, so components stay correct in dark and light without conditional styling. Swatches below render the live value.
--bgPage background--surfaceRaised cards, nav--surface-2Hover, inset wells--textPrimary text--text-mutedSecondary text--border-softHairline borders--accentPrimary action--accent-strongHover, pressed--linkLinks, accents--peachBrand accent--focusFocus ring
Contrast
The pairings that carry text or meaning, measured in both themes. Text clears 4.5:1 (most clear AAA); the focus ring is a non-text indicator and clears 3:1.
| Pairing | Foreground on background | Ratio | Level |
|---|---|---|---|
| Body text | #F5F3EEon#0E0E0E | 17.4 : 1 | AAA |
| Muted text | #A7A39Bon#14161A | 7.2 : 1 | AAA |
| Link / accent | #AFC6FFon#0E0E0E | 11.4 : 1 | AAA |
| Button label | #FFFFFFon#2D6BFF | 4.5 : 1 | AA |
| Focus ring | #7FA8FFon#0E0E0E | 8.3 : 1 | ≥3:1 ✓ |
| Pairing | Foreground on background | Ratio | Level |
|---|---|---|---|
| Body text | #1A1A1Aon#FAF6EF | 16.1 : 1 | AAA |
| Muted text | #57534Aon#FAF6EF | 7.0 : 1 | AAA |
| Link / accent | #1E4FD0on#FAF6EF | 5.6 : 1 | AA |
| Button label | #FFFFFFon#1E4FD0 | 6.8 : 1 | AA |
| Focus ring | #1E4FD0on#FAF6EF | 6.4 : 1 | ≥3:1 ✓ |
Typography
Clash Display for headlines, Inter for body, JetBrains Mono for accents. Sizes are fluid clamps so they scale without breakpoints; body never drops below 16px.
Beautiful & accessible
DisplayClash Display 600 · clamp(2.5rem, 6vw, 6rem) · 1.05
Heading level one
H1Clash Display 600 · clamp(2rem, 4vw, 3.5rem) · 1.1
Heading level two
H2Clash Display 600 · clamp(1.5rem, 3vw, 2.25rem) · 1.15
Body copy is set in Inter at sixteen pixels with a 1.6 line height for comfortable reading.
BodyInter 400 · 1rem (16px) · 1.6
mono · eyebrows · code · 09:41
MonoJetBrains Mono · 0.8125–0.875rem · UI accents
Spacing
An 8-point rhythm (with 4px half-steps). Consistent spacing is a readability and predictability aid, not only an aesthetic one.
s-14pxs-28pxs-312pxs-416pxs-624pxs-832pxs-1248pxs-1664pxs-2496px
Radius & elevation
Two radii (a 16px card, a fully-round pill) and two shadows (a quiet card lift, an ambient brand glow) keep surfaces consistent.
Motion
One easing curve and three durations. Motion is always an enhancement — it is gated in JS (useReducedMotion) and zeroed by a global prefers-reduced-motion backstop in CSS.
| Token | Value | Used for |
|---|---|---|
--ease-out | cubic-bezier(.22, 1, .36, 1) | All enters & state changes |
--dur-fast | 0.2s | Hover, focus, taps |
--dur-base | 0.5s | Reveals, the folder open |
--dur-slow | 0.9s | Scroll-scrubbed beats |
Components
Shared primitives. Each is keyboard-operable, carries a visible focus ring, and states its meaning in text — not color alone.
Chips
- WCAG 2.2
- ARIA
- axe-core
- Neo4j
Form field (with error state)
We will only use this to reply.
Error: enter a full email, like [email protected].
Accessibility rules
The non-negotiables every token and component above is built to satisfy. These are checked by axe-core in CI on every route, in both themes, and backed by manual keyboard and screen-reader passes.
Semantic HTML before ARIA
A real <button>, <nav>, <table>, and <label> ship first; ARIA only fills the gaps semantics cannot.
WCAG 4.1.2
One h1, ordered headings, landmarks
Every page has a single h1, never skips a level, and lives inside header / nav / main / footer landmarks.
WCAG 1.3.1 · 2.4.6
Skip link is first in the tab order
The very first Tab reveals “Skip to content”, jumping past the nav straight to <main>.
WCAG 2.4.1
Visible focus, never removed
A 3px --focus ring (≥3:1 in both themes) marks the focused element; outline is never dropped without a replacement.
WCAG 2.4.7 · 2.4.11
Contrast holds in both themes
Text clears 4.5:1, UI and focus indicators clear 3:1 — measured for dark and light (see the tables above).
WCAG 1.4.3 · 1.4.11
Color is never the only signal
State and meaning always carry a text label, icon, or shape alongside any color cue.
WCAG 1.4.1
Reduced motion is first-class
prefers-reduced-motion disables parallax, scroll-jacking, and autoplay; the static layout is equally finished.
WCAG 2.3.3
Targets and media behave
Interactive targets are at least 44px, and media never autoplays with sound.
WCAG 2.5.8 · 1.4.2