Systems

Semantic tokens

Name	Token	Light	Dark
Backgrounds
Page Background	`var(--bg-page)`	--canvas → --sand-1 #fcfdfc	--sand-1 #111210
Canvas	`var(--canvas)`	--sand-1 #fcfdfc	--sand-1 #111210
Background	`var(--bg)`	--surface #FFFFFF #ffffff	--sand-2 #181917
Background Elevated	`var(--bg-elevated)`	--surface #ffffff	#1b1d1a
Surface Sunken	`var(--surface-sunken)`	--sand-2 #f8faf8	--sand-2 #181917
Background Subtle	`var(--bg-subtle)`	--surface-sunken #f8faf8	--sand-2 #181917
Background Muted	`var(--bg-muted)`	--sand-3 #eff1ef	--sand-3 #212220
Background Hover	`var(--bg-hover)`	ink 4%	--sand-4 #282a27
Background Active	`var(--bg-active)`	ink 7%	--sand-5 #2f312e
Text
Text	`var(--text)`	--ink → --sand-12 #1d211c	--sand-12 #eceeec
Text Secondary	`var(--text-secondary)`	--ink-secondary → --sand-11 #60655f	--sand-11 #afb5ad
Text Tertiary	`var(--text-tertiary)`	--ink-faint → --sand-9 #898e87	--sand-9 #687066
Accent	`var(--accent)`	--sand-12 #1d211c	--sand-12 #eceeec
Borders
Border	`var(--border)`	--sand-6 #d7dad7	--sand-6 #383a36
Border Hover	`var(--border-hover)`	--sand-7 #cccfcc	--sand-7 #454843
Border Focus	`var(--border-focus)`	--sand-8 #b9bcb8	--sand-8 #5c625b
Status
Success	`var(--success)`	--green-11 #218358	--green-11 #3dd68c
Error	`var(--error)`	--red-11 #ce2c31	--red-11 #ff9592
Info	`var(--info)`	--blue-11 #3a5bc7	--blue-11 #9eb1ff
Warning	`var(--warning)`	--sand-10 #7f847d	--sand-10 #767d74
Charts
Chart Cash	`var(--chart-cash)`	--green-11 #218358	--green-11 #3dd68c
Chart Investments	`var(--chart-investments)`	--green-8 #5bb98b	--green-8 #2f7c57
Chart Property	`var(--chart-property)`	--green-5 #c4e8d1	--green-5 #174933
Chart Liability (CC)	`var(--chart-liability-cc)`	--red-6 #fdbdbe	--red-6 #72232d
Chart Liability (Loans)	`var(--chart-liability-loan)`	--sand-11 #60655f	--sand-11 #afb5ad
Chart Pastel 1	`var(--chart-pastel-1)`	#c5b8e8	#c5b8e8
Chart Pastel 2	`var(--chart-pastel-2)`	#b8e0d2	#b8e0d2
Chart Pastel 3	`var(--chart-pastel-3)`	#c5d4b8	#c5d4b8
Chart Pastel 4	`var(--chart-pastel-4)`	#f0d4b8	#f0d4b8
Chart Pastel 5	`var(--chart-pastel-5)`	#b8c8e8	#b8c8e8
Chart Progress Fill	`var(--chart-progress-fill)`	--green-8 #5bb98b	--green-8 #2f7c57
Chart Progress Track	`var(--chart-progress-track)`	--sand-4 #e7e9e7	--sand-4 #282a27
Chart Forecast Fan (≤p10)	`var(--chart-forecast-fan-to-p10)`	--green-5 #c4e8d1	--green-5 #174933
Chart Forecast Fan (p10–p25)	`var(--chart-forecast-fan-p10-p25)`	--green-6 #adddc0	--green-6 #20573e
Chart Forecast Fan (p25–p75)	`var(--chart-forecast-fan-p25-p75)`	--green-8 #5bb98b	--green-8 #2f7c57
Chart Forecast Fan (p75–p90)	`var(--chart-forecast-fan-p75-p90)`	--green-6 #adddc0	--green-6 #20573e
Utility
Overlay	`var(--overlay)`	rgb(0 0 0 / 0.15)	rgb(0 0 0 / 0.6)
Shadow	`var(--shadow)`	--sand-4 #e7e9e7	--sand-4 #282a27

Radius & elevation

Bumped radius ladder and tinted float shadows for layered surfaces on --bg-page.

Radius nesting

control10px

overlay14px

card16px

2xl20px

3xl24px

Four elevation recipes

Edge

var(--shadow-edge)

Card

var(--shadow-card)

Raised

var(--shadow-raised)

Overlay

var(--shadow-overlay)

Token	Use
`--radius-control`	Buttons, inputs, selects, segmented tracks
`--shadow-card`	White surface on `--canvas` — inset ring, never `border:`
`--shadow-raised`	Pressable controls; hover brightens fill, not shadow

Motion extensions

Quieter hover timings and bounce easings from the crafted motion scale.

Hover timing preview

Duration	Value
`--duration-stagger`	40ms
`--duration-micro`	80ms
`--duration-quick`	150ms
`--duration-fast`	250ms
`--duration-medium`	350ms
`--duration-slow`	400ms

Easing	Value
`--ease-smooth-out`	`cubic-bezier(0.22, 1, 0.36, 1)`
`--ease-bounce`	`cubic-bezier(0.34, 1.36, 0.64, 1)`
`--ease-bounce-strong`	`cubic-bezier(0.34, 3.85, 0.64, 1)`
`--ease-out`	`ease-out`