Colors — reference.dunn.dev

Semantic tokens

Use these in your sites

These respond to the active theme. Toggle light/dark in the header to compare. The side-by-side block below shows both modes simultaneously.

light

--bg page background

--surface cards, raised blocks

--nav-bg nav, secondary surface

--border borders, dividers

--text primary text

--text-2 secondary text

--text-muted meta, eyebrows

--accent links, focus, brand

--accent-hover accent on hover

--accent-contrast text on accent fill

--accent-subtle tinted backgrounds

--accent-link link underlines

--callout-warning warning callouts

--callout-tip tip callouts

--callout-todo todo callouts

dark

--bg page background

--surface cards, raised blocks

--nav-bg nav, secondary surface

--border borders, dividers

--text primary text

--text-2 secondary text

--text-muted meta, eyebrows

--accent links, focus, brand

--accent-hover accent on hover

--accent-contrast text on accent fill

--accent-subtle tinted backgrounds

--accent-link link underlines

--callout-warning warning callouts

--callout-tip tip callouts

--callout-todo todo callouts

Palette

Raw palette values, semantic tokens map onto these

Foundation-layer tokens. Sites that visualize the estate map (the knowledge graph on dunn.dev) read these via getComputedStyle instead of hardcoding hex. Adding a new node group: add the token here first.

Moss (accent, hue ~145)

--dd-moss-100

--dd-moss-200

--dd-moss-300

--dd-moss-400

--dd-moss-500

Earth (warm neutrals)

--dd-earth-50

--dd-earth-100

--dd-earth-200

--dd-earth-300

--dd-earth-400

--dd-earth-500

--dd-earth-600

Group (knowledge graph node types)

--dd-group-people

--dd-group-infra

--dd-group-tools

--dd-group-services

Callout accents

--dd-callout-warning

--dd-callout-tip

--dd-callout-todo

Hex

Hex, for artwork that cannot see a token

Inline SVG hardcodes the hex. Some SVG sanitisers strip style and var() references, so a diagram or brand glyph that resolves tokens at render time comes out unpainted in the surfaces that matter most: a README on a mirror, a social card, an avatar. Site CSS uses the bare token; the artwork carries the value. These are the light-mode values, read from tokens/colors.css at build.

Token	Hex	Use in artwork
`--surface`	`#f4f4f4`	outer canvas, context boxes
`--bg`	`#ffffff`	inner content, accent boxes
`--border`	`#e0e0e0`	dividers and box outlines
`--text-muted`	`#707070`	small-caps mono labels, secondary captions
`--text-2`	`#404040`	body text
`--text`	`#0a0a0a`	headings, glyph strokes, output lines
`--accent`	`#4a6741`	primary boxes, arrows, tile words, titles