$ cat ./brand-tokens.md

The system behind the system.

Every color, type style, spacing value, motion, and radius on this site comes from brand-tokens — a design system I maintain to keep every River Romney property consistent. Primitives feed the semantic layer. UI code never touches hex.

The architecture takes a cue from Unix’s small, sharp tools philosophy. Primitives hold values, semantics name roles, and components render decisions — each layer does one thing well, and the next composes from it.

 v0.3 · Production44 semantic tokens across 6 tiers

Color every hex earns its way in

Background
--color-background-default
Page canvas. Every full-bleed surface.
#0A0D0A
--color-background-alt
Elevated surfaces — cards, panels, inputs.
#1E241E
--color-background-action
Interactive fills — primary buttons, selected states.
#4ADE6E
Foreground
--color-foreground-default
Primary text and icons. AAA contrast (12.3:1).
#C8CFC4
--color-foreground-alt
Secondary text — subtitles, metadata. AA (8.0:1).
#A0A89A
--color-foreground-muted
Tertiary content — placeholders, fine print. AA (6.3:1).
#8B9683
--color-foreground-action
Interactive text — links, active nav. AAA (11.3:1).
#4ADE6E
Border
--color-border-default
All UI edges. Borders recede — they don't frame.
#1E241E

Typography three voices, one system

--font-display
40px / 1.1 · Space Grotesk 300
Display
--font-title-large
32px / 1.25 · Space Grotesk 300
Title Large
--font-title-medium
24px / 1.25 · Space Grotesk 300
Title Medium
--font-title-small
20px / 1.25 · Space Grotesk 300
Title Small
--font-body-large
16px / 1.6 · Spectral 400
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
--font-body-medium
14px / 1.6 · Spectral 400
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
--font-body-small
12px / 1.6 · Spectral 400
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
--font-label-large
16px / 1.25 · JetBrains Mono 400
Label Large
--font-label-medium
14px / 1.25 · JetBrains Mono 400
Label Medium
--font-label-small
12px / 1.25 · JetBrains Mono 400
Label Small
--font-code
14px / 1.6 · JetBrains Mono 400
Code

Spacing 8-point base, six semantic tiers

--spacing-tight
Icon + label, checkbox + text
8px
--spacing-inline
Nav row, tag groups
12px
--spacing-element
Internal padding, default unit
16px
--spacing-component
Between sibling components
24px
--spacing-layout
Between major layout regions
48px
--spacing-section
Between top-level page sections
128px

Motion

--motion-duration-instant120ms
Hover, focus ring, micro-interactions
--motion-duration-standard200ms
Dropdowns, tooltips, accordions
--motion-duration-emphasized350ms
Modals, drawers, page-level transitions

Radius

--radius-none
Code blocks, tables, structural
0
--radius-sm
Inputs, small tags, inline chips
4px
--radius-default
Buttons, dropdowns, most interactive
8px
--radius-lg
Cards, panels, content regions
12px
--radius-xl
Modals, hero cards, featured surfaces
16px
--radius-full
Pills, avatars, toggle switches
9999px

The full token source lives in the brand-tokens repo — Style Dictionary pipeline, per-brand overrides, and a clear primitive → semantic contract. This portfolio is the system eating its own dog food.

Back to the index or selected work.