hero.type-stack-justified · Justified type stack

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.type-stack-justified". A guide only: DESIGN.md and tokens.json are the source of truth.

Rule
Two bands of type between 2 px rules, each fitted to the full measure: the site name heavy at step 8, then the headline light at step 5 (one or two lines); a strip above (eyebrow, meta) and a strip below (subhead 1–5, CTA 10–12).
Slots
eyebrow, meta, siteName, headline, subhead, cta
Grid areas
eyebrow 1-3 · meta 10-12 · lines full · subhead 1-5 · cta 10-12 (12-column grid, 1-based inclusive spans)
Notes
Fit the site-name band to the container width (fit-text or clamp()), so it runs flush on both edges like a justified poster; the headline band is set light and uppercase, at most two lines.
Tokens
bg #FAFAFA · text #1F1F1F · heading #0F0F0F · accent #012FD3 · accent2 #4980FE · Space Mono / Space Mono · radius 0px · space unit 8px (full list in design/tokens.json)

Do

  • Fit the site-name band to the measure so it runs flush from the left to the right edge.
  • Contrast the bands by weight: the site name at step 8 in the heaviest weight the heading font ships, the headline at step 5 in its lightest (300 where it exists), uppercase.
  • Separate every band with a 2 px full-width rule.
  • Keep the bottom strip to subhead (1–5) and one CTA (10–12).

Don't

  • Don't letter-space to fill the width — scale the size instead.
  • Don't let the site name wrap, or the headline run past two lines.
  • Don't add an image to this hero.

Phone width

  • Keep the site name fitted to the 343 px measure (smaller, not wrapped); the headline may wrap to three lines.
  • Stack the bottom strip: subhead, then a full-width CTA.

Brand & product studio

Booking projects from June 2026

Northfold

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.

Start a project
Layout tree (as in design/layout.json)
{
  "pattern": "hero.type-stack-justified",
  "kind": "hero",
  "grid": {
    "eyebrow": "1-3",
    "meta": "10-12",
    "lines": "full",
    "subhead": "1-5",
    "cta": "10-12"
  },
  "slots": [
    "eyebrow",
    "meta",
    "siteName",
    "headline",
    "subhead",
    "cta"
  ],
  "notes": "Fit the site-name band to the container width (fit-text or clamp()), so it runs flush on both edges like a justified poster; the headline band is set light and uppercase, at most two lines.",
  "tree": {
    "el": "box",
    "gap": 0,
    "justify": "end",
    "minVh": 0.9,
    "children": [
      {
        "el": "grid",
        "gap": 3,
        "pad": [
          2,
          0
        ],
        "children": [
          {
            "el": "text",
            "span": "1-3",
            "slot": "eyebrow",
            "role": "eyebrow"
          },
          {
            "el": "text",
            "span": "10-12",
            "color": "textMuted",
            "slot": "meta",
            "role": "small",
            "align": "right"
          }
        ]
      },
      {
        "el": "divider",
        "weight": 2
      },
      {
        "el": "text",
        "slot": "siteName",
        "role": "display",
        "step": 8,
        "transform": "uppercase",
        "tracking": "tight",
        "leading": "tight"
      },
      {
        "el": "divider",
        "weight": 2
      },
      {
        "el": "text",
        "slot": "headline",
        "role": "display",
        "step": 5,
        "transform": "uppercase",
        "weight": 300,
        "tracking": "tight",
        "leading": "tight",
        "maxCh": 30
      },
      {
        "el": "divider",
        "weight": 2
      },
      {
        "el": "grid",
        "gap": 3,
        "pad": [
          3,
          0
        ],
        "children": [
          {
            "el": "text",
            "span": "1-5",
            "slot": "subhead",
            "role": "body",
            "maxCh": 40
          },
          {
            "el": "button",
            "span": "10-12",
            "alignSelf": "end",
            "slot": "cta",
            "variant": "primary",
            "arrow": true
          }
        ]
      }
    ]
  }
}

Other patterns in this design

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