features.neobrutal-shadow-cards · Shadow cards

A features pattern from Neo-Brutalism, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 3. Give the section root data-pattern="features.neobrutal-shadow-cards". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Features are white bordered cards with the hard shadow, two per row across the full grid; each opens with a coloured square and a mono number.
Slots
title, sectionLabel, features[4..6]
Grid areas
header 1-12 · cards 1-12 (12-column grid, 1-based inclusive spans)
Notes
Two columns, never three. Each card: 3px border, radius token, hard shadow; the square is accent on every card.
Tokens
bg #FFF4DE · text #111111 · heading #000000 · accent #FF5FA2 · accent2 #00BCA1 · Archivo Black / Space Grotesk · radius 8px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • Header row: the h2 (step 5, heaviest weight) left and a tilted accent2 sticker label right. Then 4 or 6 white bordered cards two per row across the full grid, each with a filled accent square (md) and a mono number on one line, an h3 at step 3 and the heaviest weight, and a lead paragraph (max 44 ch). Every card has the hard shadow. Never three per row.

What we do

What you get

01

Positioning

Find the one sentence your best customers already believe.

02

Identity systems

Logos, type and colour that work on a factory floor and a pitch deck.

03

Websites

Fast, editable sites built on the CMS your team already knows.

04

Sales enablement

Decks, one-pagers and demos your reps actually use.

05

Product naming

Names that survive trademark search and a noisy trade show.

06

Brand governance

Guidelines as a living site, not a forgotten PDF.

Layout tree (as in design/layout.json)
{
  "pattern": "features.neobrutal-shadow-cards",
  "kind": "features",
  "grid": {
    "header": "1-12",
    "cards": "1-12"
  },
  "slots": [
    "title",
    "sectionLabel",
    "features[4..6]"
  ],
  "notes": "Two columns, never three. Each card: 3px border, radius token, hard shadow; the square is accent on every card.",
  "tree": {
    "el": "box",
    "gap": 6,
    "children": [
      {
        "el": "box",
        "mobile": "keep",
        "dir": "row",
        "gap": 3,
        "align": "end",
        "justify": "between",
        "wrap": true,
        "children": [
          {
            "el": "text",
            "slot": "title",
            "role": "h2",
            "step": 5,
            "maxCh": 18
          },
          {
            "el": "text",
            "bg": "accent2",
            "color": "onAccent2",
            "slot": "sectionLabel",
            "role": "label",
            "weight": 700,
            "rotate": 3
          }
        ]
      },
      {
        "el": "repeat",
        "slot": "features",
        "min": 4,
        "max": 6,
        "layout": "grid",
        "cols": 2,
        "gap": 4,
        "of": {
          "el": "box",
          "bg": "surface",
          "gap": 2,
          "pad": [
            4,
            4
          ],
          "border": "all",
          "children": [
            {
              "el": "box",
              "mobile": "keep",
              "dir": "row",
              "gap": 2,
              "align": "center",
              "children": [
                {
                  "el": "shape",
                  "kind": "square",
                  "size": "md",
                  "fill": "accent"
                },
                {
                  "el": "text",
                  "slot": "number",
                  "role": "label",
                  "font": "mono"
                }
              ]
            },
            {
              "el": "text",
              "slot": "title",
              "role": "h3",
              "step": 3
            },
            {
              "el": "text",
              "slot": "body",
              "role": "lead",
              "maxCh": 44
            }
          ]
        }
      }
    ]
  }
}
Component example: reference/features.neobrutal-shadow-cards.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>features.neobrutal-shadow-cards — Neo-Brutalism</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: calc(var(--unit) * 14) 0; }
  .head { display: flex; justify-content: space-between; align-items: end; gap: calc(var(--unit) * 3); flex-wrap: wrap; margin-bottom: calc(var(--unit) * 6); }
  .head h2 { font-size: var(--step-5); max-width: 18ch; }
  .head .sticker { transform: rotate(3deg); }
  .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--unit) * 4); }
  .card { padding: calc(var(--unit) * 4); display: grid; gap: calc(var(--unit) * 2); align-content: start; }
  .card .tag { display: flex; align-items: center; gap: calc(var(--unit) * 2); }
  .card .sq { width: 20px; height: 20px; background: var(--accent); border: var(--bw) solid var(--border); }
  .card h3 { font-size: var(--step-3); }
  .card p { max-width: 48ch; }
  @media (max-width: 640px) { .cards { grid-template-columns: 1fr; } .head h2 { font-size: var(--step-3); } }
</style>
</head>
<body>
<section class="wrap">
  <div class="head"><h2>Everything an invoice should do</h2><span class="sticker label">4 things, no fluff</span></div>
  <div class="cards">
    <article class="card box"><p class="tag"><span class="sq"></span><span class="mono">01</span></p><h3>Pay links</h3><p>Every invoice is a link. Clients pay by card, bank or wallet without making an account.</p></article>
    <article class="card box"><p class="tag"><span class="sq"></span><span class="mono">02</span></p><h3>Polite reminders</h3><p>Three nudges, spaced out and written like a human. You choose the tone; we send them.</p></article>
    <article class="card box"><p class="tag"><span class="sq"></span><span class="mono">03</span></p><h3>Tax that adds up</h3><p>VAT, GST and sales tax worked out per client, per country, with receipts your accountant likes.</p></article>
    <article class="card box"><p class="tag"><span class="sq"></span><span class="mono">04</span></p><h3>Payouts in a day</h3><p>Money lands in your account the next working day. No holds, no surprise fees.</p></article>
  </div>
</section>
</body>
</html>

Other patterns in this design

Whole design · Spec bundle (JSON) · On the style page