Norbielink uses a 4px base unit spacing scale. All padding, margin, and gap values must be multiples of 4. This creates visual rhythm and ensures pixel-perfect alignment across components.
4
8
12
16
20
24
32
40
48
64
80
96
Spacing scale
The full token set from space-1 (4px) to space-24 (96px).
Token
px
rem
Visual
Common uses
space-1
4px
0.25rem
Icon gap, micro nudge
space-2
8px
0.5rem
Badge padding, tight rows
space-3
12px
0.75rem
Nav item gap, button icon gap
space-4
16px
1rem
Standard gap, nav item padding-x, card gap
space-5
20px
1.25rem
Nav item padding, sidebar internal spacing
space-6
24px
1.5rem
Card padding, section gap, table padding-x
space-8
32px
2rem
Grid gap, modal padding, section bottom
space-10
40px
2.5rem
Example container padding, hero spacing
space-12
48px
3rem
Page header top margin, section spacing
space-16
64px
4rem
Section margin-bottom, divider spacing
space-20
80px
5rem
Page content padding-x, layout gutter
space-24
96px
6rem
Page bottom padding, hero vertical padding
Layout grid
Norbielink layouts use a 12-column grid with a 16px gutter at 1440px wide (1920px for full-bleed screens). The sidebar occupies 2–3 columns; content fills the remaining columns.
12-Column Grid — 1440px canvas, 16px gutter
1
2
3
4
5
6
7
8
9
10
11
12
Sidebar
2 col / 280px
2 col / 280px
Main Content
8 col / ~900px
8 col / ~900px
TOC
2 col / 220px
2 col / 220px