Inter
UI / body. sans, 400 / 500 / 600 / 700
COLOPHON · THE DESIGN SYSTEMTYPE · COLOR · SPACING · MOTION · A11Y
Colophon.
Every design decision on this site, in one page. Tokens are the source of truth.
Type, color, spacing, motion, and accessibility. every design decision on this site, in one page. The full source is insrc/styles/tokens.css.
SRC/STYLES/TOKENS.CSS3 FACES · 4 ROLES6 SWATCHES5 EFFECTS
(a) · Type
3 faces, four roles.
Inter for UI and body. JetBrains Mono for data and code. KaTeX_Main for math serifs. The 4-step scale below is the institutional rhythm; full scale runs --fs-xs to --fs-5xl.
JetBrains Mono
Data / code. mono, 400 / 500
KaTeX_Main
Math serifs (rendered by KaTeX)
4-step scale
- --fs-sm · 14pxThe quick brown fox jumpssmall / meta / captions
- --fs-base · 16pxThe quick brown fox jumpsbody text
- --fs-xl · 22pxThe quick brown fox jumpsh3 / sub-head
- --fs-3xl · 36pxThe quick brown fox jumpssection title
(b) · Color palette
6 colors, four roles.
The hedge-fund palette: near-black + deep amber on a term-paper cream. The full token set is in tokens.css (primary, amber, paper, bg, ink, rule, status, math accents).
--j-bg
#1a1714
warm-dark · page background (v6.17)
--j-ink
#ebe5d4
paper-cream · primary text (v6.17)
--j-warn
#a88a3e
warm amber · primary accent (v6.17)
--j-cobalt
#5b6ba8
cobalt · secondary accent (v6.17, sparse)
--j-ink-3
#8a857a
muted ink · meta + data-neutral signal (F14)
--j-paper
#ebe5d4
paper-cream · light-variant bg (v6.17)
(c) · Spacing scale
6 cells, 8px base.
A geometric scale (multiples of 4, doubling past --sp-4). The full scale runs to --sp-10 (8rem) for hero padding.
--sp-2
8px
--sp-3
12px
--sp-4
16px
--sp-5
24px
--sp-6
32px
--sp-7
48px
(d) · Motion vocabulary
5 effects, institutional restraint.
Motion is minimal and functional. All effects respectprefers-reduced-motion: reduce. Total motion JS budget is < 4KB minified.
| Effect | Trigger | Duration | Easing |
|---|---|---|---|
| odometer | data-counter scrolls into view | 0.6s | cubic-bezier(0.16, 1, 0.3, 1) |
| active-nav | section becomes the in-viewport section | 150ms | ease (color + underline slide) |
| hover-zoom | hover on card / button / image | 150ms | cubic-bezier(0.4, 0, 0.2, 1) |
| shine | verified badge / status pill idle | 1.5s | linear (one-shot on appearance) |
| trust-pulse | pass / fail status dot | 2.4s | ease-in-out (infinite, opacity-only) |
(e) · Accessibility
WCAG AA contrast, skip-nav, focus-visible.
All foreground/background pairs in the body of the site meet WCAG AA at body sizes; the --c-amber-light hover variant is reserved for ≥18px / non-text use on cream surfaces (it drops to 1.7:1 there).
Contrast pairs
| Foreground | Background | Ratio | Level |
|---|---|---|---|
| --c-ink | --c-bg | 17.1:1 | AAA |
| --c-ink-2 | --c-bg | 6.4:1 | AA |
| --c-amber | --c-bg | 5.0:1 | AA |
| --c-amber | --c-bg | 6.4:1 | AA |
| --c-primary | --c-bg | 19.2:1 | AAA |
Keyboard primitives
- Skip-nav: the first focusable element on every page is a
.skip-linkthat jumps past the nav to#main. Visible only on focus. - Focus-visible ring: a 2px outline in
--c-amber(5.0:1) on every interactive element, gated by:focus-visibleso mouse users see no ring. - Reduced motion: a single media query (
prefers-reduced-motion: reduce) zeros all transitions and animations across the site. - Semantic HTML: the page is heading-hierarchy-correct (single
<h1>, orderedh2/h3); every interactive element is a real<a>,<button>, or<label>.
Design system source on disk.
src/styles/tokens.css is the canonical source. PRs that change a token are expected to update the colophon on the same commit.