Foundations

Spacing & Grid

A 4-pixel base unit system designed for rhythmic, scalable interfaces. Every space, gap, and margin descends from a unified mathematical foundation.

Spacing Scale

Built on a 4px base unit. Use these tokens consistently across padding, margin, and gap properties.

Token
Class
px
rem
Visual
0
p-0
0
0
1
p-1
4
0.25
2
p-2
8
0.5
3
p-3
12
0.75
4
p-4
16
1
5
p-5
20
1.25
6
p-6
24
1.5
8
p-8
32
2
10
p-10
40
2.5
12
p-12
48
3
16
p-16
64
4
20
p-20
80
5
24
p-24
96
6
32
p-32
128
8

Box Model

Adjust padding and margin to see how spacing layers compose around content.

24px
32px
Marginm-8
Paddingp-6
Content
margin 32
padding 24
content

Grid System

Responsive column layouts with adjustable gaps. Built on CSS Grid for predictable behavior.

Columns
Gap16px
1
2
3
4
5
6
grid grid-cols-3 gap-[16px]

Breakpoints

Mobile-first responsive breakpoints. Current viewport: 0px (base)

Prefix
Min Width
Description
Status
sm:
640px
Mobile landscape, small tablets
Inactive
md:
768px
Tablets, portrait
Inactive
lg:
1024px
Laptops, landscape tablets
Inactive
xl:
1280px
Standard desktops
Inactive
2xl:
1536px
Large desktops, wide monitors
Inactive
01920px

Usage

Implementation patterns for Tailwind utility classes and raw CSS.

tailwind
<!-- Tailwind spacing utilities -->
<div class="p-4 m-2 gap-6">
  <div class="px-6 py-3">Padding X & Y</div>
  <div class="mt-8 mb-4">Margin top & bottom</div>
  <div class="space-y-4">Vertical spacing</div>
</div>

<!-- Responsive grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
  <div>Card 1</div>
  <div>Card 2</div>
</div>
css
/* CSS custom properties */
:root {
  --space-1: 0.25rem;  /* 4px  */
  --space-2: 0.5rem;   /* 8px  */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
}

.container {
  padding: var(--space-6);
  gap: var(--space-4);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}