Tokens
Pick a theme at the top right. Ratios are text on the surface it sits on; 4.5:1 is the floor.
Surfaces
- --canvasPage behind the cards
- --cardCards
- --elevatedRaised strip
- --recessedWells
- --controlInputs
- --contrastInverted
Text
- --foregroundContent · on --background
- --muted-foregroundSecondary · on --canvas
- --linkLinks · on --background
- --contrast-foregroundOn inverted · on --contrast
Actions and brand
- --primaryThe one primary action
- --primary-foregroundText on primary · on --primary
- --brandMark and accents
- --brand-foregroundText on brand · on --brand
- --secondarySecondary fill
- --accentHover
Lines
- --border10% line
- --hairlineInside a card
- --inputInput edge
- --ringFocus
Success
- --successSolid fill
- --success-foregroundText on fill · on --success
- --success-tintSoft background
- --success-textText on card · on --card
Warning
- --warningSolid fill
- --warning-foregroundText on fill · on --warning
- --warning-tintSoft background
- --warning-textText on card · on --card
Danger
- --dangerSolid fill
- --danger-foregroundText on fill · on --danger
- --danger-tintSoft background
- --danger-textText on card · on --card
Info
- --infoSolid fill
- --info-foregroundText on fill · on --info
- --info-tintSoft background
- --info-textText on card · on --card
Charts
- --chart-1Series 1
- --chart-2Series 2
- --chart-3Series 3
- --chart-4Series 4
- --chart-5Series 5
- --chart-gridGrid
- --chart-axisAxis
Type
27,0432xl · 24px · KPI
Server-side trackingxl · 20px · page title
Destinationslg · 16px · card and section titles
Meta refused 15% of events in the last 24 hours.sm and base · 14px · content
Last 7 daysxs · 12px · labels and hints
npx shadcn add …/r/button.jsonmono · 0.9em · real code only
sub_Qj9icG…8zpd · sst.shop.exampleIDs, keys, hostnames · normal text, tabular-nums
Radii
4px · small parts
6px · controls
8px · cards
12px · shells
Control heights
Save
32px
Save
36px · default
Save
40px
Surfaces and shadows
Card
Flat, 10% line
Popover
Floats: shadow-md
Dialog
shadow-lg