Workspace Brands
Brand profiles store visual identity, business context, and reusable assets that shape every email generated with that brand selected. They ensure consistency across campaigns without manually re-entering settings each time.
Creating a Brand
Navigate to /workspace/brands and click "New Brand". Configure:
- Brand Name — Company or brand identifier
- Logo URL — Link to the brand's logo image (included in email headers)
- Color Palette — Primary, secondary, accent, background colors (hex format)
- Typography — Heading font, body font, optional Google Font URL
- Tone — Preset (professional, playful, bold, etc.) plus free-text description
- Business Context — Free-text field describing what the company does, target audience, and value proposition. Claude uses this to write relevant, on-brand copy.
Brand Images
Upload reusable brand assets (logos, product shots, banners, icons) directly to a brand profile. Each image has:
- Name — Identifier referenced in prompts
- Description — Context about the image and its intended use (e.g., "Spring collection hero banner")
- Image Type — logo, hero, product, banner, icon, or general
When the brand is selected in the Playground, all brand images are automatically passed to Claude alongside any manually uploaded images.
Images are stored in the brand-images Supabase Storage bucket (2MB max, JPG/PNG/GIF).
Design Tokens
Design tokens capture the exact color palette, typography, and button styles from a generated email and lock them into the brand. Once saved, every future generation with that brand uses these tokens instead of Claude picking new values.
How to save tokens:
- Select your brand in the AI Playground
- Generate an email you like
- Click the amber palette icon in the toolbar
- Tokens are extracted and saved to the brand
What's extracted:
- Colors: primary, secondary, background, section background, hero, text, footer
- Typography: header font, body font
- Buttons: background color, text color, border-radius, padding
How they're used:
- Injected into the Haiku blueprint prompt as constraints
- Force-merged into the blueprint's design object after generation (safety net)
- Claude Sonnet follows the blueprint's design tokens exactly
Saved Sections
Reusable HTML sections (headers, footers, heroes, CTAs) can be linked to a brand. When the brand is selected in the Playground, its sections appear in the section selector — toggle them on and Claude injects them verbatim into generated emails.
Sections include bundled CSS extracted from the original email's <style> blocks.
See Saved Sections for details on saving and using sections.
Using Brands in the Playground
- Open the AI Playground
- Click the Color Scheme tab
- Select a brand from the dropdown
- The brand's colors populate the color pickers, and its context, images, design tokens, and saved sections are all loaded automatically
- Generate — Claude follows the brand's design system, writes copy informed by the business context, and uses the brand's images
Data Model
| Field | Type | Description |
|---|---|---|
name | text | Brand identifier |
primary_color | text | Primary hex color |
secondary_color | text | Secondary hex color |
accent_color | text | Accent hex color |
background_color | text | Background hex color |
font_heading | text | Heading font family |
font_body | text | Body font family |
custom_font_url | text | Google Fonts URL |
logo_url | text | Logo image URL |
tone | text | Tone preset |
tone_description | text | Free-text tone guidance |
brand_context | text | Business/audience description |
design_tokens | jsonb | Extracted design system (colors, typography, buttons) |
All brand data is protected by RLS — users can only access their own brands.