Spacing & Layout

Spacing tokens

All spacing values use clamp() for fluid, viewport-responsive sizing. The scale covers three levels of intent: section (macro rhythm), gap (component spacing), and card (content padding).

Fluid spacing scale
Token	Value	Usage
	`clamp(64px, 9vw, 128px)`	Vertical padding between major page sections
	`clamp(14px, 2vw, 28px)`	Gap between grid items, stacked cards, and adjacent elements
	`clamp(18px, 2.2vw, 36px)`	Internal padding inside cards and containers

Layout tokens

Layout constraints
Token	Value	Usage
	`1440px`	Maximum content width for .container elements
	`clamp(16px, 4vw, 64px)`	Horizontal page margin — scales from mobile to wide desktop

Container

The .container class applies max-width and responsive gutters:

.container {
  width: 100%;
  max-width: var(--max-width);   /* 1440px */
  margin-inline: auto;
  padding-inline: var(--gutter); /* 16px → 64px fluid */
}

Grid system

Three grid classes cover the main layout patterns:

Class	Columns	Use case
`.grid-12`	12	Fine-grained layout, editorial
`.grid-3`	3	Card grids, feature sets
`.grid-2`	2	Two-up layouts, split content

All grids collapse to a single column below 768px.

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-gap);
}

Border tokens

Border conventions
Token	Value	Usage
	`2px`	Standard border weight. All borders in the system use this value.
	`#D8E0EB`	Default border color (light theme). Use for dividers, card borders.
	`#888888`	Subdued border for secondary separators

Convention: all borders are 2px solid. No 1px hairlines, no dashed borders except hr.inv on dark backgrounds.

Border utilities:

.b-box    { border: 2px solid var(--border); }
.b-top    { border-top: 2px solid var(--border); }
.b-bottom { border-bottom: 2px solid var(--border); }
.b-left   { border-left: 2px solid var(--border); }
.b-right  { border-right: 2px solid var(--border); }

Transition

Motion token
Token	Value	Usage
	`150ms ease`	Default CSS transition for hover and focus effects on all interactive elements

For entrance animations and scroll-triggered reveals, the system uses the Motion library with a custom easing: [0.16, 1, 0.3, 1] (fast in, soft out).

animate(el, { opacity: [0, 1], y: [14, 0] }, {
  easing: [0.16, 1, 0.3, 1],
  duration: 0.5
});

Responsive breakpoints

Breakpoint	Value	Intent
Wide	≥ 1440px	Max container clamps
Desktop	≥ 1024px	Full 3-col grids active
Tablet	≥ 900px	Sidebar layouts active
Mobile	< 768px	All grids → 1 column
Small	< 640px	Nav condensed, footer stacked

Previous
Colors Next
Overview