Hero · GRIDD Design System v1.0

What it is made of

GdNavbar — the marketing fill: links and a CTA, no section pills
GdSurveyGrid variant="both" — the ground
The headline and the standfirst — fluid display type, off the interface ramp
GdHeroSearch — one stadium pill, two faces
GdChip — the example chips that fill the field

The block

Find out what you can build — before you pay anyone.

Type an address. GRIDD reads the planning scheme, the overlays and the title, and tells you in plain English which approval you'd need.

Try:

The landing's opening: navbar, then heroDots at rest, the lot grid revealed only around the pointer. Switch to “What can I build?” — the pill's height does not change.

Code

<GdNavbar width="contained">
  <template #brand><GdLogo :size="24" wordmark /></template>
  <template #status>…marketing links…</template>
  <span>Sign in</span>
  <GdButton variant="primary" size="sm">Check a property</GdButton>
</GdNavbar>

<header class="hero">           <!-- cursor: crosshair lives on the HOST -->
  <GdSurveyGrid variant="both" />
  <h1>Find out what you can build — before you pay anyone.</h1>
  <p>Type an address. GRIDD reads the planning scheme, the overlays and the
     title, and tells you in plain English which approval you'd need.</p>

  <GdHeroSearch
    v-model:query="q"
    v-model:mode="mode"
    :city-options="CITIES"
    :type-options="TYPES"
  />
</header>

Rules

No stock photography, no gradient, no invented statistic. The ground is drawn, not captured.
Set the lattice to variant="both" and leave the pitch alone. 22px is not a prop.
Put the crosshair cursor on the HOST. GdSurveyGrid is inert by construction and can never set one.
Never run the lattice behind text read twice, and never on the map.
Ring the whole pill, never an inner segment. That belongs to GdHeroSearch — do not restyle it.
Keep the pill the same height on both faces. Both stack a pinned label over one line of value; anything that changes that changes the height.
Show the hero with the bar above it. A hero is never met on its own, and the marketing bar is a different fill from the product one.

Behavior & Anatomy

The hero IS the search field

Lattice, headline, search, in that order, because the fastest way to explain GRIDD is to let someone type their own address. A screenshot of the product under a claim about the product asks the visitor to believe two things; a working field asks them to check one.

The search itself is GdHeroSearch — one stadium pill, two faces: a real labelled input, or City · Build what as embedded selects (the airline pattern: say where, then what). The ring belongs to the pill, never an inner segment, because a segment's rounded ring collides with the round button beside it; WCAG 2.4.7 is satisfied by the pill's ring, and the accent button keeps its own inset indicator so it stays distinguishable inside the shared one. The pill's height is identical on both faces, since a control that resizes when you change your mind reads as a page reflow rather than a mode change.

The lattice is the brand's ground truth

A drafting sheet. The marks are always there; the LINES appear when someone reaches for them, which is what turns a background into an invitation.

Faint 22px dot marks at rest — the same pitch the page headers and card media carry statically. One pitch, always: a grid whose spacing changes per instance stops being the same grid.
A ~150px pool of the lot grid follows the pointer behind a crosshair cursor: the visitor is surveying. Never the whole grid at once — a sheet that lights up entirely is a background effect, and a pool is a tool.
The revealed lines sit at a fixed 12% rather than the band's own strength, because a 5% line inside a 150px pool is invisible.
Never behind text read twice, never on the map, and the reveal is a plain transition, so base.css's global reduced-motion rule already collapses it — nothing extra is needed in the component, and a second reduced-motion block there would be a second thing to keep true.
Both grounds are color-mix over --gd-ink, never a literal, so the lattice themes by construction.

Marketing type is fluid and off the ramp

The headline uses clamp() with its own endpoints. The type scale exists for interface text and the two are different jobs — this is the one sanctioned exception, and it is marked as such at the declaration.