Neo-Brutalism / Gumroad Pastels

/* Synthesized from Trova family: Neo-Brutalism / Gumroad Pastels (neo-brutalism-pastels) */
/* Evidence base: 4 curated reference(s) · Primary contrast 19:1 */
:root {
  /* Surface & Polarity (Daylight-paper dominant) */
  --surface-ground: #f4f4f0;
  --surface-elevated: #111827;
  --text-primary: #000000;
  --accent-primary: #0d0c22;
  --border-hairline: color-mix(in srgb, #000000 16%, transparent);

  /* Typography (Loadable open-source stack mapped from observed specimens) */
  --font-display: "IBM Plex Mono", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Structural Geometry */
  --radius-surface: 0px;
  --measure-body: 62ch;
}

# Neo-Brutalism / Gumroad Pastels — style sheet

> High-contrast thick 3px black borders, hard unblurred drop shadows (box-shadow: 4px 4px 0 #000), and canary yellow accents.

Derived from 4 curated reference(s) in the `neo-brutalism-pastels` family. Counts are how many references use a value, so a value used once is a lead, not a rule. Paste this into DESIGN.md as a starting system, then verify against the images.

## Type

- IBM Plex Mono — 2/4
- Inter — 2/4
- Circular — 1/4
- JetBrains Mono — 1/4
- Mabry Pro — 1/4
- Plus Jakarta Sans — 1/4
- Whyte Inktrap — 1/4

## Color

- `#f4f4f0` light neutral — 4/4
- `#000000` dark neutral — 2/4
- `#0d0c22` dark neutral — 1/4
- `#111827` dark neutral — 1/4
- `#7c3aed` chromatic — 1/4
- `#a259ff` chromatic — 1/4
- `#f24822` chromatic — 1/4
- `#ec4899` chromatic — 1/4
- `#23a094` chromatic — 1/4
- `#0bcf83` chromatic — 1/4

Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1):
- `#000000` / `#f4f4f0` — 19:1
- `#0d0c22` / `#f4f4f0` — 17.4:1
- `#111827` / `#f4f4f0` — 16.1:1
- `#7c3aed` / `#f4f4f0` — 5.2:1

## Moves

### component pattern

- Speaker cards snap into an interlocking bento grid where hovering a speaker tilts their sticker badge by `-3deg` and reveals their session track in a high-contrast footer ribbon. — 178-figma-config-bold-geometric-sticker-badges-offset-black-drop-shadows
- Highlight the primary Merchant-of-Record pricing tier with a `#fde047` lemon-yellow surface fill, `2px solid #111827` border, and a rotated corner stamp showing global tax compliance included. — 179-lemon-squeezy-high-saturation-pastel-billing-blocks-brutalist-tabs
- Center an interactive `buymeacoffee.com/yourname` URL claim input directly inside the hero with a `#ffdd00` button that checks handle availability on keyup. — 180-buy-me-a-coffee-warm-cream-surface-pill-creator-counter-hard-edge-cta

### typography

- Pair deep inktrap display headlines (`Whyte Inktrap` at `clamp(3.2rem, 7vw, 6.5rem)`) with pill-shaped monospace time-slot badges bordered in `2px solid #000000`. — 178-figma-config-bold-geometric-sticker-badges-offset-black-drop-shadows
- Support-count badges and live creator payout tickers use heavy bold numerals inside `2px` bordered capsules to establish social proof above the fold. — 180-buy-me-a-coffee-warm-cream-surface-pill-creator-counter-hard-edge-cta

### texture/material

- Every card, button, and price tag combines a `2px solid #000000` outline with an unblurred `4px 4px 0px #000000` offset shadow that translates `(-2px, -2px)` on hover and collapses to `(0px, 0px)` on active press. — 177-gumroad-hard-shadow-pastel-cards-2px-ink-border-creator-storefront

### color

- Assign high-saturation pastel fills (`#ff90e8` bubblegum pink, `#ffc900` marigold, `#23a094` teal) to individual product categories while keeping all text and borders in pure `#000000` for guaranteed AAA contrast. — 177-gumroad-hard-shadow-pastel-cards-2px-ink-border-creator-storefront

### grid/layout

- Stack tax calculation, fraud prevention, and subscription churn metrics as overlapping cards with explicit `1px` dark borders so complex fintech workflows feel approachable. — 179-lemon-squeezy-high-saturation-pastel-billing-blocks-brutalist-tabs

## References

- 177-gumroad-hard-shadow-pastel-cards-2px-ink-border-creator-storefront — Gumroad — Hard-Shadow Pastel Cards & 2px Ink Border Creator Storefront (exemplar)
- 178-figma-config-bold-geometric-sticker-badges-offset-black-drop-shadows — Figma Config — Bold Geometric Sticker Badges & Offset Black Drop-Shadows
- 179-lemon-squeezy-high-saturation-pastel-billing-blocks-brutalist-tabs — Lemon Squeezy — High-Saturation Pastel Billing Blocks & Brutalist Tabs
- 180-buy-me-a-coffee-warm-cream-surface-pill-creator-counter-hard-edge-cta — Buy Me a Coffee — Warm Cream Surface, Pill Creator Counter & Hard-Edge CTA