Design System

Unified design tokens and conventions. Single source of truth.

Color

Core

background--background

foreground--foreground

muted--muted

muted-foreground--muted-foreground

accent--accent

accent-foreground--accent-foreground

subtle--subtle

border--border

border-strong--border-strong

bullet--bullet

Status

destructive--destructive

success--success

warning--warning

orange--orange

App-specific

card--card

popover--popover

primary--primary

secondary--secondary

input--input

ring--ring

Sidebar

sidebar--sidebar

sidebar-primary--sidebar-primary

sidebar-accent--sidebar-accent

sidebar-border--sidebar-border

Chart

chart-1--chart-1

chart-2--chart-2

chart-3--chart-3

chart-4--chart-4

chart-5--chart-5

Typography

Display / Headings

--font-serif

Newsreader

Italic only for headings and emphasis. Self-hosted TTF. Provides editorial character.

Body / UI

--font-sans

Helvetica Neue

System fallback stack: Helvetica Neue, Helvetica, Inter, system sans-serif.

Archived

deprecated

DM Sans Variable

Previously used for app body text. Replaced by system font stack.

Utilities

.text-labeltracking + uppercase + subtle

Live example of text-label

letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-subtle);

Spacing & Radius

Marketing uses Tailwind defaults with sharp corners. App uses custom radius tokens.

radius0.45rem

radius-smcalc(var(--radius) - 4px)

radius-mdcalc(var(--radius) - 2px)

radius-lgvar(--radius)

Motion

dashes0.8s linear infinite

dashes-reverse0.8s linear infinite reverse

hover4s ease-in-out infinite

gridMovingLinekeyframe only (no utility)

smooth-bouncecubic-bezier(0.16, 1, 0.3, 1.03)

tw-animate-cssPlugin (enter/exit/fade)

Dark Mode

Clean .dark class swaps CSS vars in :root / .dark. No !important overrides.

All components use semantic tokens (bg-background, text-foreground) so dark mode is automatic.

Source

packages/ui/src/globals.cssSingle source of truth — all tokens, fonts, base styles, utilities

packages/marketing/src/globals.cssOne-line import: @import "@laxdb/ui/globals.css"

packages/practice-planner/src/globals.cssOne-line import: @import "@laxdb/ui/globals.css"