features.seventies-capsule-stack · Capsule stack

A features pattern from Seventies Psychedelic, 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.seventies-capsule-stack". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A centred header, then features stacked as wide capsules on 2–11 (surface, fully rounded): a big orange numeral at the left end, title and one line beside it.
Slots
sectionLabel, title, features[3..5]
Grid areas
header 1-12 · capsules 2-11 (12-column grid, 1-based inclusive spans)
Tokens
bg #F7E8C6 · text #3A1D0C · heading #4A1F08 · accent #D2561E · accent2 #BF8400 · Shrikhand / Nunito · radius 32px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • A centred label and h2 (step 5). Features stack on 2–11 as wide capsules on `surface`, 2 units apart: a big orange numeral at the left end, then the title (h3) and one line of copy beside it.

What you get

What we do

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.

Layout tree (as in design/layout.json)
{
  "pattern": "features.seventies-capsule-stack",
  "kind": "features",
  "grid": {
    "header": "1-12",
    "capsules": "2-11"
  },
  "slots": [
    "sectionLabel",
    "title",
    "features[3..5]"
  ],
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 6,
    "children": [
      {
        "el": "box",
        "span": "1-12",
        "gap": 2,
        "align": "center",
        "children": [
          {
            "el": "text",
            "color": "link",
            "slot": "sectionLabel",
            "role": "label",
            "align": "center"
          },
          {
            "el": "text",
            "slot": "title",
            "role": "h2",
            "step": 5,
            "align": "center",
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 18
          }
        ]
      },
      {
        "el": "repeat",
        "span": "2-11",
        "slot": "features",
        "min": 3,
        "max": 5,
        "layout": "list",
        "gap": 2,
        "of": {
          "el": "box",
          "bg": "surface",
          "gap": 4,
          "pad": [
            3,
            5
          ],
          "children": [
            {
              "el": "grid",
              "cols": 10,
              "gap": 3,
              "align": "center",
              "children": [
                {
                  "el": "text",
                  "span": "1-2",
                  "color": "link",
                  "slot": "number",
                  "role": "number",
                  "step": 5,
                  "tracking": "tight",
                  "leading": "tight"
                },
                {
                  "el": "box",
                  "span": "3-10",
                  "gap": 1,
                  "children": [
                    {
                      "el": "text",
                      "slot": "title",
                      "role": "h3",
                      "tracking": "tight",
                      "leading": "tight"
                    },
                    {
                      "el": "text",
                      "slot": "body",
                      "role": "small",
                      "maxCh": 50
                    }
                  ]
                }
              ]
            }
          ]
        }
      }
    ]
  }
}
Component example: reference/features.seventies-capsule-stack.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>features.seventies-capsule-stack — Seventies Psychedelic</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: var(--section) 0; }
  .head { grid-column: 1 / 13; text-align: center; margin-bottom: calc(var(--unit) * 6); }
  .head p { color: var(--link); font-weight: 800; } .head h2 { font-size: var(--step-3); max-width: 18ch; margin: 8px auto 0; }
  ol { grid-column: 2 / 12; list-style: none; padding: 0; display: grid; gap: calc(var(--unit) * 2); }
  li { display: flex; align-items: center; gap: calc(var(--unit) * 4); background: var(--surface); border-radius: 999px; padding: calc(var(--unit) * 3) calc(var(--unit) * 5); }
  li .num { font-size: var(--step-3); color: var(--link); min-width: 1.2em; }
  li h3 { font-size: var(--step-1); } li p { max-width: 50ch; font-size: calc(var(--base) * 0.9); }
  @media (max-width: 640px) { li { border-radius: var(--radius); flex-direction: column; align-items: start; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="grid">
    <div class="head"><p>What's on</p><h2>Every night has a groove</h2></div>
    <ol>
      <li><span class="num">1</span><div><h3>Soul Mondays</h3><p>Northern soul 45s from the owner's own collection, played start to finish.</p></div></li>
      <li><span class="num">2</span><div><h3>Bring-a-record Wednesdays</h3><p>Bring one LP; we play one side and pour you a coffee on the house.</p></div></li>
      <li><span class="num">3</span><div><h3>Funk Fridays</h3><p>A guest selector, a dance floor the size of a rug, and no requests.</p></div></li>
    </ol>
  </div>
</section>
</body>
</html>

Other patterns in this design

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