features.memphis-tilted-cards · Tilted cards

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

Rule
Features as outlined cards two per row, alternately tilted ±2° with alternating fills; each opens with a confetti shape, then the title and text.
Slots
title, features[4..6]
Grid areas
title 1-7 · star 11-12 · cards 1-12 (12-column grid, 1-based inclusive spans)
Notes
Odd cards: surface fill, rotate −2°; even cards: surfaceAlt fill, rotate 2°. Cycle the opening shape: triangle, circle, cross, half-circle.
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #FF5FA2 · accent2 #9AAE00 · Bricolage Grotesque / DM Sans · radius 12px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • A section title (h2 at step 5, heaviest weight) rotated −2° on 1–7 with a star on 11–12. Then four or six cards two per row with 32 px gaps. Each card: 3 px black outline, hard black offset shadow (6 px), alternating fills (surface / surfaceAlt) and alternating tilt (−2° / 2°); inside, a 64 px shape (md; cycling triangle, circle, cross, half-circle in accent/accent2), the title (h3 at step 3) and a short lead paragraph. At phone width one per row, tilt reduced to ±1°.

What we do

Positioning

Find the one sentence your best customers already believe.

Identity systems

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

Websites

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

Sales enablement

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

Product naming

Names that survive trademark search and a noisy trade show.

Brand governance

Guidelines as a living site, not a forgotten PDF.

Layout tree (as in design/layout.json)
{
  "pattern": "features.memphis-tilted-cards",
  "kind": "features",
  "grid": {
    "title": "1-7",
    "star": "11-12",
    "cards": "1-12"
  },
  "slots": [
    "title",
    "features[4..6]"
  ],
  "notes": "Odd cards: surface fill, rotate −2°; even cards: surfaceAlt fill, rotate 2°. Cycle the opening shape: triangle, circle, cross, half-circle.",
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 6,
    "align": "center",
    "children": [
      {
        "el": "text",
        "span": "1-7",
        "slot": "title",
        "role": "h2",
        "step": 5,
        "leading": "tight",
        "rotate": -2
      },
      {
        "el": "shape",
        "span": "11-12",
        "mobile": "hide",
        "kind": "star",
        "size": "md",
        "fill": "accent2"
      },
      {
        "el": "repeat",
        "span": "1-12",
        "slot": "features",
        "min": 4,
        "max": 6,
        "layout": "grid",
        "cols": 2,
        "gap": 4,
        "of": {
          "el": "box",
          "bg": "surface",
          "gap": 2,
          "pad": [
            5,
            4
          ],
          "border": "all",
          "children": [
            {
              "el": "shape",
              "kind": "triangle",
              "size": "md",
              "fill": "accent"
            },
            {
              "el": "text",
              "slot": "title",
              "role": "h3",
              "step": 3
            },
            {
              "el": "text",
              "slot": "body",
              "role": "lead",
              "maxCh": 40
            }
          ]
        }
      }
    ]
  }
}
Component example: reference/features.memphis-tilted-cards.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>features.memphis-tilted-cards — Memphis</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: 104px 0; }
  h2 { font-size: var(--step-5); transform: rotate(-2deg); margin-bottom: 48px; max-width: 16ch; }
  .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
  .card { padding: 28px 24px; display: grid; gap: 12px; background: var(--surface); transform: rotate(-2deg); }
  .card:nth-child(even) { background: var(--sky); transform: rotate(2deg); }
  .card .shape { width: 40px; }
  .card h3 { font-size: var(--step-3); }
  @media (max-width: 640px) { .cards { grid-template-columns: 1fr; } .card, .card:nth-child(even) { transform: rotate(-1deg); } }
</style>
</head>
<body>
<section class="wrap">
  <h2>Why the queue goes round the block</h2>
  <div class="cards">
    <div class="card panel"><span class="shape tri" aria-hidden="true"></span><h3>Baked at 5 a.m.</h3><p>Every doughnut is fried the morning you eat it. When they're gone, they're gone.</p></div>
    <div class="card panel"><span class="shape dot" style="background: var(--pink)" aria-hidden="true"></span><h3>Real butter, real fruit</h3><p>Glazes made from berries, citrus and brown butter — no flavourings out of a bottle.</p></div>
    <div class="card panel"><span class="shape dot" style="background: var(--lime); border-radius: 0" aria-hidden="true"></span><h3>Party boxes</h3><p>Twelve to sixty pieces, decorated to your theme, ready with 48 hours' notice.</p></div>
    <div class="card panel"><span class="shape tri" aria-hidden="true"></span><h3>Vegan Fridays</h3><p>The whole counter goes plant-based once a week. Nobody notices until they ask.</p></div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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