Foundations

Tokens ported from the production Flashquotes app. Prototypes should use these via semantic utilities (bg-primary, text-muted-foreground, …) — never raw hex values.

Color

Semantic tokens. Toggle the studio theme in the header to see dark values.

--primary

Brand indigo-600 #4f46e5 — actions, links, focus

--primary-foreground

Text on primary

--background

Page surface

--foreground

Default text — slate-900

--card

Raised surfaces

--muted

Recessed surface — slate-50, app-shell canvas

--muted-foreground

Secondary text — slate-500

--secondary

Quiet fills — slate-100

--accent

Hover fills

--border

Hairlines and input borders

--ring

Focus ring — indigo-500

--destructive

Errors and dangerous actions — red-600

--success

Positive status — green-600, 'Connected' badges

Quote lifecycle — status dots, never colored backgrounds

--status-booked

Booked — indigo-500

--status-sent

Sent — emerald-500

--status-draft

Draft — amber-500

--status-expired

Expired — slate-400

Sidebar

--sidebar

Sidebar surface — slate-50

--sidebar-foreground

Nav item text

--sidebar-accent

Active item background

--sidebar-accent-foreground

Active item text — brand indigo

--sidebar-border

Sidebar hairline

Typography

Söhne (Klim Type Foundry) — the canonical brand font, self-hosted, weights 200–900 with italics (no Thin cut). 400 Buch for body, 500 Kräftig for UI labels, 600 Dreiviertelfett for headings. Inter/system fall back.

Page titleBookingstext-2xl font-semibold

Section titleUpcoming eventstext-lg font-semibold

Card titleConnect with Stripetext-base font-semibold

BodyFlashquotes partners with Stripe for secure payments.text-sm

Body mediumSarah & Miguel — Wedding receptiontext-sm font-medium

SecondaryA 25% deposit reserves your date.text-sm text-muted-foreground

CaptionQuote expires in 14 daystext-xs text-muted-foreground

OverlineDesigntext-[10px] font-semibold uppercase tracking-widest text-muted-foreground

Radius

6px (rounded-md) on buttons, inputs, and menu items; 8px (rounded-lg) on cards, avatars, and dialogs; 12px on the inset sidebar; full on badges and status dots.

rounded-md

Inputs, menu items

rounded-lg

Buttons, small tiles

rounded-xl

Cards

rounded-2xl

Mobile sheets, feature panels

Shadows

Light and flat — shadow-sm on cards and inputs, shadow on dropdowns and popovers. No inner shadows, no elevation stack; hairline borders do the separation.

shadow-xs

shadow-sm

shadow-md

shadow-lg

Spacing

4px grid. Common steps: 2 (8px) inside controls, 4 (16px) card padding, 6 (24px) section gaps.

2

8px

3

12px

4

16px

6

24px

8

32px

10

40px