> From [PageWeave Design](https://pageweave-design.pageweave.site) — a working library for agentic web development. Full index: [llms.txt](https://pageweave-design.pageweave.site/llms.txt)

# Composition & Backgrounds

Spatial grammar: asymmetry with intent, grid-breaking elements, and backgrounds built in layers.

- Section: Design
- Tags: layout composition asymmetry background

Flat solid backgrounds are the tell of defaulted design. Atmosphere comes from layered, intentional surfaces.

## Spatial composition

- **Asymmetry with intent**: offset columns (7/5 splits), overlapping media and text, diagonal flows. Randomness isn't asymmetry — place every break.
- **Grid-breaking elements**: one element per viewport may escape the container (a rotated badge, an oversized numeral bleeding off-grid). One.
- **Whitespace is pacing**: sections breathe 6–10rem apart in editorial/luxury registers; dense tools compress to 2–3rem. Consistency within a register.
- **Vertical rhythm**: pick a base unit (4px or 8px) and multiply. Aligned edges read as craft even when nothing else does.

## Layered backgrounds

### Grain (paper registers)

```css
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  opacity: .04; z-index: 9999;
  background-image: url("data:image/svg+xml,..."); /* fractalNoise SVG */
}
```

Or set `--noise: 1` in the theme and let daisyUI grain components.

### Blueprint grid (industrial)

```css
background-image:
  linear-gradient(color-mix(in oklab, var(--color-base-content) 5%, transparent) 1px, transparent 1px),
  linear-gradient(90deg, color-mix(in oklab, var(--color-base-content) 5%, transparent) 1px, transparent 1px);
background-size: 24px 24px;
```

### Radial atmosphere (editorial dark)

```css
background:
  radial-gradient(120% 90% at 85% -10%, color-mix(in oklab, var(--color-primary) 7%, transparent), transparent 55%),
  var(--color-base-100);
```

### Halftone dots (retro)

```css
background-image: radial-gradient(circle at center, rgb(0 0 0 / .08) 1px, transparent 1.5px);
background-size: 8px 8px;
```

## Rules

- One background idea per page, expressed consistently. Three textures = noise.
- Texture sits behind content at 3–8% visual weight; if you notice it before the headline, lower the opacity.
- `pointer-events: none` on all decorative overlays.
- Section separation: hairline rules beat shadow boxes in editorial registers; colored bands work in playful ones.