hero.giant-wordmark · Giant wordmark

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

Rule

The site name runs edge to edge at the largest step, sitting on the bottom of the hero; a three-zone strip above it carries eyebrow (1–4), headline + subhead (5–9) and CTA (11–12).

Slots

eyebrow, headline, subhead, cta, siteName

Grid areas

eyebrow 1-4 · headline 5-9 · cta 11-12 · wordmark full (12-column grid, 1-based inclusive spans)

Notes

Fit the wordmark to the container width (step 8, tight tracking, uppercase) with clamp() or a fit-text routine; long names shrink, never wrap mid-word. The headline is the page's h1 even though the wordmark is bigger.

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)

Section

vertical padding step 4

Do

Set the site name at the top of the type scale and size it to the container width (CSS `clamp()` or a fit-text routine), on one line.
Anchor the wordmark to the bottom edge of the hero; the strip of eyebrow / headline + subhead / CTA sits at the top. The headline stays the h1.
Let the wordmark touch the grid's outer margins; it is allowed to be the widest thing on the page.
At phone width keep it on one or two lines by shrinking the step, never by hyphenating.

Don't

Don't use it when the site name is longer than ~14 characters; choose another hero.
Don't add an image behind the wordmark or a gradient on the letters (unless the style allows gradients).
Don't centre the strip above it; the three zones keep their columns.

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.

Start a project