Quick search

Search pages, classes, or tools

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.

background
foreground
primary
primary-foreground
secondary
secondary-foreground
muted
muted-foreground
accent
accent-foreground
card
card-foreground
popover
popover-foreground
border
input
ring
destructive

Colors · Sidebar

sidebar, sidebar-primary, sidebar-accent, sidebar-border, sidebar-ring.

sidebar
sidebar-foreground
sidebar-primary
sidebar-primary-foreground
sidebar-accent
sidebar-accent-foreground
sidebar-border
sidebar-ring

Colors · Chart

chart-1 … chart-5 for charts and data viz.

chart-1
chart-2
chart-3
chart-4
chart-5

Colors · Primitives

Single source of truth in globals.css (gray-0…gray-950, destructive-raw, success-raw). Semantic tokens reference these.

gray-0
gray-50
gray-100
gray-200
gray-400
gray-500
gray-900
gray-950
destructive-raw
success-raw

Radius

Base --radius: 0.625rem. Tailwind: rounded-sm, rounded-md, rounded-lg, rounded-xl, rounded-2xl, rounded-3xl, rounded-4xl.

radius-sm
radius-md
radius-lg
radius-xl
radius-2xl
radius-3xl
radius-4xl

Toast

Sonner toasts are mounted in layout. Wire success/error to your checkout or API.

← Back to home