Spacing
Syhrezz uses a consistent spacing scale defined as CSS custom properties. Every padding, margin, and gap value in the system comes from this scale. Never use arbitrary pixel values.
Spacing Scale
The spacing scale is based on a 2px base unit. All tokens are defined in ds-tokens.css as --sp-{n} where n is the value in pixels.
--sp-12pxTight gaps, KPI badge padding-y
--sp-24pxNav item margin-bottom, dot indicators
--sp-36pxInline element gaps
--sp-48pxbtn-sm padding, badge padding, small gaps
--sp-510pxNav item padding, compact card padding
--sp-612pxNav item gap, sidebar padding, btn-xs horizontal
--sp-714pxbtn-sm horizontal padding
--sp-816pxModal header padding-y, grid gaps, form group mb
--sp-918pxbtn default horizontal padding (Dark)
--sp-1020pxCard padding (sm), stat card padding, KPI card padding
--sp-1224pxCard padding (default), modal body, logo area padding
--sp-1428pxPage header margin-bottom, hero banner padding-y
--sp-1632pxHero banner padding-x, main content padding
--sp-2040pxSection padding, large gaps
--sp-2448pxEmpty state padding, large section spacing
Component Spacing Rules
| Component | Padding | Gap | Margin |
|---|---|---|---|
| Button (md) | 10px 20px | 8px (icon+label) | — |
| Button (sm) | 6px 12px | 6px | — |
| Button (xs) | 4px 10px | 5px | — |
| Input / Select | 10px 14px | — | form-group: mb 16px |
| Card (default) | 24px | — | — |
| Card (sm) | 20px | — | — |
| Modal header | 20px 24px | — | — |
| Modal body | 24px | — | — |
| Modal footer | 16px 24px | 12px | — |
| Table th/td | 9–11px 14px | — | — |
| Nav item | 10–12px 12px | 12px (icon+label) | mb: 2–4px |
| Sidebar logo area | 20–24px | 10–14px | — |
| Page content | 28px 32px | — | — |
| Page header | — | — | mb: 28px |
| KPI grid gap | — | 16–20px | mb: 22–24px |
| Badge | 4px 10px | 5px | — |
| Dropdown item | 9px 12px | 10px | — |
| Toast | 14px 16px | 12px | — |
AI Implementation Notes
For AI coding assistants: Never use arbitrary pixel values like
padding: 15px or gap: 7px. Always use tokens from this scale. The most commonly used spacings in Syhrezz are: 8px (small gaps), 12px (medium gaps, nav), 16px (grid gaps, form), 20px (card sm), 24px (card default, modal), 28px (page header mb), 32px (page padding).