// chapter 07

Pattern

Two structural elements: a 32px background grid and a soft Amber glow. Used as quiet structure, never as decoration.

Background grid

32px × 32px grid. Stroke rgba(255,255,255,0.025) on dark surfaces. Fades out before content blocks.

.pattern-grid-dark · brand/tokens/pattern.css

Radial gradient, 18% opacity at center, blur 40px, 380×380. Sparingly. One per viewport. Position varies with composition; default top-right.

.pattern-amber-glow · brand/tokens/pattern.css

Same grid, stroke rgba(0,0,0,0.04). Used for print and light-surface contexts.

.pattern-grid-light · brand/tokens/pattern.css

Grid sits behind hero areas. Fades out before main content blocks for readability.
Glow is a focal accent — never a fill, never repeating.
One glow per viewport, no more.
Both patterns are decorative — they never carry information that screen readers need.