Theming

The design system is defined entirely with CSS variables. Override a variable and every component follows.

Conventions

Tokens follow the background / foreground convention: --primary is the surface color and --primary-foreground is the text color used on it. Tokens are mapped into Tailwind, so utilities like bg-primary, text-muted-foreground and border-input are available everywhere.

Color tokens

Token	Swatch	Used for
--background		Page surfaces and inputs
--foreground		Primary text color
--card		Card surfaces
--card-foreground		Text on cards
--popover		Popovers, menus, dialogs
--popover-foreground		Text in popovers
--primary		Primary actions
--primary-foreground		Text on primary
--secondary		Secondary actions
--secondary-foreground		Text on secondary
--muted		Muted surfaces
--muted-foreground		Muted text
--accent		Hover/active surfaces
--accent-foreground		Text on accent
--destructive		Destructive actions
--destructive-foreground		Destructive text
--success		Success states
--success-foreground		Success text
--warning		Warning states
--warning-foreground		Warning text
--info		Informational states
--info-foreground		Informational text
--border		Default borders
--input		Input borders
--ring		Focus rings
--brand		Country Club gold
--sidebar		Sidebar background
--sidebar-foreground		Sidebar text
--sidebar-primary		Sidebar active items
--sidebar-accent		Sidebar hover surfaces
--chart-1		Chart series 1
--chart-2		Chart series 2
--chart-3		Chart series 3
--chart-4		Chart series 4
--chart-5		Chart series 5

Radius

All radii derive from a single --radius token (0.625rem). The scale spans rounded-xs through rounded-4xl.

:root {
  --radius: 0.625rem; /* change once, every component follows */
}

Typography

Body text uses DM Sans. Headline sizes (text-xl and above) automatically switch to Fraunces, the serif display face — add font-sans to opt out per element.

A serif headline

A sans headline (font-sans)

Body text set in DM Sans.

Overriding tokens

/* your-app.css — after importing the kit styles */
:root,
[data-theme="light"] {
  --brand: #2f6b4f; /* a greener club */
}

[data-theme="dark"] {
  --brand: #5aad6b;
}