Tokens
Layout
Spacing scale and grid system. Generous whitespace is core to the J&C aesthetic.
Grid System
12-column grid with 24px gutters. Common layouts use 1, 2, 3, and 4 column spans.
1 Column
col-span-12
2 Columns
col-span-6
col-span-6
3 Columns
col-span-4
col-span-4
col-span-4
4 Columns
col-span-3
col-span-3
col-span-3
col-span-3
Asymmetric — 2/3 + 1/3
col-span-8
col-span-4
Spacing Scale
Based on Tailwind's default 4px base unit. Each bar's width represents the spacing value.
1 — 4px
2 — 8px
3 — 12px
4 — 16px
6 — 24px
8 — 32px
10 — 40px
12 — 48px
16 — 64px
20 — 80px
24 — 96px
32 — 128px