Marketing Website System

The website, built gate by gate on the Foundation.

Six chunks, each verified against a brand-doc section before the next. Marketing raises the volume — wider rhythm, bigger type, higher treatment — but every value resolves to a Foundation token. The wordmark is the canonical partial throughout.

The verified gates

M1Token bridge--mkt-* aliases resolve to Foundation semantics. No raw hex.Foundation → M2Header & wordmarkMasthead, mega-menu, mobile drawer, footer — canonical wordmark.Brand Book §10.1 → M3Hero systemStatement + split heroes, answer-first, one primary action.Hero + Voice → M4Section libraryProof, stats, method, features, quote, FAQ, CTA — attributed.Editorial + Imagery → M5Pricing, forms & graphicsPricing, comparison, a real form, a constructed graphic, OG, 404.Voice + Imagery → M6Homepage · assembledThe flagship page, built from every verified section.full system →

Implementation

CSSmarketing.cssToken bridge, base, buttons, header, footer, hero.resolves to Foundation → CSSsections.cssSection + card library, pricing, forms, OG, 404.no raw hex → JSmarketing.jsAccessible nav/drawer, FAQ, theme, bulletproof reveal, count-up.progressive enhancement →

Marketing → App handoff

Paste into the App build (Prompt 3). The App raises density and quiets the treatment, but consumes the same tokens.

MARKETING HANDOFF START

[1] CONSUMES the Foundation handoff in full (wordmark, color, type, motion,
icons, treatment, tokens). Marketing adds NO new values.

[2] TOKEN BRIDGE --mkt-* → Foundation semantics. App should mirror with
--app-* aliases (density-tuned) that resolve to the same Foundation tokens.

[3] WHAT THE APP REUSES
buttons, fields (Foundation behavior), cards, FAQ/disclosure, badges, the icon
set, motion tokens, the pop on success, metric/proof components for dashboards,
the focus ring, status system, the canonical .wordmark partial, no-raw-values.

[4] WHAT THE APP TONES DOWN
drop showpiece heroes, big display type, grain/ring textures, section count-ups;
run treatment at Whisper/Standard; raise density; the mark appears only as
favicon / avatar / loader / active-spark / empty-state.

[5] CONTRAST RULE (load-bearing)
a light surface inside a dark section MUST reset its own text roles
(.mkt-card-light pattern) — never inherit the section's cream. Carry to app
panels, popovers, and toasts.

[6] MOTION SAFETY
reveals translate only (opacity stays 1) so content is never hidden by a paused
compositor; reduced-motion honored. Keep this in the app shell.

[7] OPEN ASSUMPTIONS (illustrative, replace before launch)
service names, pricing, proof stats, customer names/quotes — all fictional and
clearly placeholder.

MARKETING HANDOFF END