Skip to content
Binary Dreams
Binary UIKit reference Stable

Grid backgrounds

Theme-aware pattern utilities for Graphite traces and Blueprint grids.

Open Markdown Full LLM reference

Interactive example

Grid backgrounds

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

Where patterns apply

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.

Pattern recipes

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.

Grid surfaces

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.

Utility classes

.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.

Legibility

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.

Tokens

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.

See Provider for how the utility stylesheet is injected, Section for the frame a grid usually sits behind, and Card for the opaque surface that carries text above one.