# FlareMail brand and media

> Version 1.0 · October 2026. HTML: https://sendwithflare.com/media/

FlareMail is the email client for Cloudflare Email Routing. Write the name as **FlareMail** (one word, capital F and capital M). Describe it as email for Cloudflare Email Routing. Do not use Cloudflare’s logo, and do not imply that Cloudflare endorses FlareMail.

The mark is a single flame. The knockout reads as an envelope flap and, at a second glance, a grin. Do not add eyes or other features. The face should be found, not drawn on.

Voice: a sharp friend who knows DNS. Short sentences, plain words, a light touch. Never cute at the expense of clear.

We say: “Your domain is live. Say hi to your new inbox.” We don’t say: “Domain provisioning completed successfully.”

## Logo

Primary lockup: **horizontal** (mark plus wordmark). Use it for the web, the product, and docs.

| Lockup | Use |
| --- | --- |
| Horizontal | Default |
| Stacked | Square or centered layouts |
| Wordmark | Only where the mark is already nearby |
| Mark | App icon, favicon, avatars, small spaces |

Variants: `color` on Paper or white · `color-on-dark` on Ink · `ink` one-color dark · `white` one-color reversed.

Clear space equals one quarter of the mark’s height on every side. Nothing else goes inside that margin.

| Asset | Minimum on screen | Minimum in print |
| --- | --- | --- |
| Horizontal | 96 px wide | 25 mm |
| Stacked | 56 px wide | 15 mm |
| Wordmark | 72 px wide | 20 mm |
| Mark | 16 px tall | 5 mm |

Do not stretch, squash, rotate, recolor, outline, or add shadows. Do not retype or rearrange the wordmark. Do not place the logo on a low-contrast background.

Web and app UI: SVG. Docs, slides, and email: PNG. Print: PDF.

## Color

Flare Orange is the mark and primary buttons. It is not a text color. Use Ember for orange text and links on light backgrounds.

| Name | Hex | Role |
| --- | --- | --- |
| Flare Orange | #FF5A1F | Mark, primary buttons, key highlights |
| Ink | #14110F | Text and dark surfaces |
| Paper | #F4F1EC | Warm default background |
| Ember | #C2410C | Orange text and links on light backgrounds |
| Glow | #FFE4D6 | Tints, selection, badges |
| Stone | #E7E1D8 | Borders and dividers |
| Ash | #6B645C | Secondary text |

Balance roughly 60 Paper / 25 Ink / 10 Flare / 5 accents. Orange is the spark, not the room.

| Foreground | Background | Contrast | Use |
| --- | --- | --- | --- |
| Ink #14110F | Paper #F4F1EC | 16.7:1 AAA | Body text |
| Ash #6B645C | Paper #F4F1EC | 5.2:1 AA | Secondary text |
| Ember #C2410C | White #FFFFFF | 5.2:1 AA | Orange text and links |
| Ink #14110F | Flare #FF5A1F | 6.0:1 AA | Text on orange buttons |
| White #FFFFFF | Flare #FF5A1F | 3.1:1 AA Large | Large or bold text only (24px, or 19px bold) |
| Flare #FF5A1F | Paper #F4F1EC | 2.8:1 fail | Never for text. The mark and graphics only |

## Typography

Display: Plus Jakarta Sans, weights 600, 700, and 800, tracking −2%. Headlines and marketing.

Interface: Inter, weights 400, 500, and 600. UI, body, settings, and long reading.

Addresses, headers, and code: system monospace.

Both families are SIL Open Font License.

## App icon and social

Primary app icon: Flare gradient, white mark. Dark alternate follows the same grid. Favicons live at the site root (`/favicon.svg`, `/favicon.ico`, `/site.webmanifest`). Theme color is `#FF5A1F`.

Open Graph image: https://sendwithflare.com/assets/og-share.webp (1200×630). Dark alternate: https://sendwithflare.com/assets/og-share-dark.webp

## Downloads

Guidelines (PDF): https://sendwithflare.com/media/kit/FlareMail-Brand-Guidelines.pdf

Horizontal SVG:

- https://sendwithflare.com/media/kit/logo/flaremail-horizontal-color.svg
- https://sendwithflare.com/media/kit/logo/flaremail-horizontal-color-on-dark.svg
- https://sendwithflare.com/media/kit/logo/flaremail-horizontal-ink.svg
- https://sendwithflare.com/media/kit/logo/flaremail-horizontal-white.svg

Stacked SVG:

- https://sendwithflare.com/media/kit/logo/flaremail-stacked-color.svg
- https://sendwithflare.com/media/kit/logo/flaremail-stacked-color-on-dark.svg
- https://sendwithflare.com/media/kit/logo/flaremail-stacked-ink.svg
- https://sendwithflare.com/media/kit/logo/flaremail-stacked-white.svg

Wordmark SVG:

- https://sendwithflare.com/media/kit/logo/flaremail-wordmark-ink.svg
- https://sendwithflare.com/media/kit/logo/flaremail-wordmark-white.svg
- https://sendwithflare.com/media/kit/logo/flaremail-wordmark-orange.svg

Mark SVG:

- https://sendwithflare.com/media/kit/logo/flaremail-mark-orange.svg
- https://sendwithflare.com/media/kit/logo/flaremail-mark-ink.svg
- https://sendwithflare.com/media/kit/logo/flaremail-mark-white.svg

PNG (docs, slides, email): the same names with `.png` under https://sendwithflare.com/media/kit/logo/ for horizontal, stacked, and wordmark. Mark PNGs:

- https://sendwithflare.com/media/kit/logo/flaremail-mark-orange-256.png
- https://sendwithflare.com/media/kit/logo/flaremail-mark-ink-256.png
- https://sendwithflare.com/media/kit/logo/flaremail-mark-white-256.png

Social PNG:

- https://sendwithflare.com/media/kit/social/flaremail-og-image-1200x630.png
- https://sendwithflare.com/media/kit/social/flaremail-og-image-dark-1200x630.png
- https://sendwithflare.com/media/kit/social/flaremail-avatar-orange-800x800.png
- https://sendwithflare.com/media/kit/social/flaremail-avatar-dark-800x800.png
- https://sendwithflare.com/media/kit/social/flaremail-x-header-1500x500.png
- https://sendwithflare.com/media/kit/social/flaremail-linkedin-banner-1584x396.png
- https://sendwithflare.com/media/kit/social/flaremail-email-signature-logo-600x150.png

App icon SVG:

- https://sendwithflare.com/media/kit/app-icon/flaremail-appicon-primary-orange.svg
- https://sendwithflare.com/media/kit/app-icon/flaremail-appicon-dark.svg