$ cat ./parsimony.md

The system behind the system.

Every color, type style, spacing value, motion, and radius on this site comes from Parsimony, 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.7.1 · Production120 semantic tokens, generated from source

Color every hex earns its way in

Background
--color-background-default
Base canvas #0A0D0A.
#0A0D0A
--color-background-alt
Elevated surface #1E241E.
#1E241E
--color-background-action
Interactive fill #4ADE6E.
#4ADE6E
--color-background-action-hover
Hover fill for primary action elements.
#3EBA5C
--color-background-action-active
Active/pressed fill for primary action elements.
#349B4D
--color-background-disabled
Fill for disabled interactive elements (inputs, buttons, selects).
#1E241E
Foreground
--color-foreground-default
Primary text and icons #C8CFC4.
#C8CFC4
--color-foreground-alt
Secondary text and icons #A0A89A.
#A0A89A
--color-foreground-muted
Muted text — secondary labels, captions, timestamps, metadata.
#8B9683
--color-foreground-disabled
Text and icons on disabled elements.
#1E241E
--color-foreground-action
Interactive text and icons #4ADE6E.
#4ADE6E
Foreground on fills
--color-foreground-on-action
Text/icons on background.action #0A0D0A.
#0A0D0A
Border
--color-border-default
Standard legible border #5C685A.
#5C685A
--color-border-alt
The quiet boundary OF a surface #1E241E — card, menu, panel, and dialog frames; decorative outlines; container edges (the previous border.default value).
#1E241E
--color-border-elevated
Structural chrome borders — headers, card frames, section dividers, prominent UI edges.
#2E3A2E
--color-border-hover
Border on interactive elements in hover state.
#8B9683
--color-border-active
Border on interactive elements in active/pressed state.
#A0A89A
--color-border-action
Border for interactive outlined controls — the secondary (ghost) button.
#4ADE6E
--color-border-focus
Focus ring color.
#4ADE6E
--color-border-disabled
Border on disabled elements.
#0A0D0A
--color-border-muted
Separator lines WITHIN a surface #0F2016 — table row separators, menu/list dividers, section rules inside a panel.
#0F2016
Feedback
Success
--color-background-success
Strong success fill — success badges, status pills, success CTA fills.
#4ADE6E
--color-background-success-alt
Subtle success tint — success alert/banner backgrounds.
#0F2016
--color-foreground-success
Success text and icons.
#4ADE6E
--color-foreground-on-success
Text/icons on success fill backgrounds.
#0A0D0A
Warning
--color-background-warning
Strong warning fill — warning badges, status pills.
#FCD34D
--color-background-warning-alt
Subtle warning tint — warning alert/banner backgrounds.
#221B08
--color-foreground-warning
Warning text and icons.
#FCD34D
--color-foreground-on-warning
Text/icons on warning fill backgrounds.
#0A0D0A
Danger
--color-background-danger
Danger fill #C8002E.
#C8002E
--color-background-danger-alt
Subtle danger tint #2A0A0A — dark red for error alert/badge backgrounds, matching the other feedback -alt tints.
#2A0A0A
--color-foreground-danger
Error/destructive text and icons #F87171.
#F87171
--color-foreground-on-danger
Text/icons on background.danger #FFFFFF.
#FFFFFF
Info
--color-background-info
Strong info fill — info badges, status pills.
#2456E4
--color-background-info-alt
Subtle info tint — info alert/banner backgrounds.
#0D1830
--color-foreground-info
Info text and icons.
#93C5FD
--color-foreground-on-info
Text/icons on info fill backgrounds.
#FFFFFF
Accents
Background
--color-background-accent-green
Dark green tint #0F2016.
#0F2016
--color-background-accent-blue
Dark blue tint #0D1830.
#0D1830
--color-background-accent-violet
Dark violet tint #18102E.
#18102E
--color-background-accent-amber
Dark amber tint #221B08.
#221B08
--color-background-accent-indigo-bold
Saturated indigo fill for bold accent surfaces — avatar backgrounds, identity badges.
#4338CA
--color-background-accent-sky-bold
Saturated sky blue fill for bold accent surfaces — avatar backgrounds, identity badges.
#0369A1
--color-background-accent-green-bold
Saturated emerald fill for bold accent surfaces — avatar backgrounds, identity badges.
#047857
--color-background-accent-amber-bold
Saturated amber fill for bold accent surfaces — avatar backgrounds, identity badges.
#B45309
Foreground
--color-foreground-accent-green
Phosphor green accent #4ADE6E.
#4ADE6E
--color-foreground-accent-blue
Light blue accent #93C5FD.
#93C5FD
--color-foreground-accent-violet
Light violet accent #C4B5FD.
#C4B5FD
--color-foreground-accent-amber
Warm amber accent #FCD34D.
#FCD34D
Foreground on accent
--color-foreground-accent-on-green
Text/icons on green accent tint fills.
#0A0D0A
--color-foreground-accent-on-blue
Text/icons on blue accent fills.
#0A0D0A
--color-foreground-accent-on-violet
Text/icons on violet accent fills.
#0A0D0A
--color-foreground-accent-on-amber
Text/icons on amber accent fills.
#0A0D0A
--color-foreground-accent-on-indigo
Text/icons on indigo accent fills.
#FFFFFF
--color-foreground-accent-on-sky
Text/icons on sky accent fills.
#FFFFFF
--color-foreground-accent-on-amber-bold
Text/icons on amber bold accent fills (background.accent-amber-bold = amber.600 #B45309).
#FFFFFF
--color-foreground-accent-on-green-bold
Text/icons on green-bold accent fills (background.accent-green-bold = emerald.600).
#FFFFFF

Typography three voices, one system

Families
--font-family-sans
'Space Grotesk'
Aa Bb Cc 0123
--font-family-serif
Spectral
Aa Bb Cc 0123
--font-family-mono
'JetBrains Mono'
Aa Bb Cc 0123
Display
--font-display
Display text.
Display
Title
--font-title-large
Primary page heading.
Title Large
--font-title-medium
Section heading.
Title Medium
--font-title-small
Sub-section heading.
Title Small
Body
--font-body-large
Default body and paragraph text.
Body Large
--font-body-medium
Secondary body text.
Body Medium
--font-body-small
Tertiary body text and fine prose.
Body Small
Label
--font-label-large
Prominent UI labels and section headers.
Label Large
--font-label-medium
Standard UI text.
Label Medium
--font-label-small
Meta text, captions, and fine print.
Label Small
--font-label-xsmall
Micro UI label.
Label Xsmall
Label Strong
--font-label-strong-large
Emphasized large label.
Label Strong Large
--font-label-strong-medium
Emphasized standard label.
Label Strong Medium
--font-label-strong-small
Emphasized small label.
Label Strong Small
--font-label-strong-xsmall
Emphasized micro UI label.
Label Strong Xsmall
Mono Label
--font-mono-label-xsmall
Micro monospaced label.
Mono Label Xsmall
--font-mono-label-small
Monospaced UI metadata label.
Mono Label Small
--font-mono-label-strong-small
Emphasized monospaced UI label.
Mono Label Strong Small
Code
--font-code
Code blocks and inline code.
Code
Letter-spacing
--letter-spacing-display-0.01em
Display tracking.
--letter-spacing-title-0.025em
Title tracking.
--letter-spacing-body0em
Body tracking.
--letter-spacing-label0.03em
Label tracking.
--letter-spacing-all-caps0.1em
All-caps tracking.

Spacing 8-point base scale

--spacing-align
Optical alignment.
2px
--spacing-micro
Micro spacing.
4px
--spacing-tight
Tight spacing.
8px
--spacing-inline
Inline spacing.
12px
--spacing-element
Element spacing.
16px
--spacing-component
Component spacing.
24px
--spacing-group
Group spacing.
32px
--spacing-layout
Layout spacing.
48px
--spacing-block
Block spacing.
64px
--spacing-page
Page spacing.
80px
--spacing-section
Section spacing.
128px

Radius

--radius-none
No rounding.
0
--radius-sm
Subtle rounding.
4px
--radius-default
Default rounding.
8px
--radius-lg
Large rounding.
12px
--radius-xl
Extra-large rounding.
16px
--radius-full
Pill or circle.
9999px

Motion duration + easing, in motion

Two registers, one token set: productive motion for UI that responds; expressive motion for layer-shifting moments.

Durationreal time: instant is over in a blink by design
--motion-duration-instant0msInstant feedback.
--motion-duration-standard0msStandard transition.
--motion-duration-emphasized0msEmphasized transition.
Easingsame distance, same time; only the curve changes
--motion-easing-entercubic-bezier(0, 0, 0.58, 1)Easing for elements entering the screen or appearing.
--motion-easing-exitcubic-bezier(0.42, 0, 1, 1)Easing for elements leaving the screen or disappearing.
--motion-easing-movecubic-bezier(0.42, 0, 0.58, 1)Easing for elements repositioning within the viewport.
--motion-easing-defaultcubic-bezier(0.25, 0.1, 0.25, 1)General-purpose easing.
Transitionduration + easing, composed
--motion-transition-micro0ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms
Micro-interaction transition.
--motion-transition-standard0ms cubic-bezier(0.25, 0.1, 0.25, 1) 0ms
Standard component transition.
--motion-transition-emphasized0ms cubic-bezier(0.42, 0, 0.58, 1) 0ms
Emphasized transition for layer-shifting motion.
--motion-transition-move0ms cubic-bezier(0.42, 0, 0.58, 1) 0ms
Repositioning transition.

Shadow elevation, used sparingly

--shadow-none0 0 0 0 rgba(0,0,0,0)
No shadow.
--shadow-raised0 1px 3px 0 rgba(0,0,0,0.08)
Raised elevation.
--shadow-overlay0 6px 20px 0 rgba(0,0,0,0.16)
Overlay elevation.
--shadow-dialog0 12px 40px 0 rgba(0,0,0,0.24)
Dialog elevation.

Icon size under construction

Provisional: the icon system isn't finalized yet, so these sizes are placeholders and may change.

--icon-size-compact16px
Compact icon.
--icon-size-default20px
Default icon.
--icon-size-large24px
Large icon.
--icon-size-xl32px
Extra-large icon.

Every token above is generated at build time from Parsimony, so this page can’t drift from the source. Component-scoped tokens (badge, button, input, and so on) aren’t listed here, they live in each component’s own contract. This portfolio is the system eating its own dog food.

Back to the index or selected work.