Acme — Design System Reference

Acme design system

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

Color

Primary

#D97757 --clay

#141413 --slate

#FAF9F5 --ivory

#E3DACC --oat

Neutral

#FFFFFF --white

#F0EEE6 --gray-100

#D1CFC5 --gray-300

#87867F --gray-500

#3D3D3A --gray-700

Semantic

#788C5D --success

#C78E3F --warning

#B04A4A --danger

#5C7CA3 --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

Notify assignees Archive on complete

Draft In review Done Overdue