AI guide

Generate on-brand.

Every AI-generated asset needs a context block that links Sweden before you describe the asset. Without it, the model will invent colors and fonts. With it, every output is wired to your token system from line one.

Step by step

  1. 1

    Open a new conversation

    Start fresh. Don't paste a long existing conversation — the context block works best when it's the first thing the model sees.

  2. 2

    Paste the Sweden context block

    This tells the model which token files to use, which constraints to follow, and where the design rules live. Copy it exactly: 

    I'm working with the Metanoia design system (Sweden).
Token reference: brand/tokens/output/web/
Use CSS custom properties only — no hardcoded hex values or font sizes.
Follow the design rules in CLAUDE.md.
  3. 3

    Describe the asset

    After the context block — in the same message — describe what you want. Be specific about structure: sections, column count, CTA text. Leave visual design decisions (colors, type sizes, spacing) to the token system.

  4. 4

    Review the output

    Check that the output uses var(--token-name) syntax — not hardcoded values. If you see #hex or 16px in component code, ask the model to "replace hardcoded values with Sweden tokens from brand/tokens/output/web/".

What to include in every prompt

Token vocabulary

Name specific token groups to get focused output:

  • --bg-canvas, --bg-subtle — surface backgrounds
  • --fg-1, --fg-2, --fg-3 — text hierarchy
  • --btn-primary-bg — button fill
  • --space-4 through --space-12 — layout rhythm
  • --fs-16, --fs-24, --fs-36 — type scale

Template references

Reference a template by name to inherit its structure:

  • "Use the landing page template structure"
  • "Follow the one-sheet layout from the Sweden templates"
  • "Use the same card grid pattern as the features section"

Constraints that prevent drift

These phrases lock common error modes:

  • "No hardcoded hex values"
  • "No inline font-size — use --fs-* tokens"
  • "No emoji, no exclamation marks"
  • "Lucide icons only, 2px stroke, currentColor"
  • "Spacing on 4px grid using --space-* tokens"

Complete example prompts

Landing page 
I'm working with the Metanoia design system (Sweden).
Token reference: brand/tokens/output/web/
Use CSS custom properties only — no hardcoded hex values or font sizes.
Follow the design rules in CLAUDE.md.

Create a landing page for [product name].
Hero: headline (--fs-36, --fw-bold), subhead (--fs-18, --fw-regular), CTA button.
Features: 3-column grid using --space-6 gap, --bg-subtle cards.
All colors from --bg-*, --fg-*, --border-* semantic tokens.
Presentation 
I'm working with the Metanoia design system (Sweden).
Token reference: brand/tokens/output/gslides/tokens.json
Use gslides RgbColor format for all colors.

Create a 10-slide pitch deck for [company].
Cover slide: title in typography.size.36, subtitle in typography.size.18.
Body slides: consistent left-aligned text, --color-navy-900 headings.
Accent color: color.aqua on callouts and icons only.
Email 
I'm working with the Metanoia design system (Sweden).
This is an HTML email — use inline CSS with actual hex values from
brand/tokens/color-primitives.css (no var() — email clients don't support it).

Create a [transactional / marketing] email for [purpose].
Max width 600px. Font: "Figtree", "Helvetica Neue", Arial, sans-serif.
Header: navy (#094B77) background, white logo text.
CTA button: table-based, navy fill, white text.
One-sheet 
I'm working with the Metanoia design system (Sweden).
Token reference: brand/tokens/output/web/
Output: print-ready HTML (A4, 210mm × 297mm, 16mm margins).

Create a one-sheet for [product / service].
Header strip: --color-navy background, white wordmark.
Body: --fs-28 section heads, --fs-16 body, --space-6 gutters.
No box-shadows (print). All colors via semantic tokens.
Footer: navy strip with contact details.