Foundation — design.dunn.dev

One import

In your site's global stylesheet (or a layout-level <style>):

@import '@dunn.dev/design/tokens/index.css';

Or import via Astro/Vite from a relative path during early development:

import '../../design/tokens/index.css';

What you get

Color tokens: three palette scales (moss, earth, group) plus semantic tokens (--bg, --text, --accent, …). Light + dark via data-theme or prefers-color-scheme.
Type tokens: --font-body, --font-mono, --font-ui, --font-display. IBM Plex Sans + Mono.
Type scale: --text-xs through --text-4xl. Fluid above the body size, fixed below.
Line heights + radii: --lh-base, --lh-tight, --lh-hero; --radius-sm, --radius, --radius-md.
Spacing scale (4px base): --space-0 through --space-8. Use for component-internal gaps, paddings, margins. Layout-level dimensions (containers, grids, breakpoints) stay in your site.
Motion tokens: --duration-instant, --duration-fast, --duration-base, --duration-slow; --ease-out, --ease-in-out. Honors prefers-reduced-motion by zeroing all durations.

Per-site overrides

The estate accepts personality at the token layer, not the architecture layer. Override a token in your site's own stylesheet, after the foundation import:

@import '@dunn.dev/design/tokens/index.css';

/* ashley.dunn.dev — steel accent */
:root {
  --accent:       #4a6072;
  --accent-hover: #364858;
}

Common personality dimensions: --accent, --font-display (sites that want a serif headline like Fraunces), and any of the callout colors. Layout dimensions (containers, spacing, grids) live in each site's own CSS, not in the foundation.

Conventions

Tokens that move together

Some tokens are derivatives of others. If you override one in the cluster without re-deriving the rest, the site drifts visually: links read wrong, hover states stop tracking accent shifts, contrast breaks. Override the whole cluster, or use color-mix to derive from the root.

Accent cluster

--accent --accent-hover --accent-contrast --accent-subtle --accent-link

Override --accent and you must also override (or re-derive) --accent-hover and --accent-contrast. The -subtle and -link variants can be derived via color-mix(in srgb, var(--accent) 8%, transparent) and 40% respectively.

Text cluster

--text --text-2 --text-muted

A three-step tonal ramp. Move them together if you change palette (e.g., warmer or cooler neutrals). Don't pin one without the others.

Surface cluster

--bg --surface --nav-bg --border

Page chrome. Surface should sit one step warmer/darker than bg in light, lighter in dark. Border should read as a hairline, not a wall.

Callout cluster

--callout-warning --callout-tip --callout-todo

Three tones. Override as a set so warning/tip/todo stay distinguishable and the trio reads as a family.

Light + dark: the foundation ships dark variants for every semantic token. If you override a cluster in light mode, override the same cluster inside :root[data-theme="dark"] too — otherwise the dark side keeps the foundation defaults and your accent flips back to moss when a visitor toggles theme.

Current consumers

Site	State	Accent
`andrew.dunn.dev`	consuming @dunn.dev/design	moss `#4a6741` (default)
`ashley.dunn.dev`	consuming @dunn.dev/design, light-only, paper-steel overrides	steel `#4a6072`
`dunn.dev`	consuming @dunn.dev/design	moss (default)
`works.dunn.dev`	green-field — will consume foundation directly	brass (planned)