# Grid backgrounds

Graphite and Blueprint provide different pattern recipes. The same grid utilities use the active theme's pattern without checking a theme ID.

<h2 id="purpose">Where patterns apply</h2>

Use a pattern when a surface needs quiet structure: a documentation hero, console frame, settings shell, or reading sheet. Actions still use the active accent.

<h2 id="anatomy">Pattern recipes</h2>

Graphite Light and Graphite Dark use interrupted execution traces on a 28 px rhythm. Blueprint Light and Blueprint Dark build quiet 1 px minor and major rules on a 24 px cell.

<h2 id="usage">Grid surfaces</h2>

`Provider` injects the pattern utility classes with the rest of the kit stylesheet. The base utilities paint `--bd-pattern` over `--bd-canvas`. Add `.bd-bg-grid-fade` to taper the active pattern without fading the content.

<h2 id="details">Utility classes</h2>

`.bd-bg-grid` and `.bd-bg-grid-blueprint` render the active theme pattern. `.bd-bg-grid-dots` and `.bd-bg-grid-crosshair` use generated geometry from the current theme colors. `.bd-bg-hero-blueprint` combines the active pattern with the theme's hero wash.

<h2 id="accessibility">Legibility</h2>

Patterns stay quiet on purpose. `.bd-bg-grid-fade` places the selected pattern on a masked pseudo-layer, while foreground content stays opaque. Use a semantic layer when the content needs stronger separation.

<h2 id="tokens">Tokens</h2>

`BDThemeOverrides.grid` controls pattern geometry, image, size, and position. The theme's technical color family supplies generated line, dot, and crosshair colors. `bdBuildCssVars()` emits the `--bd-pattern*`, `--bd-grid*`, and `--bd-hero-pattern*` families.

<h2 id="related">Related</h2>

See [Provider](/docs/components/provider) for how the utility stylesheet is injected, [Section](/docs/components/section) for the frame a grid usually sits behind, and [Card](/docs/components/card) for the opaque surface that carries text above one.