Acme design system

Generated from src/styles/tokens.ts and src/components/ — use as a portable reference when prompting.

Color

Primary
#F37521 --clay
#8B162B --slate
#F6F3CF --ivory
#F9B6B8 --oat
Neutral
#FFFFFF --white
#FCFCF2 --gray-100
#D6ADB5 --gray-300
#B76F7C --gray-500
#9E3B4D --gray-700
Semantic
#C6B63B --success
#F26D14 --warning
#8B162B --danger
#BAD2E8 --info

Typography

Plan the week ahead
Display 48 / 1.1 / 500
Plan the week ahead
Heading 1 32 / 1.2 / 500
Plan the week ahead
Heading 2 24 / 1.3 / 500
Review milestones, assign owners, and surface blockers before they cascade.
Body 16 / 1.55 / 430
Review milestones, assign owners, and surface blockers before they cascade.
Small 14 / 1.5 / 430
UPDATED 2 HOURS AGO
Caption 12 / 1.4 / 500

Spacing

4--sp-1
8--sp-2
12--sp-3
16--sp-4
24--sp-5
32--sp-6
48--sp-7
64--sp-8

Radius & Elevation

4px--r-xs
8px--r-sm
12px--r-md
20px--r-lg
--shadow-sm0 1px 2px / 6%
--shadow-md0 4px 10px / 8%
--shadow-lg0 12px 28px / 12%

Core components

<Button />
<Input />
<Checkbox />
<Badge />
Draft In review Done Overdue