My Brands & Brand Builder
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.
The brand list lives at My Brands (/workspace/brands); creating or editing a brand opens the Brand Builder.
Creating a Brand
Navigate to /workspace/brands and click "New Brand". The Brand Builder covers:
- Brand Identity — Name and logo URL (logo is 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
- Visual Style — Default, Editorial Minimal, Bold Brutalist, Friendly Rounded, or Tech Mono. Drives how emails are constructed (layout, spacing, ornamentation) — brand colors and fonts always win over the style's defaults.
- Business Context — Free-text field describing what the company does, target audience, and value proposition. Claude uses this to write relevant, on-brand copy.
- CAN-SPAM Compliance — Mailing address and unsubscribe URL, injected into email footers
- Brand Images — Reusable image assets (see below)
- Products — Per-brand product catalog (see below)
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).
Products
Each brand can carry a product catalog, displayed as a storefront grid in the Brand Builder. Each product has:
- Name
- Description
- Price — Freeform text (e.g., "$19/mo", "From $49")
- Product URL
- Image
Products can be added manually or imported via CSV:
- Shopify exports are auto-detected — variant rows are grouped by Handle into single products
- Generic CSVs go through a column-mapping step
- Imports are processed in batches of up to 200 products
In the playground, selecting a brand exposes its catalog in the Products tab. Selected products inject their exact names, prices, images, and URLs into generation with no-invention rules — Claude uses the real data instead of placeholders.
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 "Apply Brand" dropdown
- The brand's colors populate the color pickers, and its context, visual style, images, design tokens, CAN-SPAM fields, and saved sections are all loaded automatically. Its product catalog appears in the Products tab.
- Generate — Claude follows the brand's design system, writes copy informed by the business context, and uses the brand's images and selected products
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 |
style_theory | text | Visual style (editorial-minimal, bold-brutalist, friendly-rounded, tech-mono; null = default) |
mailing_address | text | CAN-SPAM physical address |
unsubscribe_url | text | CAN-SPAM unsubscribe link |
design_tokens | jsonb | Extracted design system (colors, typography, buttons) |
Products live in a separate workspace_products table keyed by brand.
All brand data is protected by RLS — accessible to the owner and any collaborators the brand is shared with.