Brand and media
Write the name as FlareMail. One word, capital F and capital M. It is email for Cloudflare Email Routing. Do not use Cloudflare’s logo, and do not imply an endorsement.
The mark is one flame. The knockout is an envelope flap and, if you look again, a grin. Leave the face found. Do not add eyes.
Logo
Horizontal is the default for the web, the product, and docs. Stacked is for square layouts. The wordmark only appears where the mark is already nearby. The mark alone is for favicons, avatars, and small spaces.
Clear space and size
Keep clear space equal to one quarter of the mark’s height on every side. Minimum sizes:
| Asset | Screen | |
|---|---|---|
| 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, or rotate the logo.
- Recolor the mark, outline it, or add a shadow.
- Retype or rearrange the wordmark.
- Add eyes or extra features to the grin.
- Place it on a low-contrast background.
Color
Flare Orange is the mark and primary buttons. It is not a text color. Orange words on light backgrounds use Ember.
Flare#FF5A1F
Ink#14110F
Paper#F4F1EC
Ember#C2410C
Glow#FFE4D6
Stone#E7E1D8
Ash#6B645C
Rough balance: 60 Paper, 25 Ink, 10 Flare, 5 accents. Orange is the spark, not the room.
| Foreground | Background | Contrast | Use |
|---|---|---|---|
| Ink | Paper | 16.7:1 AAA | Body text |
| Ash | Paper | 5.2:1 AA | Secondary text |
| Ember | White | 5.2:1 AA | Orange text and links |
| Ink | Flare Orange | 6.0:1 AA | Text on orange buttons |
| White | Flare Orange | 3.1:1 AA Large | Large or bold text only |
| Flare Orange | Paper | 2.8:1 fail | Never for text |
Type
Headlines use Plus Jakarta Sans (600, 700, 800), tracked −2%. Interface and long reading use Inter (400, 500, 600). Addresses and code use system monospace. Both families are free under the SIL Open Font License.
Voice
Sound like a sharp friend who knows DNS. Short sentences. Plain words. A light touch, never cute at the expense of clear.
- Say: “Your domain is live. Say hi to your new inbox.”
- Don’t say: “Domain provisioning completed successfully.”
Downloads
SVG for web and product. PNG for docs, slides, and email. PDF for the full guidelines.
Brand guidelines (PDF)- Horizontal, color (SVG) · PNG
- Horizontal, on dark (SVG) · PNG
- Horizontal, ink (SVG) · PNG
- Horizontal, white (SVG) · PNG
- Stacked, color (SVG) · PNG
- Wordmark, ink (SVG) · PNG
- Mark, orange (SVG) · PNG
- Open Graph, 1200×630 · Dark
- Avatar, orange · Dark
- X header · LinkedIn banner
- Email signature logo
- App icon, primary · Dark
The full SVG, PNG, and remaining stacked and wordmark files are in the Markdown file, which lists every absolute URL.