SAV Design/Tokens

Tokens

The SAV theme: neutral oklch colour tokens for light and dark mode, radius 0.625rem, sidebar and chart tokens, and the font mappings (Inter → --font-sans, Figtree → --font-heading, Geist Mono → --font-geist-mono). Byte-equivalent to the Cruiser app's globals.css token block.

Tokensregistry:theme

Install

npx shadcn@latest add @sav/tokens

Needs "@sav": "https://design.sasv.ch/r/{name}.json" under registries in components.json. Direct URL: /r/tokens.json.

Preview

Surfaces

--backgroundoklch(1 0 0)oklch(0.145 0 0)
--cardoklch(1 0 0)oklch(0.205 0 0)
--popoveroklch(1 0 0)oklch(0.205 0 0)
--mutedoklch(0.97 0 0)oklch(0.269 0 0)
--accentoklch(0.97 0 0)oklch(0.269 0 0)
--secondaryoklch(0.97 0 0)oklch(0.269 0 0)

Text

--foregroundoklch(0.145 0 0)oklch(0.985 0 0)
--card-foregroundoklch(0.145 0 0)oklch(0.985 0 0)
--popover-foregroundoklch(0.145 0 0)oklch(0.985 0 0)
--muted-foregroundoklch(0.556 0 0)oklch(0.708 0 0)
--accent-foregroundoklch(0.205 0 0)oklch(0.985 0 0)
--secondary-foregroundoklch(0.205 0 0)oklch(0.985 0 0)

Primary & state

--primaryoklch(0.205 0 0)oklch(0.922 0 0)
--primary-foregroundoklch(0.985 0 0)oklch(0.205 0 0)
--destructiveoklch(0.577 0.245 27.325)oklch(0.704 0.191 22.216)
--borderoklch(0.922 0 0)oklch(1 0 0 / 10%)
--inputoklch(0.922 0 0)oklch(1 0 0 / 15%)
--ringoklch(0.708 0 0)oklch(0.556 0 0)

Charts

--chart-1oklch(0.87 0 0)oklch(0.87 0 0)
--chart-2oklch(0.556 0 0)oklch(0.556 0 0)
--chart-3oklch(0.439 0 0)oklch(0.439 0 0)
--chart-4oklch(0.371 0 0)oklch(0.371 0 0)
--chart-5oklch(0.269 0 0)oklch(0.269 0 0)

Sidebar

--sidebaroklch(0.985 0 0)oklch(0.205 0 0)
--sidebar-foregroundoklch(0.145 0 0)oklch(0.985 0 0)
--sidebar-primaryoklch(0.205 0 0)oklch(0.488 0.243 264.376)
--sidebar-primary-foregroundoklch(0.985 0 0)oklch(0.985 0 0)
--sidebar-accentoklch(0.97 0 0)oklch(0.269 0 0)
--sidebar-accent-foregroundoklch(0.205 0 0)oklch(0.985 0 0)
--sidebar-borderoklch(0.922 0 0)oklch(1 0 0 / 10%)
--sidebar-ringoklch(0.708 0 0)oklch(0.556 0 0)

Values: first line light, second line dark. --radius is 0.625rem; the Sera style sets rounded-none on controls, so the radius scale only reaches cards and toasts.

Headings · Figtree (--font-heading)

text-4xlSwiss Aerospace Ventures
text-3xlSwiss Aerospace Ventures
text-2xl · page titleSwiss Aerospace Ventures
text-xlSwiss Aerospace Ventures
text-lgSwiss Aerospace Ventures
text-sm · panel titleSwiss Aerospace Ventures

Body · Inter (--font-sans)

text-base

The quick brown fox jumps over the lazy dog. Controls use 16 px on mobile so iOS does not zoom on focus.

text-sm

Default reading size on desktop: tables, forms, descriptions and menu items.

text-xs uppercase

Buttons, labels and badges

text-xs muted

Hints, timestamps and secondary metadata.

Mono · Geist Mono (--font-geist-mono → --font-mono)

CHF 12'480.00 · 2026-11-07T16:45:00Z · npx shadcn@latest add @sav/tokens

Files

No files — this item writes CSS variables into the app.

Dependencies

npm packages

—