9 sections

design.sys

the system behind this site — real tokens, live parts. mono-first, black-first, phosphor accent.

status: stable
version: v1.0.0
stack: next.js + payload + tailwind
fonts: departure mono (ofl)

typography

One family: Departure Mono, a dot-matrix face shipped at a single 400 weight — heavier weights are browser-synthesised. Hierarchy comes from size, case and colour, never from more typefaces. System UI is lowercase; professional content keeps normal case.

token	value	specimen
--fs-2xs	11pxdense tables, graph labels	the quick brown fox
--fs-xs	12px · +0.08emmetadata, gutters, chips	the quick brown fox
--fs-sm	13pxsecondary body, table cells	the quick brown fox
--fs-base	15px / 1.7body	the quick brown fox
--fs-md	17pxrow titles, sub-heads	the quick brown fox
--fs-lg	22pxsection titles	the quick brown fox
--fs-xl	clamp(26px, 3.2vw, 36px)page titles	the quick brown fox
--fs-hero	clamp(38px, 6.5vw, 72px)hero statement	the quick brown fox

color

Near-monochrome, black-first. Green is a status colour, not a brand colour: it appears in status dots, contribution cells, focus rings, active nav, prompt glyphs and selection — never in headings, never as decoration.

dark (default)

--bg#050505page ground
--surface#0a0a09panels, drawer level 1
--surface-raised#111110raised rows, palette
--border#1c1c1ahairlines, rules
--border-strong#2c2c28emphasised rules
--text#e8e6e0primary text (warm off-white)
--muted#96948bsecondary text, metadata
--faint#5d5c54decorative, ≥17px only
--accent#3fd158 · oklch(0.76 0.20 146)phosphor — status/interaction only
--accent-dim#1d7a34accent borders/underlines
--danger#f0665aerrors
--warn#d9a53fwarnings

light (intentional, not inverted)

--bg#f3f1ea
--surface#ebe8df
--surface-raised#f9f8f3
--border#d9d6c9
--border-strong#b5b2a3
--text#1a1a14
--muted#5d5c50
--faint#8f8d7f
--accent#157f36
--accent-dim#8fce9f
--danger#b3311f
--warn#8a6414

contribution ramp · --ph-0 … --ph-4

dark: #131512 #0d2f1b #14582c #22a041 #3fd158

light: #e4e2d6 #bfe3c4 #7cc98b #2ea152 #157f36

spacing + shape

base unit4px · scale 4/8/12/16/24/32/48/64/96
--space-sectionclamp(4.5rem, 9vh, 7rem)
--container-max84rem (1344px)
--gutter-w200px section gutter column
--header-h3.25rem system rail
borders1px var(--border), no shadows, no glass
radius0px everywhere · 2px on chips/kbd only
z-scalesticky 10 · header 40 · drawer 50 · palette 60 · toast 70

panel --ticked

The workstation card: 1px frame on --surface with 7px corner ticks drawn by pseudo-elements. Depth comes from surface contrast, never shadows.

live specimen — the frame around this text is the component.

motion

Deterministic and small: opacity and short translates, one pass, no scroll-jacking, no smooth-scroll library. Under prefers-reduced-motion everything collapses to its final state; the hero caret blinks six times and stops.

--t-fast140mshover, focus
--t-med260msreveals, palette
--t-reveal400mssection entry (once)
--t-drawer380msdrawer enter (~320ms exit)
--ease-outcubic-bezier(0.22, 1, 0.36, 1)default ease
--ease-inoutcubic-bezier(0.65, 0, 0.35, 1)pulses, crossfades
--ease-systemcubic-bezier(0.32, 0.72, 0, 1)drawer, palette

buttons + links

specimens — inert on this page.

Inline links carry a quiet underline that commits to phosphor on hover: an inline link. External links always carry an arrow that shifts 3px: external (opens in a new tab).

inputs

label — always visible, never placeholder-only

error state — aria-invalid paints the border --danger

[error] enter a valid email

focus ring: 2px var(--accent) outline, 2px offset, both themes. errors also land in a role="alert" summary on real forms.

tables + lists

first row01
second row02
third row03

.tbl — 1px row rules, .row-hover paints --surface.

bullet-list — 5px phosphor squares, not discs
generous 14px row padding on registry tables
column headers: 11px uppercase --muted

chipchip --on#tag⌘K

terminal parts

$the command line — section grammar

output line with a phosphor glyph

success states say so only when true

status dot — the one glow in the system: 7px square, 60% pulse, still under reduced motion.

frame.ts

// .code-frame — filename bar + body
const system = 'dev' as const

voice + tone

system UI, commands and metadata are lowercase; project titles, organisations and professional prose keep normal case.
green is a status colour. if a heading is green, it is a bug.
real data or no data — live numbers are cached and degrade honestly; nothing is fabricated, ever.
precise, quietly confident, slightly dry. no "passionate developer", no rockstars, no ninjas.

design.sys is the site — there is no second implementation.