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
Centred label and step-5 title, then four or six capsule cards in two columns across 1–12: a step-4 numeral on the left third, the step-2 title and a body-size line beside it.
Slots
sectionLabel, title, features[4..6]
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). Four or six features as wide rounded `surface` capsules in two columns across 1–12, 32 px apart and padded 32 × 40 px: a big orange numeral (step 4) on the left third, then the title (step 2) and one line of body 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.

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.seventies-capsule-stack",
  "kind": "features",
  "grid": {
    "header": "1-12",
    "capsules": "2-11"
  },
  "slots": [
    "sectionLabel",
    "title",
    "features[4..6]"
  ],
  "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": "1-12",
        "slot": "features",
        "min": 4,
        "max": 6,
        "layout": "grid",
        "cols": 2,
        "gap": 4,
        "of": {
          "el": "box",
          "bg": "surface",
          "gap": 2,
          "pad": [
            4,
            5
          ],
          "children": [
            {
              "el": "grid",
              "cols": 10,
              "gap": 3,
              "align": "center",
              "children": [
                {
                  "el": "text",
                  "span": "1-3",
                  "color": "link",
                  "slot": "number",
                  "role": "number",
                  "step": 4,
                  "tracking": "tight",
                  "leading": "tight"
                },
                {
                  "el": "box",
                  "span": "4-10",
                  "gap": 1,
                  "children": [
                    {
                      "el": "text",
                      "slot": "title",
                      "role": "h3",
                      "step": 2,
                      "tracking": "tight",
                      "leading": "tight"
                    },
                    {
                      "el": "text",
                      "slot": "body",
                      "role": "body",
                      "maxCh": 44
                    }
                  ]
                }
              ]
            }
          ]
        }
      }
    ]
  }
}
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: clamp(48px, 7vw, var(--step-4)); line-height: 0.95; max-width: 18ch; margin: 8px auto 0; }
  ol { grid-column: 1 / 13; list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--unit) * 4); }
  li { display: flex; align-items: center; gap: calc(var(--unit) * 4); background: var(--surface); border-radius: var(--radius); padding: calc(var(--unit) * 5); }
  li .num { font-size: var(--step-4); line-height: 0.9; color: var(--link); min-width: 1.4em; }
  li h3 { font-size: var(--step-2); line-height: 1; } li p { max-width: 44ch; margin-top: 8px; }
  @media (max-width: 640px) { ol { grid-template-columns: 1fr; } li { 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>
      <li><span class="num">4</span><div><h3>Sunday listening</h3><p>One classic album, played loud on the big system, with brunch until three.</p></div></li>
    </ol>
  </div>
</section>
</body>
</html>

Other patterns in this design

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