cta.neo-grotesk-one-line · One line

A cta pattern from Neo-grotesk Minimal, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 7. Give the section root data-pattern="cta.neo-grotesk-one-line". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
No coloured band. A hairline, then on one baseline: the headline at step 6, weight 500, on 1–7; a short muted note on 8–10; a text link with an arrow on 11–12 (the accent's one use on the screen).
Slots
headline, body, cta
Grid areas
headline 1-7 · note 8-10 · cta 11-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

  • No coloured band. A hairline, then bottom-aligned on one line: the headline at step 6, weight 500, on 1–7 (max ~16 ch, two lines); a short muted note on 8–10; a text link with an arrow on 11–12 (the accent colour's one use on the screen). At phone width the three parts stack.

Have a hard thing to explain?

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.

Start a project
Layout tree (as in design/layout.json)
{
  "pattern": "cta.neo-grotesk-one-line",
  "kind": "cta",
  "grid": {
    "headline": "1-7",
    "note": "8-10",
    "cta": "11-12"
  },
  "slots": [
    "headline",
    "body",
    "cta"
  ],
  "tree": {
    "el": "grid",
    "gap": 3,
    "rowGap": 6,
    "align": "end",
    "children": [
      {
        "el": "divider",
        "span": "1-12",
        "weight": 1
      },
      {
        "el": "text",
        "span": "1-7",
        "slot": "headline",
        "role": "h2",
        "step": 6,
        "weight": 500,
        "tracking": "tight",
        "leading": "tight",
        "maxCh": 16
      },
      {
        "el": "text",
        "span": "8-10",
        "color": "textMuted",
        "slot": "body",
        "role": "body",
        "maxCh": 36
      },
      {
        "el": "button",
        "span": "11-12",
        "slot": "cta",
        "variant": "link",
        "size": "md",
        "arrow": true
      }
    ]
  }
}
Component example: reference/cta.neo-grotesk-one-line.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>cta.neo-grotesk-one-line — Neo-grotesk Minimal</title>
<link rel="stylesheet" href="base.css">
<style>
  section { padding: var(--section) 0; } section .grid { align-items: end; row-gap: 48px; }
  .rule { grid-column: 1 / 13; } h2 { grid-column: 1 / 8; font-size: var(--step-6); max-width: 16ch; }
  @media (max-width: 640px) { h2 { font-size: var(--step-4); } }
  .note { grid-column: 8 / 11; } .go { grid-column: 11 / 13; }
</style>
</head>
<body>
<section class="wrap">
  <div class="grid">
    <div class="rule hairline"></div>
    <h2>Move your first project in an afternoon.</h2>
    <p class="muted note">Free for one project. No card required.</p>
    <a class="small accent go" href="/start">Start now →</a>
  </div>
</section>
</body>
</html>

Other patterns in this design

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