Pitvolt Brand pitvolt.com →
07 - Atmosphere & layout

The stack every page sits on.

Gradient, orbs, glass, noise - in our palette, in that order. Then an 8-pt spacing scale and six radii carry the layout. No stock photography anywhere; the atmosphere does that job.

The atmospheric stack

Glass panel · backdrop-blur
Gradient + orbs + glass + noise
Gradient

180deg, #0A0A0A → #0F0A05 - warmer near-black at the bottom. Heroes add a yellow radial wash upper-left, clay lower-right.

Orbs

2–3 per section, blurred 160px (80px mobile), yellow at 25%, clay at 20%, drifting 60s. Mobile shows at most one.

Glass

6–10% off-white fill, 10–20px blur, 1px translucent border. One layer per region - never glass on glass.

Noise

4% SVG turbulence overlay, mix-blend overlay. Kills gradient banding, adds grain depth.

Spacing

8-pt scale. Section rhythm is clamp(80px, 12vw, 100px) on mobile, clamp(120px, 9vw, 160px) on desktop. Container max 1280px; gutters 20 mobile / 40 desktop.

space-1
4
space-2
8
space-3
12
space-4
16
space-5
24
space-6
32
space-7
48
space-8
64
section-y
120 mobile → 160 desktop

Radii

Big panels take 28 (r-xl). Chips take the pill. Nothing in between gets invented.

4r-xs
8r-sm
12r-md
20r-lg
28r-xl
pill

Layout rules

Do

Asymmetric grids. 5fr/7fr splits on desktop - eyebrow and headline left, content right. Avoids centered-everything monotony.

Don't

No three-or-more-column tile grids in marketing layouts. One column mobile, max two desktop.

Do

Shadows almost never. Two exceptions: the glass inset highlight, and the yellow halo on the primary CTA.

Don't

No stock photography. Image slots reserve 16:9 space (CLS = 0) and ship empty until we have the real photo.