features.neo-grotesk-spec-sheet · Spec sheet

A features pattern from Neo-grotesk Minimal, 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.neo-grotesk-spec-sheet". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Label, a section title at step 5, a lead and a 4:3 product image (hidden on phone) on 1–5; on 7–12 six hairline-ruled rows, each the feature name (weight 500) on the left third and its description (muted) on the right.
Slots
sectionLabel, title, lead, image, features[6..6]
Grid areas
heading 1-5 · image 1-5 · rows 7-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #F95620 · accent2 #9E2C00 · Geist / Geist · radius 2px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • Columns 1–5: a tiny uppercase label, the title at step 5, weight 500, max ~16 ch, a muted lead paragraph (max 40 ch) and under it a 4:3 product image (no frame, radius or shadow) so the left half carries as much as the rows. Columns 7–12: six feature rows separated by hairlines with 24 px vertical padding. Each row is a 6-column grid: the feature name (body, weight 500) on 1–2 and its description (body, muted, max 46 ch) on 3–6. At phone width the product image hides, the heading block sits above the rows and the rows keep their two columns.

What you get

What we do

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

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.neo-grotesk-spec-sheet",
  "kind": "features",
  "grid": {
    "heading": "1-5",
    "image": "1-5",
    "rows": "7-12"
  },
  "slots": [
    "sectionLabel",
    "title",
    "lead",
    "image",
    "features[6..6]"
  ],
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 6,
    "align": "start",
    "children": [
      {
        "el": "box",
        "span": "1-5",
        "gap": 4,
        "children": [
          {
            "el": "text",
            "slot": "sectionLabel",
            "role": "eyebrow",
            "step": -1,
            "transform": "uppercase",
            "tracking": "wide"
          },
          {
            "el": "text",
            "slot": "title",
            "role": "h2",
            "step": 5,
            "weight": 500,
            "tracking": "tight",
            "leading": "tight",
            "maxCh": 16
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "lead",
            "role": "body",
            "maxCh": 40
          },
          {
            "el": "media",
            "mobile": "hide",
            "slot": "image",
            "aspect": "4/3",
            "treatment": "product"
          }
        ]
      },
      {
        "el": "repeat",
        "span": "7-12",
        "slot": "features",
        "min": 6,
        "max": 6,
        "layout": "list",
        "gap": 0,
        "divider": true,
        "of": {
          "el": "grid",
          "mobile": "keep",
          "cols": 6,
          "gap": 3,
          "pad": [
            3,
            0
          ],
          "children": [
            {
              "el": "text",
              "span": "1-2",
              "slot": "title",
              "role": "body",
              "weight": 500
            },
            {
              "el": "text",
              "span": "3-6",
              "color": "textMuted",
              "slot": "body",
              "role": "body",
              "maxCh": 46
            }
          ]
        }
      }
    ]
  }
}
Component example: reference/features.neo-grotesk-spec-sheet.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>features.neo-grotesk-spec-sheet — Neo-grotesk Minimal</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: var(--section) 0; } section .grid { align-items: start; }
  .head { grid-column: 1 / 6; display: grid; gap: 24px; }
  .head h2 { font-size: var(--step-5); max-width: 16ch; } .head p { max-width: 40ch; }
  /* Product shot: no frame, radius or shadow; it balances the six rows on the right. */
  .head img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--hairline); }
  .sheet { grid-column: 7 / 13; }
  .row { display: grid; grid-template-columns: 2fr 4fr; gap: 24px; padding: 24px 0; border-top: 1px solid var(--hairline); }
  .row:first-child { border-top: 0; padding-top: 0; }
  @media (max-width: 640px) { .head h2 { font-size: var(--step-3); } .head img { display: none; } .sheet { margin-top: 40px; } }
  .row:last-child { padding-bottom: 0; }
  .row dt { font-weight: 500; } .row dd { margin: 0; color: var(--muted); max-width: 46ch; }
</style>
</head>
<body>
<section class="wrap">
  <div class="grid">
    <div class="head">
      <p class="label">Specification</p>
      <h2>What a deploy includes</h2>
      <p class="muted">Everything below ships on every plan. No add-ons, no tiers inside tiers.</p>
      <img src="deploy-console.webp" alt="The deploy console showing a build finishing in 38 seconds" width="800" height="600">
    </div>
    <div class="sheet">
      <dl>
        <div class="row"><dt>Build cache</dt><dd>Content-addressed, shared across branches. Cold builds under 40 seconds.</dd></div>
        <div class="row"><dt>Rollbacks</dt><dd>Every deploy is immutable. Roll back to any of the last 500 in one command.</dd></div>
        <div class="row"><dt>Logs</dt><dd>Structured, searchable for 30 days, streamed to your own bucket if you prefer.</dd></div>
        <div class="row"><dt>Regions</dt><dd>Oslo, Frankfurt, Virginia and Singapore. Pin a project to one or run in all four.</dd></div>
      </dl>
    </div>
  </div>
</section>
</body>
</html>

Other patterns in this design

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