<!-- source: openspec/changes/apply-connected-stack-coordinate-grid/deltas/design-components-background-patterns.md -->

# Delta — `current/design-components.md § Background patterns`

**Operation:** two edits to the `## Background patterns` section — the
Density-budget table + rationale, and the fade section (nested-wrapper CAD
fade). Apply verbatim.

> **Location note.** If `design-components.md § Background patterns` is not yet
> in `current/` (it may still be inbound via the
> `document-background-patterns-in-current` change), apply these edits to
> whichever file currently holds the density-budget table and the
> fade-compatibility matrix, and record the path in the PR body.

---

## Edit 1 — Density budget

Replace the budget table:

```
| Surface | Limit |
|---|---|
| Composition patterns | 1 per page |
| Tile patterns | 1 per section |
| Patterns total | 2 per page |
| Accent-tone patterns | 1 per page |
```

with:

```
| Surface | Limit |
|---|---|
| Composition patterns | 1 per page |
| Tile patterns | 1 per section |
| Patterns total | 3 per page |
| Accent-tone patterns | 1 per page |
| Spacing (governing) | ≥1 bare section between any two placements |
```

Replace the rationale paragraph:

```
Two patterns reads as punctuation; three reads as decoration. The
accent-tone budget is separate and tighter — terracotta is a precise
sparse signal across the studio system (eyebrows, hero brackets, step
numerals, pillar quotes), and one accent pattern spends that budget
hard. Doubling accent dilutes both the pattern instance and the
accent system above it.
```

with:

```
The failure mode the budget guards is patterns clustering or competing
until they read as decoration. The true constraint is spacing, not
count: placements separated by ≥1 bare section read as punctuation.
Three well-spaced placements across the 13-section home page (06
`connected-stack`, 10 `for-legacy`, 13 `closing-cta`) clear that bar;
the total-per-page cap is 3 (raised from 2 by D-DS-9). A fourth
placement on a page this length would crowd the spacing rule and should
be rejected on that basis.

The accent-tone budget is separate and tighter — terracotta is a
precise sparse signal across the studio system (eyebrows, hero
brackets, step numerals, pillar quotes), and one accent pattern spends
that budget hard. Doubling accent dilutes both the pattern instance and
the accent system above it. (CAD/08 at `connected-stack` is blueprint,
not accent — it does not touch this sub-budget.)
```

---

## Edit 2 — fade section: the nested-wrapper CAD fade

In the `#### Fade × tile compatibility` subsection, after the line:

```
`bg-pattern-cad` is the exception — it owns `mask-image` for its
crosshair geometry, and any `pattern-fade-*` mask silently replaces it.
To soften CAD, drop opacity.
```

append:

```
To **fade** CAD (not just dim it), nest: keep `bg-pattern-cad` on the
tile element and put `pattern-fade-*` on a **parent wrapper**.
`mask-image` applies to an element's whole painted subtree, so the
wrapper's fade mask composites over the already-masked CAD child — the
two masks multiply, the crosshairs survive, and the strip dissolves
toward content. This is distinct from the same-element pairing in the
matrix below (which silently overrides) and is the approved way to run
CAD in the bottom-strip idiom. First shipped at `connected-stack` (P5,
RAP-1265).

​```tsx
<div className="… pattern-fade-top">           {/* wrapper carries the fade mask */}
  <div className="absolute inset-0 bg-pattern-cad text-blueprint opacity-70" />
</div>
​```
```

In the compatibility matrix, the `cad` row stays `✗` for the
`pattern-fade-*` columns (the *same-element* pairing is still forbidden); add a
footnote marker to the `cad` row label pointing at the nested-wrapper note
above, e.g. `**cad** ‡` with `‡ same-element only; fade via parent wrapper —
see above.`

Finally, in the `### Anti-patterns` list, the entry:

```
- `pattern-fade-*` combined with `bg-pattern-cad`.
```

becomes:

```
- `pattern-fade-*` combined with `bg-pattern-cad` **on the same element**
  (silent mask override). Fading CAD via a parent wrapper is allowed and
  documented under § Fade × tile compatibility.
```
