Line Art
The only imagery in the system is generative line-art — hundreds of sub-pixel strokes at low alpha, drawn by math, never photographed. Light is implied purely by line density. It is the house texture: calm, infinite, and free of any image files to ship.
Band fields
Wide fields on a 1000×400 viewBox, stretched full-bleed. Use them as hero backdrops and section bands behind copy.
Centered fields
Square fields on a 1000×1000 viewBox rendered cover — self-contained motifs for tiles, feature icons, and the anchor of a sticky rail.
Stroke & opacity
Every stroke is currentColor at stroke-width: 0.8 with vector-effect: non-scaling-stroke, and a per-line opacity inside the 0.04–0.20 band. Nothing brighter — the art is texture, not a picture. A single focal node may sit at the top of the band; everything else stays a whisper.
currentColor inheritance
Because the strokes inherit color, a field flips with the theme automatically — white lines on black, black lines on white — with no extra logic. The same variant is shown in both themes below.
When to use
Do
- Reach for a field behind a hero, a section band, or a feature tile.
- Let it inherit
colorso it tracks the theme. - Fade it toward any overlaid copy so text keeps its contrast.
- Keep it to one field per view — it is a backdrop, not a pattern fill.
Don’t
- Don’t raise the stroke opacity past the band to make it “pop”.
- Don’t place unfaded body copy directly over a dense field.
- Don’t tint it with a status or accent color as decoration.
- Don’t animate more than one field entering at a time.
Animation budget
Fields draw in front-to-back over --pds-dur-draw (~1400ms) on the ease-out curve — the signature entrance. Animate at most one field per view, and only on first paint. Under prefers-reduced-motion the final frame renders instantly; pass animate=false to opt a given field out entirely (as the light/dark pair above does).