Tokens

Source of truth: apps/svelte-web/src/routes/layout.css (web). OKLCH values converted to sRGB hex for swatch display.

73 color tokens defined in light mode, 69 in dark. OKLCH values converted to sRGB hex for swatch display; the canonical source remains the OKLCH definition in layout.css.

Colors

Surfaces

Token	Light hex	Dark hex	Light OKLCH
`--background`	`#ffffff`	`#0c0d12`	`oklch(1 0 0)`
`--foreground`	`#1e1f2b`	`#ecedf3`	`oklch(0.244 0.023 280.8)`
`--card`	`#ffffff`	`#1a1b22`	`oklch(1 0 0)`
`--card-foreground`	`#1e1f2b`	`#ecedf3`	`oklch(0.244 0.023 280.8)`
`--popover`	`#ffffff`	`#23242f`	`oklch(1 0 0)`
`--popover-foreground`	`#1e1f2b`	`#ecedf3`	`oklch(0.244 0.023 280.8)`
`--muted`	`#f2f2f6`	`#23242f`	`oklch(0.962 0.005 286.3)`
`--muted-foreground`	`#7b7c8c`	`#8a8b98`	`oklch(0.591 0.024 282.8)`

Brand — primary

Token	Light hex	Dark swatch	Dark hex	Light OKLCH
`--primary`	`#4a40c9`		`#8f87dd`	`oklch(0.473 0.203 278.5)`
`--primary-foreground`	`#ffffff`		`#ffffff`	`oklch(1 0 0)`
`--primary-hover`	`#3f37ac`		`#a29be6`	`oklch(0.424 0.179 278.6)`
`--primary-active`	`#372f97`		`#7a71d0`	`oklch(0.385 0.163 278.9)`
`--primary-light`	`#eae8f8`		`#23213c`	`oklch(0.937 0.022 291.7)`
`--primary-dark`	`#372f97`		`#8e86f0`	`oklch(0.385 0.163 278.9)`
`--primary-solid`	`#4a40c9`	—	`—`	`oklch(0.473 0.203 278.5)`
`--primary-solid-hover`	`#3f37ac`	—	`—`	`oklch(0.424 0.179 278.6)`
`--primary-solid-active`	`#372f97`	—	`—`	`oklch(0.385 0.163 278.9)`

Brand — secondary

Token	Light hex	Dark hex	Light OKLCH
`--secondary`	`#f2f2f6`	`#23242f`	`oklch(0.962 0.005 286.3)`
`--secondary-foreground`	`#5f6070`	`#9a9cab`	`oklch(0.494 0.025 282.6)`
`--secondary-hover`	`#eaeaf2`	`#2c2e3b`	`oklch(0.939 0.011 286.2)`
`--secondary-light`	`#f7f7fa`	`#1a1b22`	`oklch(0.977 0.004 286.3)`

Brand — tertiary

Token	Light hex	Dark hex	Light OKLCH
`--tertiary`	`#27707b`	`#63b7c2`	`oklch(0.5052 0.0725 209.12)`
`--tertiary-foreground`	`#ffffff`	`#0f1a1d`	`oklch(1 0 0)`
`--tertiary-light`	`#e2f0f1`	`#14262a`	`oklch(0.945 0.015 202)`

Brand — accent

Token	Light swatch	Light hex	Dark swatch	Dark hex	Light OKLCH
`--accent`		`#eae8f8`		`#23213c`	`oklch(0.937 0.022 291.7)`
`--accent-foreground`		`#4a40c9`		`#8f87dd`	`oklch(0.473 0.203 278.5)`

Semantic — destructive / danger

Token	Light hex	Dark hex	Light OKLCH
`--destructive`	`#b3402f`	`#e15b48`	`oklch(0.53 0.153 31.1)`
`--destructive-foreground`	`#ffffff`	`#0c0d12`	`oklch(1 0 0)`
`--destructive-light`	`#fbf1ef`	`#2a1715`	`oklch(0.965 0.011 31.1)`
`--danger`	`#b3402f`	`#e15b48`	`oklch(0.53 0.153 31.1)`
`--danger-foreground`	`#ffffff`	`#0c0d12`	`oklch(1 0 0)`
`--danger-hover`	`#822318`	`#e06e5e`	`oklch(0.407 0.132 30.2)`
`--danger-light`	`#fbf1ef`	`#2a1715`	`oklch(0.965 0.011 31.1)`

Semantic — success

Token	Light hex	Dark hex	Light OKLCH
`--success`	`#2c7756`	`#7ed0a0`	`oklch(0.513 0.091 161.4)`
`--success-foreground`	`#ffffff`	`#0c0d12`	`oklch(1 0 0)`
`--success-hover`	`#2f6246`	`#93dab1`	`oklch(0.452 0.072 157.7)`
`--success-light`	`#e5f2ec`	`#16281f`	`oklch(0.95 0.016 166.7)`

Semantic — warning

Token	Light hex	Dark hex	Light OKLCH
`--warning`	`#8d6218`	`#e7b44c`	`oklch(0.529 0.102 75.6)`
`--warning-foreground`	`#ffffff`	`#0c0d12`	`oklch(1 0 0)`
`--warning-hover`	`#7d4a0d`	`#ebc06d`	`oklch(0.459 0.098 63.6)`
`--warning-light`	`#fbefda`	`#2a2214`	`oklch(0.956 0.031 81.8)`
`--warning-solid`	`#c97e2b`	`#c97e2b`	`oklch(0.659 0.132 64)`

Semantic — info

Token	Light hex	Dark hex	Light OKLCH
`--info`	`#2a6fdb`	`#6fa8f0`	`oklch(0.559 0.179 259.4)`
`--info-foreground`	`#ffffff`	`#0c0d12`	`oklch(1 0 0)`
`--info-hover`	`#215cb8`	`#8bbbf7`	`oklch(0.49 0.158 259.4)`
`--info-light`	`#e4eefb`	`#172338`	`oklch(0.945 0.021 254.9)`

Status badges

Token	Light hex	Dark hex	Light OKLCH
`--status-draft`	`#7b7c8c`	`#8a8b98`	`oklch(0.591 0.024 282.8)`
`--status-active`	`#2c7756`	`#7ed0a0`	`oklch(0.513 0.091 161.4)`
`--status-pending`	`#8d6218`	`#e7b44c`	`oklch(0.529 0.102 75.6)`
`--status-sold`	`#2a6fdb`	`#6fa8f0`	`oklch(0.559 0.179 259.4)`
`--status-rented`	`#27707b`	`#63b7c2`	`oklch(0.5052 0.0725 209.12)`
`--status-inactive`	`#8a8b98`	`#7b7c8c`	`oklch(0.64 0.019 282.3)`
`--status-archived`	`#3a3e52`	`#c9cad6`	`oklch(0.369 0.035 275.8)`
`--status-paused`	`#c97e2b`	`#eb9a55`	`oklch(0.659 0.132 64)`

Charts

Token	Light hex	Dark hex	Light OKLCH
`--chart-1`	`#91c5ff`	`#a4b0ff`	`oklch(0.81 0.1 252)`
`--chart-2`	`#3a81f6`	`#488bfb`	`oklch(0.62 0.19 260)`
`--chart-3`	`#2563ef`	`#3670ee`	`oklch(0.55 0.22 263)`
`--chart-4`	`#1a4eda`	`#2a5cda`	`oklch(0.49 0.22 264)`
`--chart-5`	`#1f3fad`	`#2b4bac`	`oklch(0.42 0.18 266)`

Token	Light hex	Dark swatch	Dark hex	Light OKLCH
`--sidebar`	`#ffffff`		`#1a1b22`	`oklch(1 0 0)`
`--sidebar-foreground`	`#1e1f2b`		`#ecedf3`	`oklch(0.244 0.023 280.8)`
`--sidebar-primary`	`#4a40c9`	—	`—`	`oklch(0.473 0.203 278.5)`
`--sidebar-primary-foreground`	`#ffffff`		`#ffffff`	`oklch(1 0 0)`
`--sidebar-accent`	`#eae8f8`		`#23213c`	`oklch(0.937 0.022 291.7)`
`--sidebar-accent-foreground`	`#4a40c9`		`#8f87dd`	`oklch(0.473 0.203 278.5)`
`--sidebar-border`	`#eaeaf2`		`#2a2b36`	`oklch(0.939 0.011 286.2)`
`--sidebar-ring`	`#4a40c9`		`#8f87dd`	`oklch(0.473 0.203 278.5)`

Controls

Token	Light hex	Dark hex	Light OKLCH
`--border`	`#eaeaf2`	`#2a2b36`	`oklch(0.939 0.011 286.2)`
`--input`	`#eaeaf2`	`#2a2b36`	`oklch(0.939 0.011 286.2)`
`--ring`	`#4a40c9`	`#8f87dd`	`oklch(0.473 0.203 278.5)`

Other

Token	Light hex	Dark hex	Light OKLCH
`--neutral`	`#3a3e52`	`#c9cad6`	`oklch(0.369 0.035 275.8)`
`--neutral-light`	`#edeef3`	`#23242f`	`oklch(0.95 0.007 277.2)`
`--shadow-color`	`#1e1f2b`	`#000000`	`oklch(0.244 0.023 280.8)`

Typography

Token	Stack
`--font-sans`	`'Hanken Grotesk Variable', 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`
`--font-serif`	`'Source Serif 4', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif`
`--font-mono`	`ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`

Inter is the body and UI default — loaded via @fontsource/inter in apps/svelte-web/src/routes/+layout.svelte and the same package in apps/docs/astro.config.mjs. Source Serif 4 is named in the serif stack but never explicitly loaded; usages fall back to ui-serif (Georgia). The monospace stack is system-only.

Spacing

Base unit: --spacing: 0.25rem (4 px).

Tailwind v4 derives its spacing scale from --spacing automatically: space-1 → 4 px, space-2 → 8 px, space-4 → 16 px, space-6 → 24 px, space-8 → 32 px, and so on. The @theme inline block in layout.css exposes this scale to every Tailwind utility (p-4, gap-2, mt-8, etc.).

Radius

Base radius: --radius: 0.625rem.

Derived in the @theme inline block:

Token	Formula	Result (with `--radius: 0.625rem`)
`--radius-sm`	`calc(var(--radius) - 4px)`	6 px
`--radius-md`	`calc(var(--radius) - 2px)`	8 px
`--radius-lg`	`var(--radius)`	10 px
`--radius-xl`	`calc(var(--radius) + 4px)`	14 px

Shadows

Token	Light	Dark
`--shadow-2xs`	`0 1px 3px 0px rgb(30 31 43 / 0.05)`	`0 1px 2px 0px hsl(0 0% 0% / 0.2)`
`--shadow-xs`	`0 1px 3px 0px rgb(30 31 43 / 0.05)`	`0 1px 3px 0px hsl(0 0% 0% / 0.25)`
`--shadow-sm`	`0 1px 3px 0px rgb(30 31 43 / 0.08), 0 1px 2px -1px rgb(30 31 43 / 0.08)`	`0 1px 3px 0px hsl(0 0% 0% / 0.3), 0 1px 2px -1px hsl(0 0% 0% / 0.25)`
`--shadow`	`0 1px 3px 0px rgb(30 31 43 / 0.1), 0 1px 2px -1px rgb(30 31 43 / 0.1)`	`0 1px 3px 0px hsl(0 0% 0% / 0.35), 0 1px 2px -1px hsl(0 0% 0% / 0.3)`
`--shadow-md`	`0 1px 3px 0px rgb(30 31 43 / 0.1), 0 2px 4px -1px rgb(30 31 43 / 0.1)`	`0 2px 6px 0px hsl(0 0% 0% / 0.35), 0 2px 4px -2px hsl(0 0% 0% / 0.3)`
`--shadow-lg`	`0 1px 3px 0px rgb(30 31 43 / 0.1), 0 4px 6px -1px rgb(30 31 43 / 0.1)`	`0 4px 12px 0px hsl(0 0% 0% / 0.4), 0 4px 6px -2px hsl(0 0% 0% / 0.3)`
`--shadow-xl`	`0 1px 3px 0px rgb(30 31 43 / 0.1), 0 8px 10px -1px rgb(30 31 43 / 0.1)`	`0 8px 20px 0px hsl(0 0% 0% / 0.45), 0 8px 10px -4px hsl(0 0% 0% / 0.35)`
`--shadow-2xl`	`0 1px 3px 0px rgb(30 31 43 / 0.25)`	`0 12px 40px 0px hsl(0 0% 0% / 0.55)`

Dark mode uses higher opacity (multiplier ~2–7×) to compensate for the indigo-tinted slate surface palette where standard 5–10% shadows would disappear.