3. Spacing System Scale & Viewport Application Rules
8-point grid scale with responsive spacing tokens that adapt card padding, stack gaps, and section margins across viewports.
Responsive Spacing Scale Matrix
8-Point Grid Standard| Token | Base Size | Mobile (XS/S) | Tablet (M) | Desktop (L/XL) | Primary Application Context | Responsive Class |
|---|---|---|---|---|---|---|
| space-1 | 4px (0.25rem) | 4px | 4px | 4px | Micro-gaps, status dot offsets, badge padding | gap-1 p-1 |
| space-2 | 8px (0.50rem) | 8px (6px compact)* | 8px | 8px | Icon-to-text gap, dense list items, tag spacing (*6px compact mobile scaling) | gap-1.5 sm:gap-2 |
| space-3 | 12px (0.75rem) | 8px (0.5rem) | 12px (0.75rem) | 12px (0.75rem) | Button padding, compact input field gaps | p-2 sm:p-3 gap-2 sm:gap-3 |
| space-4 | 16px (1.00rem) | 12px (0.75rem) | 16px (1.00rem) | 20px (1.25rem) | Card internal padding, standard component stack gap | p-3 sm:p-4 lg:p-5 gap-3 sm:gap-4 |
| space-6 | 24px (1.50rem) | 16px (1.00rem) | 24px (1.50rem) | 32px (2.00rem) | Main panel padding, grid gutter gaps | p-4 sm:p-6 lg:p-8 gap-4 sm:gap-6 |
| space-8 | 32px (2.00rem) | 20px (1.25rem) | 32px (2.00rem) | 48px (3.00rem) | Page section vertical margin, master container spacing | space-y-5 md:space-y-8 xl:space-y-12 |
| space-12 | 48px (3.00rem) | 32px (2.00rem) | 48px (3.00rem) | 64px (4.00rem) | Modal offset gaps, full hero section padding | py-8 lg:py-12 2xl:py-16 |
Mobile Viewports (XS/S)
Paddings condense to 12px–16px and stack gaps reduce to space-3 (12px). Prevents vertical scrolling bloat on small screens.
Tablet Viewports (M)
Paddings scale to 20px–24px and grid gutters standard at space-4 (16px). Ensures comfortable touch targets and clear visual separation.
Desktop Viewports (L/XL/XXL)
Paddings expand to 32px–48px and section gaps scale up to space-8 (48px). Creates a premium, breathable editorial layout with clear depth contrast.
Live Responsive Spacing Demonstration Container
Resize browser window to watch padding (p-4 sm:p-6 lg:p-8) & gap (gap-3 sm:gap-6) adapt automatically.
12px (Mobile) → 16px (Tablet) → 20px (Desktop)
12px (Mobile) → 16px (Tablet) → 20px (Desktop)