Acme Design System
Spacing & Grid Specification
The complete spatial system — spacing scale, radius, breakpoints, component sizing, and z-index layers.
ℹ
Never use arbitrary values. All spacing must come from the token scale. If the scale doesn't cover your need, propose a new token.
Spacing Scale
| Token | Value | Common Uses |
|---|
| --space-xs |
4px | Icon gap, tight badge padding |
| --space-sm |
8px | Button padding-y (MD), list item gap |
| --space-md |
12px | Tab padding-x, input padding-y, inline form gap |
| --space-lg |
16px | Button padding-x (MD), card content gap, form field gap |
| --space-xl |
20px | Navbar padding-x, section header gap |
| --space-2xl |
24px | Card padding, modal padding, page section gap |
| --space-3xl |
32px | Large section spacing, page-level vertical rhythm |
| --space-4xl |
48px | Page-level section separators |
Border Radius Scale
| Token | Value | Used On |
|---|
| --radius-sm |
4px | Buttons (SM/MD), badges, inputs, table cells |
| --radius-md |
6px | Buttons (LG), dropdowns, tooltips |
| --radius-lg |
12px | Cards, modals, stat cards, panels |
| --radius-full |
9999px | Avatars, pill tabs, count badges, toggle knob |
Breakpoints
| Name | Min Width | Max Width | Columns | Gutter | Margin |
|---|
| Mobile | 0 | 767px | 4 | 16px | 16px |
| Tablet | 768px | 1023px | 8 | 24px | 24px |
| Desktop | 1024px | 1279px | 12 | 24px | 32px |
| Wide | 1280px | — | 12 | 32px | 48px |
Layout Grid
The system uses a 12-column fluid grid. Component max-widths:
- Narrow (forms, modals): max-width 480px
- Standard (content pages): max-width 960px
- Wide (tables, dashboards): max-width 1280px
- Full bleed: 100% width
Component Sizing Rules
| Component | Height | Min Width | Max Width | Notes |
|---|
| Button SM | 28px | Auto | — | padding-x: 12px |
| Button MD | 36px | Auto | — | padding-x: 16px |
| Button LG | 44px | Auto | — | padding-x: 20px |
| Input | 36px | 160px | 100% | Full width inside forms |
| Navbar | 52px | 100% | — | Fixed top, full width |
| Tab | 36px | Auto | — | padding-x: 12px |
| Modal | Auto | 480px | 480px | Centered overlay |
| Dropdown menu | Auto | 120px | 320px | Positioned below trigger |
| Avatar SM | 24×24px | — | — | Fixed |
| Avatar MD | 32×32px | — | — | Fixed |
| Avatar LG | 40×40px | — | — | Fixed |
Z-Index Scale
| Layer | Token | Value | Used For |
|---|
| Base | --z-base | 0 | Default document flow |
| Raised | --z-raised | 10 | Cards on hover, sticky elements |
| Dropdown | --z-dropdown | 100 | Dropdown menus, select options |
| Sticky | --z-sticky | 200 | Sticky headers, toolbars |
| Overlay | --z-overlay | 300 | Modal backdrop |
| Modal | --z-modal | 400 | Modal dialogs |
| Toast | --z-toast | 500 | Notification toasts |
| Tooltip | --z-tooltip | 600 | Tooltips, popovers |