Layer 3 — compositions

Whole surfaces, built from the system

The layer above components. preview/ proves a token, storybook/ proves a component, and these prove that the two compose into something a client actually receives — a deck, a form, an email, a page in print. Copy from them; they are not references to check.

Sales & pitch

Surfaces that leave the building. Each is a single self-contained file with no build step, so it can be attached, printed or handed over as-is.

Deck Pitch deck Nine 16:9 slides with keyboard navigation — problem, opportunity, product, model, moat, traction and the ask. deck.html Print Poster A 3:4 print-proportioned sheet. The one place the system meets paper, and the reason the black-ink logo variants exist. poster.html

Email

Table-based layouts with inlined values, because a mail client will not read a stylesheet or resolve a custom property. These are the one sanctioned place where the token values appear as literals.

Email Marketing email Single-message layout — masthead, one argument, one call to action. The closest artifact to the real brand as shipped. email.html Email Newsletter digest Multi-story layout built on the three voice pillars — outcome before technology, risk named, one low-friction ask. newsletter.html

Web

Full pages. These are the system carrying real density — the test of whether the 200/120 rhythm and the 24px card survive a page with something to say.

Page Landing page Hero, problem, features, steps, testimonials, FAQ and a closing CTA — the long-page test for one primary action. landing.html Page Contact form Split-screen capture page with the floating-label field, the violet focus halo and a success state. form.html

These were machine-generated and are being brought back onto the brand. They were rendered by the branding-agent engine from brand.json, whose seed is correct — but the generator derived its own ten-step palette from it and shipped #7040da as the primary. #5F20FE did not appear anywhere in the generated token layer. That layer has been removed; these six files are being re-based on colors_and_type.css so they resolve through the same tokens as every other page in the package.