Textures
Optional pure-CSS background patterns. No dependencies, token-driven, and they follow the theme and the mode.
The utilities
Three opt-in classes, layered onto whatever background color the element already has. Line and grid inks derive from the foreground token via color-mix, so they adapt to every theme and mode automatically; the noise tile is a low-opacity SVG grain that reads on any surface.
texture-noise
SVG grain — paper-like tooth for large flat surfaces.
texture-lines
Horizontal hairlines — editorial rhythm for heroes and CTAs.
texture-grid
Blueprint grid — technical feel for process or spec sections.
Usage
<section className="bg-surface-page texture-noise">
...
</section>Textures are seasoning, not structure: use at most one per section, keep them on large surfaces (heroes, section backgrounds, empty states), and never put them behind dense text or small controls. They are decorative by design — at 5% ink they have no effect on contrast compliance.