Style guide
Typography & colors
Typography, color tokens, and toast demo. Customize in globals.css and Tailwind theme.
Typography
Satoshi for headings, Inter for UI and body copy.
Heading 1
Heading 2
Heading 3
Body text. Use for paragraphs and default content.
Small / caption text.
Colors · Semantic (UI)
background, primary, muted, card, popover, border, input, ring, destructive.
Colors · Sidebar
sidebar, sidebar-primary, sidebar-accent, sidebar-border, sidebar-ring.
Colors · Chart
chart-1 … chart-5 for charts and data viz.
Colors · Primitives
Single source of truth in globals.css (gray-0…gray-950, destructive-raw, success-raw). Semantic tokens reference these.
Radius
Base --radius: 0.625rem. Tailwind: rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl, rounded-4xl.
Toast
Sonner toasts are mounted in layout. Wire success/error to your checkout or API.