Skip to main content

Design language

Every value on this page is read at build time: the swatches, chips and families from website/src/css/custom.css, the badge set from the design record itself. Nothing here is typed by hand, and changing a token changes this page.

Surfaces

Two ramps, both declared unconditionally so either is reachable in either colour mode. Ink is the dark-first ground Cairn is drawn for; paper is the light ramp. Every surface that renders a category accent as text pins the ink ramp rather than following the colour mode, because an accent is a dark-ground text colour.

ink ramp

  • --cairn-ink-deep#08090b
  • --cairn-ink-0#0a0b0d
  • --cairn-ink-100#131418
  • --cairn-ink-200#191b21
  • --cairn-ink-300#262a31
  • --cairn-ink-400#43484f
  • --cairn-ink-500#61666d
  • --cairn-ink-600#7e838a
  • --cairn-ink-700#9ba1a8
  • --cairn-ink-800#c1c5c9
  • --cairn-ink-900#e7e8ea
  • --cairn-ink-1000#f4f5f6
  • --cairn-ink-accent#b5abf9

paper ramp

  • --cairn-paper-0#ffffff
  • --cairn-paper-100#f6f6f8
  • --cairn-paper-200#eeeef2
  • --cairn-paper-300#e3e3e8
  • --cairn-paper-400#c1c3c9
  • --cairn-paper-500#a0a3aa
  • --cairn-paper-600#7e828b
  • --cairn-paper-700#5c626c
  • --cairn-paper-800#393d45
  • --cairn-paper-900#16181d
  • --cairn-paper-1000#0a0b0d

Category accents

One accent per span category ADR-0009 recommends — 24 of them — plus the neutral default. They are constant across colour modes because they encode a category, not a surface, and they are fixed by ADR-0009: this site consumes them and never redefines them.

  • reason--cat-reason#8b7cf6
  • exec--cat-exec#46c878
  • read--cat-read#4f9cf9
  • net--cat-net#e6b450
  • write--cat-write#f0568f
  • search--cat-search#5ed4e0
  • plan--cat-plan#c08bff
  • tool--cat-tool#56d9a0
  • analyze--cat-analyze#e0a060
  • test--cat-test#6cc8e8
  • fix--cat-fix#f08550
  • fail--cat-fail#f0506a
  • meta--cat-meta#808c9a
  • research--cat-research#5ed4e0
  • implementation--cat-implementation#f0568f
  • review--cat-review#e0a060
  • testing--cat-testing#6cc8e8
  • debug--cat-debug#f08550
  • build--cat-build#46c878
  • docs--cat-docs#c8b18a
  • delivery--cat-delivery#e6b450
  • deploy--cat-deploy#e6b450
  • wait--cat-wait#808c9a
  • prompt--cat-prompt#8b7cf6
  • other--cat-other#aab2bd

A category outside the recommended set is not a new colour. Any category name ADR-0009 does not define — anything the record has not decided on — renders in the neutral default, --cat-other (#aab2bd). Site source may emit a category class for any string; an unrecognised one resolves to that token rather than carrying a value of its own.

Type badges

A type badge is machine content: a JetBrains Mono pill on the pinned machine surface, outlined and lit with a dot. It carries its own label, so it is still readable with colour removed. These 8 codes are the ones the design record declares — each is linked to the records that declare it.

  • MD
  • PY
  • IMG
  • FILE
  • GZ
  • HK
  • TRJ
  • TRC

A badge code is not a category. The record fixes the codes; it does not assign a share type an ADR-0009 span category, so nothing on this site tints a badge from the category palette. They render in the neutral default, --cat-other until the record decides otherwise.

Type

If a human wrote it, it is IBM Plex Sans. If a machine emitted it — an id, a path, a span name, a TTL, an HTTP method, a command, code — it is JetBrains Mono. Never mono for a sentence. Both families are declared once, with system fallbacks, so a page stays legible when a font resource fails to load.

  • Everything above was decided in public.

    --cairn-font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif

  • cairn.stump.wtf/aB3xQ7 · TRC · 11 spans · 34.2s · ttl 7d

    --cairn-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace