Color Tokens¶

The SageOx color system is built on one brand hue (Sage) over warm neutral ramps (Dust, Silt, Crater), plus a semantic palette for feedback.

Brand Palette¶

Sage (Brand)¶

The sole brand hue — primary and action. Grounding, calm, organic.

Token	Hex
`--ox-sage-50`	`#f1f5ef`
`--ox-sage-100`	`#e2ebdf`
`--ox-sage-200`	`#ccdbc7`
`--ox-sage-300`	`#b5cbaf`
`--ox-sage-400`	`#9dc498`	UI/action
`--ox-sage-500`	`#7fa87c`	Brand-fill
`--ox-sage-600`	`#6b9268`
`--ox-sage-700`	`#577a55`
`--ox-sage-800`	`#466144`
`--ox-sage-900`	`#374d36`

There is no second brand accent. The premium-accent role is carried by the functional Warning (earthed gold) ramp.

Dust (Light surfaces)¶

Warm cream. Backgrounds and borders in light mode.

Token	Hex
`--ox-dust-50`	`#f7f5f2`
`--ox-dust-100`	`#f4f2ef`
`--ox-dust-200`	`#f2f0ec`
`--ox-dust-300`	`#ebe8e5`
`--ox-dust-400`	`#e5e2df`

Silt (Text + borders)¶

Warm mid-grey. Text and borders, never surfaces.

Token	Hex
`--ox-silt-50`	`#f5f4ee`
`--ox-silt-100`	`#e8e7dd`
`--ox-silt-200`	`#d3d2c5`
`--ox-silt-300`	`#b7b6a3`
`--ox-silt-400`	`#8c8e7e`
`--ox-silt-500`	`#6b6d60`
`--ox-silt-600`	`#4a4d42`
`--ox-silt-700`	`#353830`
`--ox-silt-800`	`#232620`
`--ox-silt-900`	`#161812`

Crater (Dark surfaces)¶

Green-black. Backgrounds in dark mode.

Token	Hex
`--ox-crater-500`	`#1d221d`
`--ox-crater-600`	`#212620`
`--ox-crater-700`	`#171b17`
`--ox-crater-800`	`#111411`
`--ox-crater-900`	`#0b0d0b`	Dark base

Single-value brand tokens¶

Token	Hex	Use
`--ox-brand-accent`	`#466144`	Forest link accent
`--ox-sap-live`	`#a6c24e`	Live-pulse dot only

Semantic Roles¶

These tokens map meaning to colors, not just values.

Role	Token	Meaning
`surface.quiet`	Dust 100	Resting state, no attention needed
`surface.selected`	Dust 200	Currently active/toggled
`accent.intent`	Sage 500	User action expected
`signal.success`	Success 500	Operation completed
`signal.warning`	Warning 500	Attention recommended
`signal.error`	Error 500	Error/destructive
`signal.info`	Info 500	Neutral information
`signal.public`	Public 500	Publicly accessible content
`text.primary`	Silt 900	Headlines, body
`text.muted`	Silt 600	Secondary content
`text.link`	Brand accent	Interactive text

Light/Dark Parity¶

Role	Light Mode	Dark Mode
Surface
`surface.quiet`	Dust 100	Crater 900
`surface.selected`	Dust 200	Crater 700
`surface.elevated`	Dust 50	Crater 600
Text
`text.primary`	Silt 900	Dust 100
`text.muted`	Silt 600	Sage 400
`text.quiet`	Silt 500	Silt 500
Accent
`accent.intent`	Sage 500	Sage 400
Borders
`border.subtle`	Dust 300	Crater 600
`border.default`	Dust 400	Crater 500
`border.focus`	Sage 500	Sage 400

Semantic Palette¶

For system feedback, not brand expression.

Success¶

Token	Hex
`--ox-success-500`	`#57a07a`	Main

Warning¶

Earthed gold. Also serves the premium-accent role.

Token	Hex
`--ox-warning-500`	`#c6a23c`	Main

Error¶

Destructive and failure states. Consolidates the retired danger family.

Token	Hex
`--ox-error-500`	`#bd5b49`	Main

Progress¶

Slate-violet, for in-flight work.

Token	Hex
`--ox-progress-500`	`#5c68a8`	Main

Info¶

Slate-blue, for neutral information.

Token	Hex
`--ox-info-500`	`#6e8ba0`	Main

Admin¶

Plum, for administrative scope.

Token	Hex
`--ox-admin-500`	`#8b6b91`	Main

Public¶

Indicates publicly accessible content — repos, recordings, pages visible without auth.

Token	Hex
`--ox-public-500`	`#3e8e84`	Main

Usage Guidelines¶

Sage dominates (60-70% of any composition) and carries the one primary CTA per view
Neutrals provide structure — Dust for surfaces, Silt for text and borders, Crater for dark surfaces
Semantic colors are for feedback only, not decoration

CTA contrast¶

The primary action is Sage: light mode is a white label on deep sage-700 (~4.6:1); white on lighter sage fails AA, so the CTA goes deep. Dark mode flips to a dark label (crater-800) on light sage-400. One primary (Sage) CTA per view. The earthed-gold accent stays a dark label on gold.