§ 001 · Grid & Layout

Grid & Layout

12-column grid, responsive from desktop to mobile. 8px base spacing unit. 6% viewport side margins with clamp() floor and ceiling.

§ 002 · Web Grid

12-Column Grid

1

2

3

4

5

6

7

8

9

10

11

12

12-column desktop grid · 24px gutters

4 col

8 col

Example: 4+8 split (sidebar + main content)

4 col

Example: 4+4+4 card grid (product/feature cards)

Container CSS

.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(20px, 6vw, 80px); /* 6% of viewport */
}

§ 003 · Breakpoints

Responsive Breakpoints

Label	Width	Grid	Notes
Mobile	< 560px	1 col	Single column, full width cards
Small Tablet	560px - 767px	2 col	2-column card grids
Tablet	768px - 899px	2-3 col	Navigation collapses to hamburger
Small Desktop	900px - 1199px	12 col	Standard 3-col card grids
Desktop	1200px +	12 col	Max container width applied

§ 004 · Spacing System

Spacing System

Base unit: 8px. All spacing is a multiple of 8.

4px micro Inline spacing between badge and label

8px xs Icon-to-text gap

12px sm Tight padding

16px md Default paragraph margin-bottom

24px lg Card padding, grid gap

32px xl Component padding

40px 2xl Section sub-component gap

64px 3xl Hero element spacing

80px section Small viewport section padding

104px section-lg Desktop section padding

§ 005 · Section Spacing

Section Vertical Rhythm

Context	Value
Section vertical padding (mobile)	80px
Section vertical padding (desktop 768px+)	104px
Component gap (within section)	40px - 64px
Between heading and content	20px - 40px
Card gap	24px - 32px

§ 006 · Graph Paper Texture

Graph Paper Grid Texture

The Archival aesthetic uses a hairline grid as page texture. Applied to hero sections and high-impact panels only. Not on every section (visual fatigue).

Graph paper texture active here

72px cells · rgba(191, 185, 173, 0.07) · barely perceptible

.graph-grid {
  background-image:
    linear-gradient(rgba(191, 185, 173, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(191, 185, 173, 0.07) 1px, transparent 1px);
  background-size: 72px 72px;
}

§ 007 · Section Alternation

Section Background Pattern

Odd sections

--bg (Warm Parchment)

Primary page rhythm

Even sections

--bg-alt (Bright Grey)

Alternating rhythm

Feature sections

--surface (White)

Maximum contrast, high-priority content

Dark sections

#2B2C2E (Charleston)

High-impact panels, OS context