Marketing sections

What it is made of

GdFeatureRow + GdFeatureCard — the three-up under the hero
GdEyebrow — the caps label above the logo strip and each footer column
GdCard — the pricing plan; the recommended one takes the accent border
GdButton variant="inverse" — the one pill on the ink band
GdSiteFooter — brand, disclaimer, caps-labelled link columns

The feature row

Check any lot

Type an address. The ramp answers with the approval level, not a maybe.

Cited to the clause

Every verdict names the scheme provision it came from — check it yourself.

The full report

A consultant-grade planning report, generated while the map is still settling.

Washed grid media, one glyph on a raised tile, a title and one sentence. Hover lifts a card — border first, then shadow.

Code

<GdFeatureRow>
  <GdFeatureCard
    v-for="f in FEATURES"
    :key="f.title"
    :title="f.title"
    :body="f.body"
    :d="f.d"
    :wash="f.wash"
    :ink="f.ink"
  />
</GdFeatureRow>

The CTA band

Stop guessing what your block can do.Three free checks. No card, no sales call.Check a property

CTA band, at docs scale

Code

<section class="cta-band">
  <span class="cta-band__line">Stop guessing what your block can do.</span>
  <span class="cta-band__sub">Three free checks. No card, no sales call.</span>
  <GdButton variant="inverse" size="sm">Check a property</GdButton>
</section>

<!-- the band is the ONE full-bleed element on a marketing page:
     background: var(--gd-surface-inverse); color: var(--gd-ink-inverse) -->

Rules

Spend two background tones on a page, never three. The surface and the canvas tint alternate; the ink band is where it stops.
Word the primary CTA identically everywhere it appears. The reference landing says “Check a property” in the hero and again in the band.
Full-bleed is for the ink CTA band only. Everything else sits on the document column.
Carry the disclaimer on every marketing page. GRIDD is a planning-information service, not legal or town-planning advice — beside the mark, at reading size, not shrunk into the copyright line.
Do not publish a testimonial or a number unless it is sourced and dated. No exceptions for a placeholder.
Pricing: name and tag, the price with its unit OUTSIDE the number, an accent-tick feature list, one CTA. The recommended plan gets the accent border — never a bigger card.
Logo strip: a caps label (“Built on”) and muted source names. No logos until real ones exist.
Use no planning colour. A status wash here is the ground of a card, not a verdict.

Behavior & Anatomy

The marketing surface is the product with the chrome removed

Section rhythm alternates the surface and the canvas tint, and that alternation is the only structure a marketing page gets — never more than two background tones. A third tone reads as a third product, and the visitor's whole job on this page is working out that there is one.

Why the three feature cards are duplicated, on purpose

The FEATURES array on this page is the same three cards, byte for byte, as the array in apps/map/app/pages/index.vue. That is not drift waiting to happen — it is the point of the block. The map app's own comment says so: the copy and the glyphs are the design system's reference set for this block, taken as-is rather than rewritten per app, so that the row under a GRIDD hero says the same three things wherever it appears. A specimen that mirrored a real page with different words would be documenting a block nobody ships.

Each card's wash is a status token used as GROUND, not as verdict. A green card here is a card, not an approval — which is principle 01 (colour is decoupled from content) applied to the one surface most likely to break it.

The glyphs are a stand-in and say so

The design draws these with duotone UseGlyphs. The 24px line set stands in until that library ports — see Iconography. Naming the substitution is cheaper than someone re-deriving it from a mismatch six months from now.

The disclaimer is furniture, not fine print

It sits beside the mark at reading size. Shrunk into the copyright line it reads as something we would rather you did not notice, and for a planning-information product that impression is the expensive one.