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

Amber glow

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

Light-surface variant

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

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

Usage rules

  • 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.
07 · Pattern // has solutions