cta.editorial-magazine-subscribe · Subscribe

A cta pattern from Editorial Magazine, 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.editorial-magazine-subscribe". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
A 4 px rule, an accent eyebrow, the italic h2 at step 5 across 1–11, then a lead paragraph on 1–6 and the inline email form with a muted note on 8–12, bottom-aligned.
Slots
eyebrow, headline, body, newsletter, meta
Grid areas
headline 1-11 · pitch 1-6 · form 8-12 (12-column grid, 1-based inclusive spans)
Tokens
bg #FDF9F4 · text #241E16 · heading #150E06 · accent #9B2234 · accent2 #D26F74 · Playfair Display / Source Serif 4 · radius 0px · space unit 8px (full list in design/tokens.json)

Pattern notes

  • A 4 px rule across the grid, the kicker (small uppercase, accent) on 1–6 and the headline in italic display serif at step 5 across 1–11 (max ~26 ch, one or two lines). Below it: a lead-size paragraph describing the issue or newsletter on 1–6 and, on 8–12, bottom-aligned, an inline email form (field with 1 px bottom border only, a square accent submit) and a small muted note ("Every Sunday. Unsubscribe any time."). At phone width the form follows the paragraph.

Brand & product studio

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.

you@example.com
Subscribe

Booking projects from June 2026

Layout tree (as in design/layout.json)
{
  "pattern": "cta.editorial-magazine-subscribe",
  "kind": "cta",
  "grid": {
    "headline": "1-11",
    "pitch": "1-6",
    "form": "8-12"
  },
  "slots": [
    "eyebrow",
    "headline",
    "body",
    "newsletter",
    "meta"
  ],
  "tree": {
    "el": "grid",
    "gap": 4,
    "rowGap": 4,
    "align": "end",
    "children": [
      {
        "el": "divider",
        "span": "1-12",
        "weight": 4
      },
      {
        "el": "text",
        "span": "1-6",
        "color": "accent",
        "slot": "eyebrow",
        "role": "eyebrow",
        "transform": "uppercase",
        "tracking": "wide",
        "font": "body"
      },
      {
        "el": "text",
        "span": "1-11",
        "slot": "headline",
        "role": "h2",
        "step": 5,
        "weight": 400,
        "italic": true,
        "leading": "tight",
        "maxCh": 26
      },
      {
        "el": "text",
        "span": "1-6",
        "slot": "body",
        "role": "lead",
        "maxCh": 52
      },
      {
        "el": "box",
        "span": "8-12",
        "gap": 2,
        "children": [
          {
            "el": "form",
            "slot": "newsletter",
            "fields": [
              "email"
            ],
            "inline": true
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "meta",
            "role": "small"
          }
        ]
      }
    ]
  }
}
Component example: reference/cta.editorial-magazine-subscribe.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>cta.editorial-magazine-subscribe — Editorial Magazine</title>
<link rel="stylesheet" href="base.css">
<style>
  .cta { padding: 0 0 120px; row-gap: 32px; align-items: end; }
  .rule { grid-column: 1 / 13; border-top: 4px solid var(--rule); }
  .kicker-row { grid-column: 1 / 7; } .cta h2 { grid-column: 1 / 12; font-size: var(--step-5); font-style: italic; max-width: 26ch; }
  .pitch { grid-column: 1 / 7; font-size: 1.25rem; max-width: 52ch; }
  form { grid-column: 8 / 13; display: flex; } form input { flex: 1; font: inherit; border: 0; border-bottom: 1px solid var(--rule); background: transparent; padding: 12px 0; }
  form button { font: 600 15px var(--serif); background: var(--accent); color: var(--on-accent); border: 0; padding: 0 20px; }
  .note { grid-column: 8 / 13; font-size: 14px; color: var(--muted); }
  @media (max-width: 640px) { .cta h2 { font-size: var(--step-3); } .cta > * { grid-column: 1 / -1; } }
</style>
</head>
<body>
<section class="wrap">
  <div class="cta grid">
    <div class="rule"></div>
    <p class="kicker accent kicker-row">The Sunday letter</p>
    <h2>One long story, every Sunday morning.</h2>
    <p class="pitch">The best piece from the week's issue, with notes from the editors and a recipe from the test kitchen.</p>
    <form><label class="kicker" for="email" style="position:absolute;left:-9999px">Email</label><input id="email" type="email" placeholder="Your email address"><button>Subscribe</button></form>
    <p class="note">Every Sunday. Unsubscribe any time.</p>
  </div>
</section>
</body>
</html>

Other patterns in this design

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