Design tokens

Every token, one source of truth.

114 CSS custom properties covering colour, type, spacing, radius, shadow and motion. Reference the semantic names (--brand-primary, --surface-card) over raw scale values where possible.

colors.css manifest.json

Colour

--sc-rust-400#a6552f
--sc-rust-500#883d1a
--sc-rust-600#6f3014
--sc-rust-700#57250f
--sc-bark-500#6b5640
--sc-bark-600#5a4530
--sc-bark-700#4d331f
--sc-bark-800#3a2716
--sc-bark-900#261a0f
--sc-parchment-50#faf6ef
--sc-parchment-100#f3ead9
--sc-sand-200#e8d9c2
--sc-sand-300#d8c2a3
--sc-clay-400#b89b79
--sc-stone-500#8c7559
--sc-umber-600#6b5640
--sc-white#ffffff
--sc-forest#4e6b3f
--sc-ochre#b9842a
--sc-brick#9b3522
--sc-slate#41606a
--surface-pagevar(--sc-parchment-50)
--surface-cardvar(--sc-white)
--surface-panelvar(--sc-parchment-100)
--surface-inversevar(--sc-bark-700)
--surface-sunkenvar(--sc-parchment-100)
--brand-primaryvar(--sc-rust-500)
--brand-primary-hovervar(--sc-rust-400)
--brand-primary-pressvar(--sc-rust-600)
--brand-secondaryvar(--sc-bark-700)
--linkvar(--sc-rust-500)
--link-hovervar(--sc-rust-600)
--focus-ringvar(--sc-rust-400)
--border-softvar(--sc-sand-200)
--bordervar(--sc-sand-300)
--border-strongvar(--sc-clay-400)
--border-darkvar(--sc-bark-700)
--status-successvar(--sc-forest)
--status-warningvar(--sc-ochre)
--status-dangervar(--sc-brick)
--status-infovar(--sc-slate)

Typography

--text-strongvar(--sc-bark-900)
--text-bodyvar(--sc-bark-800)
--text-mutedvar(--sc-umber-600)
--text-faintvar(--sc-stone-500)
--text-on-darkvar(--sc-parchment-50)
--text-on-brandvar(--sc-parchment-50)
--font-display"Montaga", "Hoefler Text", "Times New Roman", serif
--font-sans"Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif
--font-monoui-monospace, "SFMono-Regular", Menlo, Consolas, monospace
--weight-light300
--weight-regular400
--weight-medium500
--weight-semibold600
--weight-bold700
--text-2xs0.6875rem
--text-xs0.75rem
--text-sm0.875rem
--text-base1rem
--text-md1.125rem
--text-lg1.375rem
--text-xl1.75rem
--text-2xl2.25rem
--text-3xl3rem
--text-4xl4rem
--text-5xl5.5rem
--leading-tight1.08
--leading-snug1.25
--leading-normal1.55
--leading-relaxed1.7
--tracking-tight-0.01em
--tracking-normal0
--tracking-wide0.04em
--tracking-wider0.12em
--tracking-widest0.22em

Spacing & layout

--space-00
--space-10.25rem
--space-20.5rem
--space-30.75rem
--space-41rem
--space-51.5rem
--space-62rem
--space-72.5rem
--space-83rem
--space-94rem
--space-105rem
--space-127rem
--space-1610rem
--border-hairline1px
--border-regular1.5px
--border-heavy2px
--container-sm640px
--container-md880px
--container-lg1120px
--container-xl1320px

Radius

--radius-xs2px
--radius-sm4px
--radius-md6px
--radius-lg10px
--radius-xl16px
--radius-pill999px
--radius-circle50%

Shadow

--shadow-xs0 1px 2px rgba(38, 26, 15, 0.08)
--shadow-sm0 1px 3px rgba(38, 26, 15, 0.10), 0 1px 2px rgba(38, 26, 15, 0.06)
--shadow-md0 4px 10px rgba(38, 26, 15, 0.10), 0 2px 4px rgba(38, 26, 15, 0.06)
--shadow-lg0 12px 28px rgba(38, 26, 15, 0.14), 0 4px 10px rgba(38, 26, 15, 0.08)
--shadow-xl0 24px 56px rgba(38, 26, 15, 0.18)
--shadow-insetinset 0 1px 2px rgba(38, 26, 15, 0.14)

Motion & easing

--ease-standardcubic-bezier(0.22, 0.61, 0.36, 1)
--ease-outcubic-bezier(0.16, 1, 0.3, 1)
--ease-in-outcubic-bezier(0.65, 0, 0.35, 1)
--dur-fast120ms
--dur-base200ms
--dur-slow360ms