Skip to content
Binary Dreams UI
Binary Dreams UI Kit reference

Grid backgrounds

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

Open Markdown Full LLM reference

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 the gradient wash for most page heroes. Reserve a grid for a technical hero that benefits from drafting structure. Do not combine both backgrounds.

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 renders only the theme’s gradient wash.

A page hero always has a bottom border from its layout. A gradient surface does not use a perimeter border.

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.