Colors — design.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 scales

Raw palette values, semantic tokens map onto these

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

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.

Callout accents

--dd-callout-warning

--dd-callout-tip

--dd-callout-todo