hero.minimal-logo-only · Logo only

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

Rule
A full-viewport hero with only the wordmark (site name at step 8) in the optical centre and the h1 as one small line under it; a footer row carries meta (1–4), a scroll cue (6–7) and a text link (10–12).
Slots
siteName, headline, meta, caption, cta
Grid areas
wordmark full · meta 1-4 · cue 6-7 · link 10-12 (12-column grid, 1-based inclusive spans)
Notes
The wordmark is the site's logo set large (SVG in the real build); the small line under it is the real h1 describing the business. Optical centre = slightly above the geometric centre.
Tokens
bg #FAF8F4 · text #1A1A1A · heading #0A0A0A · accent #111111 · accent2 #5C4311 · Bodoni Moda / Jost · radius 0px · space unit 8px (full list in design/tokens.json)

Do

  • Fill the viewport with page colour and set only the wordmark, large, in the optical centre.
  • Put the real h1 as one small, muted line under the wordmark.
  • Use a bottom row for meta (location, season), a scroll cue and one text link.

Don't

  • Don't add an image, video or background pattern.
  • Don't use buttons with fills.
  • Don't animate the wordmark beyond a single fade-in.

Phone width

  • Wordmark fitted to the width; bottom row stacks meta and link, hide the scroll cue.

Northfold

We make complicated companies simple to choose

Booking projects from June 2026

Corvid Robotics — identity

Start a project