Admin

Admin tokens

The Admin theme is a muted selection from the same primitive ramps as Marketing, with the same semantic token names. Only the chosen steps and the typography differ.

Primitive ramps — shared

Identical to the Marketing ramps. Admin does not introduce new primitives; it selects muted steps from these.

Navy

100

200

300

400

500

600

700

800

900

Gold

100

200

300

400

500

600

700

800

900

Neutral

100

200

300

400

500

600

700

800

900

Semantic tokens — Marketing vs Admin

Same token names; Admin maps them to muted, neutral values. Action, focus, and the navy sidebar are shared verbatim so the two systems stay related.

Token	Marketing	Admin (muted)
`--color-bg`	neutral-100 · #f6f2ea	#f4f5f6 · cool neutral
`--color-surface`	neutral-0 · #fffdf8	#ffffff
`--color-text`	navy-800 · #10243d	#1b2733 · muted navy
`--color-text-muted`	slate · #3f4f63	#5d6b7a · slate gray
`--color-text-accent`	gold-600 · #8a6a2e	gold-600 · #8a6a2e
`--color-border`	neutral-300 · #d8d0c2	#e3e7ec · cool border
`--color-action`	gold-400 · #c2a15a	gold-400 · #c2a15a
`--color-action-text`	navy-900 · #0a1729	navy-900 · #0a1729
`--color-sidebar`	navy-900 · #0a1729	navy-900 · #0a1729

Typography overrides

All headlines — large and small — stay on-brand in Cormorant Garamond, the same serif Marketing uses. Body, labels, buttons, and dense UI switch to Hanken Grotesk for legibility at small sizes.

Role	Marketing	Admin
Large headline / metric	Cormorant Garamond 700	Cormorant Garamond 700 — kept
Small headline	Cormorant Garamond 700	Cormorant Garamond 700 — shared serif
Body	Newsreader 400	Hanken Grotesk 400
Label / UI	Newsreader 600	Hanken Grotesk 500–600
Button	Newsreader 600	Hanken Grotesk 600

Color combinations — utility

Utility combos set the same contextual --c-* tokens as Marketing's (see Marketing · Color), but they derive from semantic tokens instead of fixed art direction — so they re-resolve automatically when the theme or the mode flips. Toggle dark mode to verify: panels darken, the sidebar goes a touch deeper, gold stays gold.

Matters

Estate of J. Whitfield

Probate administration · filed Mar 12 · 4 open tasks.

Open matter

.combination-canvas Canvas · app background derives from --bg / --surface-sunken

Matters

Estate of J. Whitfield

Probate administration · filed Mar 12 · 4 open tasks.

Open matter

.combination-panel Panel · cards & tables derives from --surface / --border

Matters

Estate of J. Whitfield

Probate administration · filed Mar 12 · 4 open tasks.

Open matter

.combination-sunken Sunken · wells & inputs derives from --surface-sunken

.combination-sidebar Sidebar · navy rail navy in both modes — never inverts

Matters

Estate of J. Whitfield

Probate administration · filed Mar 12 · 4 open tasks.

Open matter

.combination-gold Gold · inverse attention shared with Brand/Marketing — stays gold in dark mode

Defined in src/styles/ds/utility.css. The shared inverse surface .combination-gold lives in src/styles/ds/brand.css so all three systems update from one place.