Spacing
Consistent spacing creates visual rhythm and hierarchy. All spacing values are based on a 2px base unit, scaled through a harmonious progression.
Spacing Scale
Base unit: 2px. All values derive from this foundation.
2px
0.125rem
4px
0.25rem
6px
0.375rem
8px
0.5rem
10px
0.625rem
12px
0.75rem
16px
1rem
20px
1.25rem
24px
1.5rem
32px
2rem
/* Spacing scale — used throughout the design system */
--space-1: 2px; /* 0.125rem */
--space-2: 4px; /* 0.25rem */
--space-3: 6px; /* 0.375rem */
--space-4: 8px; /* 0.5rem */
--space-5: 10px; /* 0.625rem */
--space-6: 12px; /* 0.75rem */
--space-8: 16px; /* 1rem */
--space-10: 20px; /* 1.25rem */
--space-12: 24px; /* 1.5rem */
--space-16: 32px; /* 2rem */Layout Spacing
How spacing is applied to the core layout shell: topbar, sidebar, content area, and cards.
Structural padding & margins
Topbar padding
Horizontal padding of the fixed top navigation bar
0 1.5rem
Sidebar padding
Internal padding of the fixed sidebar navigation
4px 8px
Main content padding
Padding around the primary content area
1.5rem 2rem
Card padding
Interior padding of card components
1rem 1.2rem
Section margin-bottom
Vertical spacing between content sections
1.5rem
Visual layout anatomy
Component Gaps
Gap values used between elements within components.
| Context | Gap Value | Usage | Visual |
|---|---|---|---|
| Grid gap | 0.75rem |
Space between cards in grid layouts |
|
| Button gap | 6px |
Space between icon and label inside buttons |
|
| Inline row gap | 12px |
Space between icon and text in inline rows |
|
| Badge gap | 5px |
Space between dot and text in status badges | Active |
| Flow step gap | 6px |
Space between elements within flow step |
|
| Callout gap | 10px |
Space between icon and text in callout banners |
i
|
/* Component gap reference */
.grid { gap: 0.75rem; } /* 12px */
.btn { gap: 6px; } /* icon + label */
.inline-left { gap: 12px; } /* icon + content */
.badge { gap: 5px; } /* dot + text */
.flow-step { gap: 6px; } /* number + label */
.callout { gap: 10px; } /* icon + message */Border Radius
Border radius values create visual softness and define component hierarchy.
12px
var(--radius)
Default radius
16px
var(--radius-lg)
Cards, modals
6px
6px
Buttons, badges
7px
7px
Sidebar icons
8px
8px
Badges, notifications
50%
50%
Avatars, dots
Complete radius reference
| Value | CSS | Components |
|---|---|---|
12px | var(--radius) | Default containers, code blocks, callouts, previews, inline icons |
16px | var(--radius-lg) | Cards, inline rows, modals, feature cards |
6px | direct value | Buttons, button groups, sidebar links, input fields, topbar actions |
7px | direct value | Sidebar icon squares (28x28) |
8px | direct value | Status badges, toast notifications, accordion headers |
50% | direct value | Avatars, status dots, badge dots, step indicators, donut charts |
Grid System
CSS Grid layouts with consistent gap spacing. All grids collapse responsively.
2-Column Grid
.docs-grid .docs-grid-2 { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
1fr
1fr
3-Column Grid
.docs-grid .docs-grid-3 { grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; }
1fr
1fr
1fr
4-Column Grid
.docs-grid .docs-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; gap: 0.75rem; }
1fr
1fr
1fr
1fr
5-Column Grid
.docs-grid .docs-grid-5 { grid-template-columns: repeat(5, 1fr); gap: 0.75rem; }
1fr
1fr
1fr
1fr
1fr
/* Grid system — all grids share the same gap */
.docs-grid { display: grid; gap: 0.75rem; }
.docs-grid-2 { grid-template-columns: 1fr 1fr; }
.docs-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.docs-grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.docs-grid-5 { grid-template-columns: repeat(5, 1fr); }
/* Responsive breakpoints */
@media (max-width: 900px) {
.docs-grid-2, .docs-grid-3, .docs-grid-4, .docs-grid-5 {
grid-template-columns: 1fr;
}
}
@media (min-width: 901px) and (max-width: 1200px) {
.docs-grid-3 { grid-template-columns: 1fr 1fr; }
.docs-grid-4 { grid-template-columns: 1fr 1fr; }
.docs-grid-5 { grid-template-columns: 1fr 1fr 1fr; }
}
Tip: All grid layouts use a consistent
0.75rem (12px) gap. This creates a uniform rhythm across dashboards regardless of column count.