Parsimony Design System

River Romney's cross-site design system. A single source of truth for color, typography, and spacing across all properties.

What this repo is

This repo stores all design tokens for riverromney.com, riverromney.design, riverromney.art, and riverromney.blog in DTCG 2025.10 format. It uses Style Dictionary v4 to compile tokens into CSS custom properties.

Repo structure

Parsimony/
  tokens/
    primitives/       Raw values (colors, type scales, spacing)
    semantic/         Purpose-mapped aliases (background, foreground, border, etc.)
    brands/           Per-site overrides (dot-art, dot-blog)
  ai/
    DESIGN.md         AI-readable design system reference
    rules.md          Hard and soft design rules
  build/
    css/              Generated CSS (not committed)
  style-dictionary.config.mjs
  package.json

Build

npm install
npm run build

This generates build/css/variables.css with all CSS custom properties.

Consuming tokens

Option 1 — Copy the CSS file into your site's static assets and import it:

<link rel="stylesheet" href="/variables.css">

Option 2 — Use custom properties directly once the file is imported:

body {
  background-color: var(--color-background-default);
  color: var(--color-foreground-default);
  font-family: var(--font-family-serif);
}

Per-site overrides

Brand overrides live in tokens/brands/. To build a site-specific token set, add the relevant brand file as a source after the base tokens. The override replaces only the tokens it defines; everything else inherits from primitives and semantic layers.

AI reference

See ai/DESIGN.md for the full design system reference and ai/rules.md for hard and soft design rules.