Design System · Foundations

The brand, turned into a system — gate by gate.

Six chunks, each built against a specific brand-doc section and verified before the next. The wordmark is one canonical partial, so it can't drift. Everything downstream — Marketing, App — consumes these tokens; nobody invents new ones.

Foundation thesis

Editorial restraint with one hot accent — cream and ink that breathe, poppy used as a scalpel, the Wild Burst as the one signature beat. Built so the marketing site and the SaaS app read as the same brand at different densities.

The verified gates

F1Brand lockupThe wordmark “Intent P✸p”, the mark, reversals, clearspace, min-size, misuse.Brand Book §10.1–6 → F2ColorPrimitives, 60/30/8/2, ramps, semantic roles, status, viz order, accent discipline.Brand Book §10.7 → F3TypographyThe four roles, the full scale, tracking, casing, the 64ch measure.Brand Book §10.8 → F4MotionFive durations, three curves, the pop, the interaction spec, reduced-motion.Motion §04 → F5IconographyThe full canonical set — 2 marks, 21 UI, 14 concept — 24-grid, 2-stroke, currentColor.Imagery §06 → F6TreatmentThe signature plays and the Whisper→Showpiece volume scale, each demonstrated.Brand Book §07 · Imagery §07 →

Implementation

CSStokens.cssPrimitives → semantic (light/dark) → treatment. The single source of truth.no raw hex downstream → CSStreatment.cssThe Wild Burst kit — the canonical .wordmark partial, textures, volume scale.one wordmark, no drift →

Foundation handoff

Paste this into the Marketing (Prompt 2) and App (Prompt 3) builds. Each consumes these tokens; new values require a token request, never invention.

FOUNDATION HANDOFF START

[1] BRAND THESIS
Intent Pop — the AI-first CRO agency. "Make intent pop." Editorial Poppy
identity: warm cream, ink, ONE vivid poppy used as a scalpel. ~60/30/8/2.

[2] WORDMARK (load-bearing — verify first)
"Intent P[burst]p" — the Wild Burst IS the second 'o' in Pop. Bricolage
ExtraBold, -0.038em. Use the .wordmark partial. Headline flourish: burst
TRAILS "pop" (does not replace a letter). Standalone burst = favicon/avatar.

[3] COLOR
cream #F7F1E4 / ink #1A140E / poppy #FF4A1C / pine #123A33 / ochre #E9A53C /
warm grey #B7AE9A. Poppy TEXT uses --text-accent (#B23A1A light / #FF7A52 dark).
Status own ramp, never poppy. Viz order d1 poppy→d2 ink→d3 pine→d4 ochre→d5 grey.

[4] TYPE
Display Bricolage 800 / Editorial Newsreader italic / Body Instrument 400-600 /
Mono JetBrains. Scale 152..10px. Sentence case + numerals. Prose ≤ 64ch.

[5] MOTION
micro120 / quick200 / base320 / pop480 / scene680. standard(.2,.7,.2,1) /
pop(.34,1.56,.64,1) / exit(.4,0,1,1). The pop once per piece. Reveals translate
only (opacity stays 1) so content is never hidden by a paused compositor.

[6] ICONS
24-grid, stroke 2, round caps, currentColor. Concept icons poppy on active part;
UI icons ink; status colored + text. 15/17/22/28px; 44px min target.

[7] TREATMENT
Plays: the pop · concentric burst (pine/ink) · hairline grid · corner anchor.
Volume: Whisper / Standard / Signature / Showpiece. One showpiece per view.
Accent ≤ ~8%, never a surface fill, never behind body copy.

[8] TOKENS & A11Y
Components read semantic tokens, never raw hex. Light + dark flip by role.
Contrast: body 4.5:1, UI 3:1 — INCLUDING a light card inside a dark section
(reset its local text roles). 3px poppy focus ring. Reduced-motion honored.

[9] MARKETING raises volume; APP raises density.
Neither adds colors, status hues, durations, or icon styles.

FOUNDATION HANDOFF END