SPACING & LAYOUT
4px base unit spacing system. Generous whitespace is a defining characteristic.
SPACING SCALE
0.5
2px
1
4px
1.5
6px
2
8px
3
12px
4
16px
5
20px
6
24px
8
32px
10
40px
12
48px
16
64px
20
80px
24
96px
GRID SYSTEM
1
2
3
4
5
6
7
8
9
10
11
12
COLUMNS
12
MAX WIDTH
1280px
CONTENT MAX
768px
GUTTERS & MARGINS
Mobile
Gutter: 16px
Margin: 16px
Tablet
Gutter: 24px
Margin: 32px
Desktop
Gutter: 32px
Margin: 64px
COMPONENT SPACING
Card
Padding24px
Gap (mobile)16px
Gap (desktop)24px
Border radius12px
Button
Padding-x16px
Padding-y8px
Icon gap8px
Form
Field gap16px
Label → input6px
Section gap32px
Section
Padding (mobile)64px
Padding (desktop)96px
Heading → content24px
BORDER RADIUS
sm
4px
md
8px
lg
12px
xl
16px
full
9999px
VIDEO CHART LAYOUT
Chart area layout for 1080×1920 vertical compositions.
CHART AREA
TITLE
LOCKUP
Left: 140px
Top: 580px
Width: 860px
Right: 1000px
Bottom: 1400px
Height: 820px