← Design System v0.3.0

Spatial System

Spacing

All values are multiples of the base-unit (0.25rem = 4px). Never mix component spacing (spacing.*) with layout tokens (layout.*) on the same element.

Dimension Scale — Raw Foundations

base-unit = 0.25rem = 4px  ·  root-unit = 1rem = 16px

dimension.scale.px
1px 0.0625rem
Hairline — CSS Grid gaps to reveal background
dimension.scale.0.5
2px 0.125rem
Focus ring offsets and hairline padding adjustments only
dimension.scale.1
4px 0.25rem
Atomic minimum gap
dimension.scale.1.5
6px 0.375rem
Sub-step between atomic and tight — icon-to-label, checkbox inner gap
dimension.scale.2
8px 0.5rem
Standard tight component padding
dimension.scale.3
12px 0.75rem
Optical alignment in buttons and inputs
dimension.scale.4
16px 1rem
Universal baseline for component and layout gaps
dimension.scale.5
20px 1.25rem
Minor layout step, tight grid gutters
dimension.scale.6
24px 1.5rem
Primary step between sibling components
dimension.scale.8
32px 2rem
Structural boundary between distinct sections
dimension.scale.10
40px 2.5rem
Expanded breathing room for complex widgets
dimension.scale.12
48px 3rem
Minimum accessible touch target; macro gap
dimension.scale.16
64px 4rem
Major architectural breaks between content themes
dimension.scale.20
80px 5rem
Heavy structural voids
dimension.scale.24
96px 6rem
Monumental whitespace isolating typographic blocks
dimension.scale.32
128px 8rem
Hero void — maximum brutalist vertical padding
dimension.scale.40
160px 8rem
Expansive macro-layout (standard desktop section gap)
dimension.scale.48
192px 8rem
Deep structural void
dimension.scale.64
256px 8rem
Maximum spatial isolation (cinematic scrolling breaks)

Semantic Spacing — Component-Internal

Use for padding and internal gap within a component. Classes: p-4, px-6, etc.

spacing.px Hairline structural inner gap
1px --padding-px
spacing.0.5 Focus ring offset, hairline inner padding
2px --padding-0.5
spacing.1 Micro-nudge
4px --padding-1
spacing.1.5 Tight icon-to-label gap, checkbox inner padding
6px --padding-1.5
spacing.2 Dense padding
8px --padding-2
spacing.3 Input field baseline padding
12px --padding-3
spacing.4 Standard component baseline (buttons, cards)
16px --padding-4
spacing.6 Expansive component padding
24px --padding-6
spacing.8 Brutalist padding
32px --padding-8
spacing.10 Elevated void
40px --padding-10
spacing.12 Maximum internal pressure
48px --padding-12

Layout Tokens — Page Architecture

Use for structural gap between grid sections and margin between page zones. Classes: gap-6, my-16, etc.

layout.4 Micro layout — gap between closely related component groups
16px --margin-4
layout.6 Standard layout — default CSS Grid gutter and margin between cards
24px --margin-6
layout.8 Section isolation
32px --margin-8
layout.10 Expanded isolation — dense dashboard section breaks
40px --margin-10
layout.12 Macro layout
48px --margin-12
layout.16 Major page breaks
64px --margin-16
layout.20 Heavy structural voids
80px --margin-20
layout.24 Monumental whitespace
96px --margin-24
layout.32 The Hero Void
128px --margin-32
layout.40 Expansive macro-layout — standard desktop section gap
160px --margin-40
layout.48 Deep structural void
192px --margin-48
layout.64 Maximum spatial isolation — cinematic scrolling breaks
256px --margin-64

Breakpoints

The grid transitions from 4 → 8 columns at sm and from 8 → 16 at lg.

breakpoint.xs Large phones — micro-spacing adjustments only
416px 26rem
breakpoint.sm 8-column grid activates
640px 40rem
breakpoint.md Portrait tablets — 8 columns with expanded margins
768px 48rem
breakpoint.lg Hard transition to 16-column desktop grid
1024px 64rem
breakpoint.xl Compact laptops — minimum for full desktop layouts
1280px 80rem
breakpoint.2xl Primary marketing canvas
1440px 90rem
breakpoint.3xl Maximum architectural wrapper — grid locks here
1920px 120rem