hero.type-outline-fill · Outline + fill type

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

Rule
Two display lines at step 6: the first solid across 1–12, the second outlined (stroke only) and indented to start at column 3; subhead + CTA sit under them in 1–4, meta bottom-right.
Slots
headline, tagline, subhead, cta, meta
Grid areas
solid 1-12 · outline 3-12 · copy 1-4 · meta 10-12 (12-column grid, 1-based inclusive spans)
Notes
Outline line: outline: true = -webkit-text-stroke 2px in the heading colour with a transparent fill (solid fallback where text-stroke is unsupported). With motion allowed, fill the outline left-to-right on load (clip-path), once; never under prefers-reduced-motion.
Tokens
bg #F6FBFF · text #192028 · heading #091018 · accent #00B0FB · accent2 #7D9FFF · Unbounded / Sora · radius 28px · space unit 8px (full list in design/tokens.json)

Do

  • Set two display lines at step 6: the first solid (the h1), the second outlined; keep each to two lines at 1440 px.
  • Indent the outlined line to start at column 3 so the two lines interlock.
  • Use a 2 px text stroke in the heading colour for the outline; the fill is transparent.
  • Put subhead and one CTA under the type in columns 1–4.

Don't

  • Don't outline body copy or anything smaller than step 6 — thin outlines fail legibility.
  • Don't use the outline line as the only copy: the solid line carries the meaning (it is the h1).
  • Don't add images, gradients on the letters or drop shadows.

Phone width

  • Shrink both lines to step 6–7 and drop the indent; keep the stroke at 1.5 px.
  • Subhead and CTA follow at full width; meta goes last.

We make complicated companies simple to choose

Strategy and design for companies that make things

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

Booking projects from June 2026