Reference
Design
One design language across every site in the estate. Colors,
typography, the network rune, and the one-import foundation that
pulls them together. Sites consume these from
@dunn.dev/reference and inherit a consistent surface;
the rare site that needs personality overrides one or two
variables locally rather than re-derive the whole language.
The pieces
Colors
Palette scales (moss, earth, group, callout) and semantic tokens. Light + dark with a dual-pane comparison.
Typography
IBM Plex Sans + Mono. Fluid type scale, line heights, prose samples.
Mark
Othala-derived network rune. Progressive detail at size; light + dark variants.
Diagrams
Editorial discipline for inline SVGs: deletion as the default, single-accent focal use, four-unit grid, named diagram types.
Repository
Avatar + hero design language for every repo. Templates rendered inline with the locked rules.
Foundation
One import gives you everything. Sites override accent or display font locally.
Journal
JournalRail.astro: persistent left-rail navigation. Component + worked usage.
Talks
talk.css + talk.js: the plate-book chrome. Pinned stage, ink classes, one rest schedule per chapter.
Lessons
lesson.css and lesson.js: shells, rail, unit heads, side column and theme toggle.
Chromes
The four chromes: project site, talk, lesson and auth. What each is for, how to consume it, and who does.
Quick start
@import '@dunn.dev/reference/tokens/index.css'; @import '@dunn.dev/reference/site.css';
Two imports give you the full token set (colors, typography,
spacing, motion) plus the chrome (header, page wrapper,
sections, hero, footer, code block, focus ring). Use bare
semantic names: var(--bg), var(--accent),
var(--text-xl). Per-site personality lives in a
thin local stylesheet layered on top.