Foundation

The global design configuration — the single source of truth the entire product builds on. Every component, page, and ambient surface follows it, and the connected Figma file stays in sync.

This short menu is the philosophy made mechanical: an AI building here cannot invent a colour or a spacing, because there is nowhere to put one — it can only choose, and you hold the menu. The full rules it works under are the constitution.

General

Scaling — the base layer
Set this first. Type, spacing, and radius all derive from this base size.
Appearance
Light and dark are both first-class; every token pair covers both.
Font
Sets --font-sans product-wide. Geist ships locally; the rest load from Google Fonts.

Color

Accent color
A Tailwind hue; primary, ring, and the ambient accent derive from it.
Primary text
The tone body text carries — a step on the gray family; dark mode mirrors it.
Secondary text
Descriptions, hints, and meta — quieter, still on the gray family.
Gray color
A Tailwind gray family; it defines every surface — backgrounds, cards, borders.

Semantic mapping

Every semantic token is one visual job — a configurable step on the accent hue or gray family. Pick the light step and the dark one follows automatically; set dark yourself to override. The full palette is documented at /ds → Colors.

Action color
Filled buttons, switches and checks when on, the active nav accent — the color that marks the main action.
--primary + --sidebar-primary
light
dark
Focus ring
The outline drawn around whichever control has keyboard focus.
--ring
light
dark
Ambient accent
The assistant layer's accent — its chips, links, and highlights bridge to the brand hue through this.
--app-blue
light
dark
Page background
The ground every screen sits on; everything else stacks above it.
--background
light
dark
Primary text
Headings and body copy everywhere — cards, popovers, and the sidebar inherit it.
--foreground + --card-foreground, --popover-foreground, --sidebar-foreground
light
dark
Raised surface
The face of anything lifted off the page — cards, popovers, menus, sheets.
--card + --popover
light
dark
Quiet fill
The soft wash behind hover and selected states, subtle chips, and secondary surfaces.
--muted + --accent, --sidebar-accent
light
dark
Secondary text
Supporting copy — descriptions, captions, placeholders, section labels.
--muted-foreground
light
dark
Text on quiet fill
Text sitting on the quiet fill — a hovered menu item's label, a selected row's text.
--accent-foreground + --sidebar-accent-foreground
light
dark
Hairline border
Every hairline — card edges, dividers, table rules.
--border + --sidebar-border
light
dark
Field border
Form-control borders at rest — inputs, selects, checkboxes.
--input
light
dark
Sidebar ground
The navigation rail's tint, and the shell behind the inset content card.
--sidebar
light
dark
Picking a light step derives the dark one automatically; set dark yourself to override. --primary-foreground stays paired.

Shape and density

Radius
Tailwind's radius scale. Your pick becomes rounded-lg, and the neighbouring steps slide with it — every value stays on the scale.
Spacing unit
The scale is Tailwind's own; this sets its unit — every p-4 / gap-2 / h-9 re-derives.

Motion

Character
The feel of every transition, product-wide — easing, timing, and spring family. Hover a card to preview its move.
Pace
Scales every motion role's timing together — the character stays the same.

Icons

Components name icons semantically; the library you pick draws them everywhere.

The vocabulary44 names
searchsettingsuserheartcheckclosechevron-downchevron-leftchevron-rightsidebarmenuhomesunmoonplaypausereplaysparklespluscalendardocumentlinkglobecodecopythumbs-upthumbs-downmorequoteeditalertarrow-uparrow-up-rightscissorstypesmilestoppaletterulerlayersslidershistoryimagepaperclip

A component may only use a name from this list. Adding one means mapping it in all five libraries — a governance event, not a convenience.

Figma

Design file
Everything created here — tokens, components, variants — syncs back to this file. Variables only; code wins on conflict.
Not connected

Reset

Reset to defaults
Return every Foundation dimension — color, type, shape, motion, icons — to the system defaults. Applies live; Save Theme makes it permanent, Discard brings your saved theme back.