[ 05:14:22 ] SPACING SYSTEM · LITERAL LABS REGISTERED · ® LL-DS-1.0
Spacing,
by the grid.
® LL-DS SERIAL · 7536U-141-779 · CYCLE 0421 OP·2 V1.0
CONSISTENT RHYTHM · PRECISE SCALE LAYOUT GRID · SPACING TOKENS REF: LL-DS
Scale · 4 px base, geometric
Token Size Preview Use
0 0px Collapse
1px 1px Hairline rule
0.5× 4px Icon nudge
1× 8px Tag gap
1.5× 12px Element gap
2× 16px Card padding
3× 24px Stack rhythm
4× 32px Section pad
6× 48px Major break
8× 64px Hero gutter
12× 96px Page break
16× 128px Full reset
Base unit is --grid-gutter-small: 0.5rem (8px). All steps expressed as calc(N * var(--grid-gutter-small)).
Grid · 12 columns, 8px gutter
01
02
03
04
05
06
07
08
09
10
11
12
Max-width 1344px · Outside gutter calc(6 * var(--grid-gutter-small)) · Column gap var(--grid-gutter-small)
is-full / 12 cols
is-half / 6 cols
is-one-third / 4 cols
is-one-quarter / 3 cols
is-two-thirds / 8 cols
is-three-quarters / 9 cols
is-one-fifth / 2.4 cols
is-four-fifths / 9.6 cols
Layout · asymmetric split is default
Side — label column
Mono meta
Nav / index
Main — content
Headline
Body copy
Sidebar is-one-quarter · Content is-three-quarters · Stacks to is-full below 768px
Stroke
Hair · 1px
Rule · 2px
Heavy · 4px
Chunky · 8px
Radius
--rounded-corners: 0.5rem is the system default, used on cards, buttons, and form inputs. Sharp (0) reserved for ruled elements and data tables.
Shadow · hard-edged, no blur
Hard / 1
Hard / 2
Hard / 3
Brand
All shadows are offset-only (box-shadow: Xpx Xpx 0 var(--ink)). No blur radius. Brand variant uses var(--brand) as shadow colour.
Density · three settings
Compact4 / 8
Row 0112.4ms
Row 028.1ms
Row 034.9ms
Row 043.0ms
Default8 / 16
Row 0112.4ms
Row 028.1ms
Row 034.9ms
Comfy14 / 24
Row 0112.4ms
Row 028.1ms
Compact: 4px / 8px row padding · Default: 8px / 16px · Comfy: 14px / 24px. Choose based on data density, not preference.