Templates

Ready-to-use templates.

Each template is a copy-ready AI prompt. Paste it into Claude Code (or any model) with the Sweden context block prepended. The output will use your brand tokens from first draft.

Landing page

HTML / Astro

Single-page marketing site. Hero, features grid, testimonial, CTA.

Create a landing page using the Metanoia design system (Sweden).

Structure:
- Hero: headline, subhead, two CTAs (primary + ghost button)
- Features: 3-column grid, icon + title + one-sentence description per card
- Testimonial: blockquote, attribution, company logo placeholder
- Footer CTA: centered headline + primary button

Rules:
- Use CSS custom properties only — no hardcoded hex values or font sizes
- Token reference: brand/tokens/output/web/
- All spacing via --space-* tokens
- Typography via --fs-*, --fw-*, --lh-* tokens
- Colors via --bg-*, --fg-*, --border-* semantic tokens
- Buttons: .btn class using --btn-primary-* or --btn-secondary-* tokens
- No emoji, no exclamation marks, no decorative gradients

Pitch deck

Google Slides JSON / PPTX

10-slide presentation. Cover, problem, solution, market, team, ask.

Create a 10-slide pitch deck using Metanoia brand tokens (Sweden gslides-json adapter).

Slides:
1. Cover — company name, tagline, presenter name
2. Problem — one headline, 3 bullet points
3. Solution — headline, 2-column: description + visual placeholder
4. Market — TAM/SAM/SOM circles (placeholder), key stat callout
5. Product — headline, 3 feature callouts with icons
6. Traction — 3 metric tiles (number + label)
7. Business model — simple revenue breakdown
8. Team — 3 headshots + name + role
9. Roadmap — 3-column timeline: Now / Next / Later
10. Ask — investment amount, use of funds, contact

Token format: Use gslides RgbColor objects from brand/tokens/output/gslides/tokens.json
Typography: typography.size.*, typography.weight.*
Colors: color.navy, color.aqua, color.grey.*

Email

Inline HTML

Transactional or marketing email. Pre-header, hero, body, CTA, footer.

Create an HTML email template using Metanoia brand values.

Structure:
- Pre-header text (hidden, 90 chars)
- Header: logo wordmark, nav links (2)
- Hero: background --color-navy, headline white, subhead, CTA button
- Body: 2 content sections (icon + heading + paragraph each)
- Divider
- Footer: address, unsubscribe link, social icons

Rules:
- Inline CSS only (email clients don't support external stylesheets)
- Use actual hex values from brand/tokens/color-primitives.css — no var() in email
- Font stack: "Figtree", "Helvetica Neue", Arial, sans-serif
- Max width: 600px, center-aligned
- All images have alt text
- CTA button uses table-based layout for Outlook compatibility

One-sheet

HTML / PDF

Single A4/Letter page. Product overview, benefits, contact.

Create a one-sheet (A4 portrait) using the Metanoia design system.

Structure:
- Header strip: navy background, logo left, tagline right
- Hero block: large headline (--fs-36), subhead (--fs-18), 2-line descriptor
- Benefits: 3 rows, each with icon placeholder + bold label + one sentence
- Social proof: 2 client logos (placeholder) + one pull quote
- Footer strip: navy, website URL, email, phone

Rules:
- CSS custom properties from brand/tokens/output/web/
- Page dimensions: 210mm × 297mm with 16mm margins
- Print-safe: no box-shadows, use border instead
- Font: "Figtree" with @font-face pointing to brand/fonts/
- All colors via semantic tokens — no hardcoded hex