02 · Brand Layer

Prompts & examples

Realistic prompts, actually run against the layer — each shown with the unedited artefact it produced.

01 — Tested prompts & results

Tested prompts & results

Every prompt below was run for real against this Brand Layer — the artefact next to it is the unedited output of that run. Copy a prompt, swap in your content, and any agent wired to the brand (MCP or the file lanes) should land in the same place: real tokens, real components, no invented values.

Pages & sites

Full pages composed from the system — hero to footer.

Components

Single UI pieces built from the component tokens.

Product UI

Dense application surfaces — navigation, tables, controls.

Data visualization

Charts on the brand's chart palette — no library rainbows.

Documents

Print and inbox surfaces — where the system inverts to black-on-white.

Visuals

Standalone images in the brand-layer style.

Advertising

Campaign copy and paid formats — the voice under hard character and pixel limits.

Audio & video

Scripts in the brand voice — and the voice itself, synthesised by a local AI model.

Presentations

Native .pptx decks on the brand system.

How these were tested

Each artefact is the unedited output of one agent run. The agent received the prompt exactly as printed, plus access to this Brand Layer — the design spec, the stylesheet, the verbal identity and the layout catalog — through the same lanes any external agent uses. Nothing was colour-corrected afterwards; where a run drifted off-brand it was re-run against the spec, not patched by hand. That is the point of the catalog: the prompts are short because the knowledge lives in the layer, not in the prompt.

02 — How to prompt

How to prompt

Describe intent, not values — say “on-brand”, “the accent”, “the display headline”, and let the agent resolve exact colours, type and components from the spec. These rules are what makes the short prompts above land.

Describe intent and structure; let the agent resolve exact values from the spec.
Reference roles — "primary CTA", "the accent", "display headline" — not hex codes.
Keep the logo white or black only; never recolour it.
The accent is ALWAYS the yellow primary — never red, blue or green as an accent, selected state, slider fill, link or focus ring.
Don't use the accent as a large fill. H1/display headlines and section titles (H2) are UPPERCASE; H3+ and body are Sentence case.
Never invent a colour, font, radius or component — anything undefined goes through the fallback contract.
Status hues (success/warning/error/info) are functional feedback only, never decoration.
In charts, use the `chart` palette (yellow + neutrals), not a library-default rainbow.