hero.form-first · Form first

A hero pattern from the hero library, drawn alone below with this design's tokens and sample copy. Used in this design on: home page, section 1. Give the section root data-pattern="hero.form-first". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
The signup form is the hero's action: headline, subhead and an inline email form with a reassurance line in 1–6; a left-ruled column in 8–12 lists 3–4 numbered things you get.
Slots
eyebrow, headline, subhead, newsletter, meta, sectionLabel, facts[3..4]
Grid areas
form 1-6 · benefits 8-12 (12-column grid, 1-based inclusive spans)
Notes
Use a real <form> with a labelled email input and a submit button. The reassurance line covers frequency and privacy. The benefits are concrete, not icon features.
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #F95620 · accent2 #9E2C00 · Geist / Geist · radius 2px · space unit 8px (full list in design/tokens.json)

Do

  • Make the form the hero's only action: a labelled email field and submit button on one row.
  • Put a one-line reassurance (frequency, privacy) under the form.
  • List 3–4 concrete, numbered benefits in 8–12 behind a left rule.

Don't

  • Don't add a separate CTA button besides the form's submit.
  • Don't ask for more than an email in the hero.
  • Don't use icons for the benefits; numbers only.

Phone width

  • Headline, subhead, form (input and button stacked full width), reassurance, then benefits without the rule.

Brand & product studio

We make complicated companies simple to choose

Northfold is a 14-person studio helping manufacturers, labs and B2B teams explain what they do — and look like they mean it.

you@example.com
Subscribe

Booking projects from June 2026

Introducing

140+

launches shipped

Counted since we opened, updated every quarter.

12

years independent

Measured across every project, not our best ones.

9 of 10

clients return

From our own records, checked each year.

Layout tree (as in design/layout.json)
{
  "pattern": "hero.form-first",
  "kind": "hero",
  "grid": {
    "form": "1-6",
    "benefits": "8-12"
  },
  "slots": [
    "eyebrow",
    "headline",
    "subhead",
    "newsletter",
    "meta",
    "sectionLabel",
    "facts[3..4]"
  ],
  "notes": "Use a real <form> with a labelled email input and a submit button. The reassurance line covers frequency and privacy. The benefits are concrete, not icon features.",
  "tree": {
    "el": "grid",
    "gap": 5,
    "align": "center",
    "minVh": 0.85,
    "children": [
      {
        "el": "box",
        "span": "1-6",
        "gap": 4,
        "children": [
          {
            "el": "text",
            "slot": "eyebrow",
            "role": "eyebrow"
          },
          {
            "el": "text",
            "slot": "headline",
            "role": "h1",
            "step": 6,
            "leading": "tight",
            "maxCh": 14
          },
          {
            "el": "text",
            "slot": "subhead",
            "role": "lead",
            "maxCh": 36
          },
          {
            "el": "form",
            "slot": "newsletter",
            "fields": [
              "email"
            ],
            "inline": true
          },
          {
            "el": "text",
            "color": "textMuted",
            "slot": "meta",
            "role": "small"
          }
        ]
      },
      {
        "el": "box",
        "span": "8-12",
        "alignSelf": "stretch",
        "gap": 4,
        "pad": [
          0,
          5
        ],
        "justify": "center",
        "border": "left",
        "children": [
          {
            "el": "text",
            "color": "textMuted",
            "slot": "sectionLabel",
            "role": "eyebrow"
          },
          {
            "el": "repeat",
            "slot": "facts",
            "min": 3,
            "max": 4,
            "layout": "list",
            "gap": 3,
            "divider": true,
            "of": {
              "el": "box",
              "dir": "row",
              "gap": 3,
              "align": "start",
              "children": [
                {
                  "el": "text",
                  "slot": "number",
                  "role": "number",
                  "step": 2
                },
                {
                  "el": "box",
                  "gap": 1,
                  "children": [
                    {
                      "el": "text",
                      "slot": "title",
                      "role": "h4"
                    },
                    {
                      "el": "text",
                      "color": "textMuted",
                      "slot": "body",
                      "role": "small"
                    }
                  ]
                }
              ]
            }
          }
        ]
      }
    ]
  }
}

Other patterns in this design

Whole design · Spec bundle (JSON) · Hero library page