# Designing Emails with AI

When you ask a connected AI for an email, the work is split in two. The AI writes the content and chooses the sections. Flomailr owns layout, typography and colour, so the result follows a theme, uses your brand, and renders in the major inboxes including Outlook. Connect your AI first: [Connect Your AI](/docs/ai/connect).

## The workflow

1. **Read the design kit.** The AI calls `get_design_kit`, which returns the themes, the section patterns and your brand kit (if you have one). If there is no brand kit and you have a website, it should offer to import one.
2. **Compose.** The AI calls `compose_email` with an ordered list of sections and `save: { name, subject }`. Saving creates a draft campaign and returns its id. It never sends anything.
3. **Preview.** The AI calls `preview_email` with that campaign id. You see the real email in the chat, with desktop, mobile and dark inbox views, and the deliverability grade.
4. **Revise.** For small changes the AI uses `edit_campaign`. For a new look it uses `restyle_email`. Neither needs the whole design sent again.
5. **Finish in Flomailr.** The draft appears in `Campaigns` and opens in the visual builder, where you can adjust anything by hand, pick a list and send. Or ask your AI to send it with a dry run first (see [Sending Safely with AI](/docs/ai/send-safely)).

The AI is told never to invent prices, statistics, quotes, dates or links. If it needs one, it should ask you.

## Themes

A theme sets colours, fonts, spacing and corner shapes for the whole email. The AI picks one by its id. If you do not name a theme, your brand kit's base theme is used when you have one, and Clean otherwise.

| Theme     | Id          | What it is for                                                                                                        |
| --------- | ----------- | --------------------------------------------------------------------------------------------------------------------- |
| Clean     | `clean`     | Crisp and neutral. Product updates, onboarding, SaaS, anything that should feel trustworthy and modern                |
| Editorial | `editorial` | A printed-magazine feel with serif headlines on paper tones. Newsletters, essays, long reads, publishers              |
| Studio    | `studio`    | Gallery-white, black type, uppercase tracked headings, square corners. Fashion, retail, design studios, architecture  |
| Hearth    | `hearth`    | Warm cream and terracotta with a friendly serif and pill buttons. Restaurants, cafes, bakeries, wellness, local shops |
| Midnight  | `midnight`  | Dark, glowing, confident. Launches, tech, events, nightlife, anything that wants to feel like a keynote               |
| Poster    | `poster`    | Loud condensed headlines and a hot accent. Sales, drops, promos, sports, concerts, anything with a deadline           |
| Fresh     | `fresh`     | Airy mint and leaf green with soft corners. Health, food, eco, outdoors, fitness, nonprofits                          |
| Mono      | `mono`      | Typewriter headings, plain layout, no decoration. Developer tools, changelogs, technical newsletters                  |
| Luxe      | `luxe`      | Refined serif capitals, ivory and gold, generous space. Hospitality, jewelry, real estate, weddings, fine dining      |

Text and link colours in every theme are adjusted so they stay readable on the background they sit on. To compare looks, ask for the same email in two themes.

## Section patterns

An email is an ordered list of sections, up to 20. A typical order is header, hero, one to four body sections, a call to action, then footer. Each section uses one of these patterns:

| Pattern       | What it does                                                                                      |
| ------------- | ------------------------------------------------------------------------------------------------- |
| `header`      | Logo (from the brand kit when set) or wordmark, optional nav links. Usually first                 |
| `hero`        | The opening statement. With an image it becomes a photo hero, without one a bold typographic band |
| `text`        | A heading and Markdown body copy, optional button. The workhorse for letters and updates          |
| `features`    | 2 to 4 benefits or items, as columns (short copy) or a list (longer copy, optional thumbnails)    |
| `products`    | 1 to 4 product cards with image, price, optional compare-at price and a buy button                |
| `articles`    | 1 to 6 article or blog teasers with optional thumbnails. Newsletters and digests                  |
| `testimonial` | One customer quote with name, role and optional avatar and star rating                            |
| `stats`       | 2 to 4 big numbers with labels. Only real figures                                                 |
| `cta`         | A focused closing call to action on a contrasting band                                            |
| `event`       | Event details (what, when, where) with an RSVP button and optional add-to-calendar links          |
| `image`       | A single image with alt text, optional link and caption                                           |
| `countdown`   | A live countdown to a deadline with an optional button                                            |
| `table`       | A simple data table (schedule, pricing, order summary). The first row is the header               |
| `signoff`     | A personal sign-off: closing line, name, title, optional headshot                                 |
| `footer`      | Brand name, links and social icons. The unsubscribe link and postal address are added at send     |
| `divider`     | A thin rule between sections                                                                      |
| `spacer`      | Vertical breathing room                                                                           |

Body copy is written in Markdown (bold, italic, links, bullet lists). Links must be http, https, mailto or tel. Images must be public https URLs. If you have a file instead of a URL, the AI can upload it with `upload_asset` (PNG, JPEG, GIF or WebP up to 5 MB; SVG is refused) and use the permanent URL it returns.

The footer pattern does not need your unsubscribe link or address. Flomailr adds both when the campaign is sent. A campaign send is blocked until you add a business mailing address under `Settings > Workspace`, in the Email sending card.

## Brand kits

A brand kit holds your logo, colours, fonts, voice and social links. When one exists, every composed email uses it, layered over the theme.

Set it up in either place:

- **Settings > Brand.** Enter your website and click `Import from website`. Flomailr reads your homepage for a logo, colours, fonts and social links and fills the form. Nothing is saved until you press `Save`. You can also fill the fields yourself. Only the primary colour is required. Saving the brand needs an owner or admin role.
- **Through your AI.** Ask it to import your brand from your URL. The `import_brand_from_url` tool returns a proposal with logo candidates and where each value came from, and saves nothing unless asked to. The AI should show you the proposal, let you correct it, then save it with `set_brand`.

Fonts found on a website are mapped to email-safe equivalents. The voice field is free text, for example "warm, plain-spoken, no exclamation marks". The AI is told to write in it.

## Changing a draft

- `get_campaign` returns an outline of the draft: each block's id, type and a one-line summary. Use `format: "full"` for the whole design.
- `edit_campaign` applies edits by block id. The operations are `update` (merge new values into a block), `remove`, `move`, `insert` (a themed section or a raw block, placed at, after or before a position), `settings` (such as the preview line) and `restyle` (a new theme). Up to 50 operations run in order and either all apply or none do. It can also change the subject and name, and it returns the new outline and audit.
- `restyle_email` reassigns every colour, font, size and corner radius by role from a theme and your brand, and leaves content and structure alone. Use it for "make this match our brand" or to try another look. It also repairs low-contrast text.

Only drafts can be edited by the connector. A campaign that is scheduled, sending or sent is refused.

## Checks that run on every design

Every compose, edit and preview returns a deliverability and accessibility audit with an A to F grade and findings. The audit covers deliverability, accessibility, spam, content, structure and design. The design checks look at text contrast against the real background, too many fonts, heading order, and leftover sample copy. The same findings appear in the builder's preflight panel. Ask your AI to fix every error-level finding before sending.

## Preview notes

The preview fills merge tags with a sample contact, Alex Morgan. Images hosted outside Flomailr may not load inside the preview, and the real email is not affected. If the preview does not appear in your AI app, the tool also returns a link to open the draft in the builder.

## Prompts that work well

- "Import our brand from https://example.com and show me the logo, colors and fonts you picked up."
- "Write this month's newsletter in our brand: a short intro, the three blog posts I'm pasting below as article cards, and a button to the shop. Show me a preview."
- "Make an email for our open house on Saturday, 10am to 2pm, with an RSVP button. Try it in the Editorial and Hearth themes so I can compare."
- "Open the 'Spring sale' draft, change the button text to 'Shop the sale', then check it for deliverability and accessibility problems."
- "Restyle the 'Spring sale' draft in the Midnight theme and keep the copy the same."
- "Add a testimonial section after the features in the 'Welcome' draft. The quote is: ..."

Give the AI the real details: dates, prices, links and image URLs. The more specific the brief, the fewer questions it has to ask.

## Related

- [Connect Your AI](/docs/ai/connect)
- [Sending Safely with AI](/docs/ai/send-safely)
- [MCP Tool Reference](/docs/ai/tools)
- [Campaigns](/docs/platform/campaigns)