Styleguide · v3 · November 2026
Proofed
The product is the picture, with a bit of fun in the logo. We show a real-looking Outlook draft, marked up in red pen like a proof, with handwritten notes saying what Claude did. Everything around it stays quiet and warm: one typeface, soft round corners, warm paper, and the character's sunshine yellow as the only brand colour.
Principles
Show the draft
Every page leads with the thing people get: a finished draft. Explain with the product, not with feature lists.
One typeface
Geist for everything. Weight and size do the work. Caveat only for pen notes on the draft.
Red pen, sparingly
Pen notes are for pointing at the product. Never use them for headings, buttons or decoration.
Highlighter means "filled in"
Yellow marks only text Claude filled or wrote. Don't use it for emphasis.
Short pages
Hero, three steps, four facts, one call to action. If something new needs a section, remove one.
Honest
Early access until it's live. No invented numbers, logos or quotes.
Colour
Tokens live at the top of styles.css. Text is always ink on yellow, never white on yellow. Body text meets WCAG AA.
Type
Filled in by Claude.
How it works
A finished draft lands in Outlook.
Put any email in a folder called “Templates”.
filled in by Claude
Components
Early access · Claude connector for Outlook
Draft. For anything not final, such as legal pages.
site.config.json is still empty.Voice
Do
British English. Short, plain sentences. Say what it does and what it doesn't. Use the customer's words: drafts, templates, attachments.
Don't
Hype ("supercharge", "revolutionary"), exclamation marks, made-up numbers, testimonials or badges.
Never claim
That it's live, that it sends email, that Microsoft or Anthropic endorse it, or that it works with Gmail.
The character
A sunshine-yellow envelope with two black eyes and nothing else: no mouth, arms or legs. The flap blends into the body, marked by a soft white fold. It's the logo, and it turns up at friendly moments: leaning in on the home page, happy on the thanks page, winking on the 404. Use one per screen at most, and don't give it speech bubbles.
Logo
The character's face plus a lowercase Geist Bold wordmark. It bobs a little on hover. Files: logo.svg, favicon.svg, mascot/*.svg, og-image.png.