# Surface-type → pattern matrix

> **First decision, before any visual work:** what *kind* of surface is this? The surface type determines which patterns are legal. If a pattern isn't on the row for your surface, it's off-limits — even if you like it, even if the brand color would work.

Most pattern misuses in this system aren't "wrong color, wrong size" — they're "right pattern, wrong surface." The stadium block isn't bad. It's bad on a payments landing.

---

## The matrix

| Surface type | Loud moves OK? | Reach for | Do NOT reach for | Real example |
|---|---|---|---|---|
| **Admin chrome** (POS dashboards, internal tools) | ✗ | Mono eyebrows, neutrals, table chrome, KPI cards | Display sans, highlighter, stadium block | Dnero POS |
| **Data list page** (Products, Orders, Reports) | ✓ — one move only | Editorial lime under H1 · trend pills · toolbar pattern | Stadium block · italic-serif chrome · gradient | Dnero Dashboard / Products |
| **Reporting view** (analytics, historical) | ✗ | `--report` blue numerics · 5-dropdown filter row | Brand color on numbers · highlighter | Dnero Transactions |
| **Consumer storefront** (food, retail) | ✓ | Brand-fill category pills · big uppercase section heads · product cards | Italic serif chrome · highlighter · stadium block on product cards | BurgerFuel |
| **Consumer checkout** | ✗ | Two-column · transparent fee breakdown · big mono total | Brand-fill on every CTA · gradient · proof slop | BurgerFuel checkout |
| **Editorial / cultural splash** (events, brand moments) | ✓ — **the only home for stadium block** | Stadium block · display sans · bright color blocks · mono kicker | Highlighter · paper-quote facsimile · "trust" patterns | TicketFlo · kōdo splash · Sam Fender refs |
| **Trust-led marketing** (payments, donations, fintech sales) | ✗ | Mono detail · italic-serif accent (1 per page) · illustration · cream panel · concrete numbers · soft brand | Stadium block · Anton · fluorescent · numbered 01/02/03 · fake stats · "Featured On" strips · gradient | nativpay · givvv · kepa marketing |
| **Quiet moment** (confirmation, thank-you, empty state) | ✗ | Italic-serif heading · mono overline · mono caption · neutrals | Stadium block · brand color blocks · "error" framing on positive moments | The 1975 MSG ref · BurgerFuel confirmation |

---

## How to use this

1. **Before writing any code, name the surface type out loud.** "This is a trust-led marketing surface." If you can't name it, ask the user.
2. **Read across the row.** That's your menu. Patterns outside the row aren't options.
3. **If you want to use an off-row pattern, write down why first.** "I want the stadium block on this trust-led marketing page because ____." If you can't finish the sentence with a reason that survives a sales call with the audience, the pattern stays off.
4. **The brand brief overrides the matrix.** A specific project's `brand-brief.md` (e.g. `nativpay/brand-brief.md`) lists narrower ON/OFF patterns. Project beats system.

---

## Common surface-type confusions

- **"Marketing landing for a SaaS dev tool" is not trust-led marketing.** Stripe-style, Moov-style. Loud OK. Stadium block possible. Treat as editorial.
- **"Marketing landing for a payments processor selling to non-technical small businesses" IS trust-led.** Stadium block off. Anton off. Loud off.
- **"Brand moment on a trust-led product"** (e.g. a single editorial section deep on a kepa marketing site) — the surface type *here* is editorial, even though the parent product is trust-led. Use loud moves *for that section only*, and only if the rest of the surface earns the contrast.
- **"Internal tool with one report screen"** — the chrome is admin (quiet); the report screen specifically is reporting (blue numerics).
- **"Consumer storefront for a small biz our payments processor sold to"** — that's consumer storefront on *their* brand, not ours. Switch brand presets.

---

## The two patterns most often used wrong

1. **Stadium block.** Editorial-only. Putting it on trust-led marketing makes the brand read like a music tour announcement. Symptom: client says "feels too SaaS" or "doesn't fit our customer."
2. **Editorial lime highlighter.** List-page H1 only. Putting it on a marketing hero or a body word makes the page read like a Linear marketing site, not a domain product.

When in doubt on either, default to off and add later if the surface earns it.