# Fastmail

> `fastmail@1.0.0`

Fastmail is an independent, privacy-respecting email-and-calendar service operated from Australia — positioned as the "no-tracking, no-ads, paid-by-customers" alternative to consumer webmail. The visual identity is built on a confident Fastmail Blue (#0067B9) as the primary CTA and a Deep Blue navy (#243959) as the brand-anchor trust hue, supported by a warm Mellow Yellow (#FBF7EF) paper surface and a distinctive four-color "flag" separator (Pink, Blue, Light Blue, Yellow) that appears at the footer of every marketing page. Typography uses Proxima Nova as the licensed primary face. The voice is professional, technical, and quietly confident — the brand reads as a serious, long-standing email service rather than a venture-backed productivity startup.


**Tags:** `fastmail`, `email`, `brand`, `blue`, `professional`, `privacy`, `independent`

## Atoms

### Palette

**Fastmail** · `fastmail@1.0.0` · Proprietary — All Rights Reserved

> Fastmail's brand palette, captured directly from the live marketing site (fastmail.com) where the design system exposes a comprehensive named-color token surface on the document root. Fastmail's identity is built on a confident corporate Blue (#0067B9) as the primary action color, a Deep Blue navy (#243959) as the brand-anchor "trust" hue used for the footer canvas, a warm Mellow Yellow (#FBF7EF) page surface, and a four- color "flag" gradient (Pink, Blue, Light Blue, Yellow) that appears as the footer separator. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Proxima Nova** `(proxima-nova@1.0.0)` | Adobe Fonts subscription — licensed for web embedding via Adobe Fonts kit | sans-serif |
| `body` | **Proxima Nova** `(proxima-nova@1.0.0)` | Adobe Fonts subscription — licensed for web embedding via Adobe Fonts kit | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `fastmail-blue` | Fastmail Blue | `#0067B9` |
| `fastmail-blue-hover` | Fastmail Blue Hover | `#176BAD` |
| `fastmail-blue-active` | Fastmail Blue Active | `#296B9F` |
| `fastmail-deep-blue` | Fastmail Deep Blue | `#243959` |
| `fastmail-lightblue` | Fastmail Light Blue | `#69B3E7` |
| `fastmail-mellow-yellow` | Fastmail Mellow Yellow | `#FBF7EF` |
| `fastmail-yellow` | Fastmail Yellow | `#FFC107` |
| `fastmail-pink` | Fastmail Pink | `#FFA0C3` |
| `fastmail-text` | Fastmail Text | `#1B1E20` |
| `fastmail-text-alt` | Fastmail Text Alt | `#333E48` |
| `fastmail-text-subtle` | Fastmail Text Subtle | `#5B646C` |
| `fastmail-text-extra-subtle` | Fastmail Text Extra Subtle | `#70777E` |
| `fastmail-border-light` | Fastmail Border Light | `#EAEBEC` |
| `fastmail-border-medium` | Fastmail Border Medium | `#D6D8DA` |
| `fastmail-bg-alt` | Fastmail Background Alt | `#F4F5F5` |
| `fastmail-bg-focused` | Fastmail Background Focused | `#E9EBEE` |
| `fastmail-white` | Fastmail White | `#FFFFFF` |
| `fastmail-success` | Fastmail Success | `#147B33` |
| `fastmail-error` | Fastmail Error | `#B9031F` |
| `fastmail-warning` | Fastmail Warning | `#CA3C08` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `fastmail-white` | `#FFFFFF` |
| `surface` | `fastmail-bg-alt` | `#F4F5F5` |
| `surface-elevated` | `fastmail-white` | `#FFFFFF` |
| `surface-warm` | `fastmail-mellow-yellow` | `#FBF7EF` |
| `text-primary` | `fastmail-text` | `#1B1E20` |
| `text-secondary` | `fastmail-text-subtle` | `#5B646C` |
| `text-tertiary` | `fastmail-text-extra-subtle` | `#70777E` |
| `primary` | `fastmail-blue` | `#0067B9` |
| `primary-hover` | `fastmail-blue-hover` | `#176BAD` |
| `accent` | `fastmail-blue` | `#0067B9` |
| `accent-hover` | `fastmail-blue-active` | `#296B9F` |
| `warning` | `fastmail-warning` | `#CA3C08` |
| `warning-hover` | `fastmail-warning` | `#CA3C08` |
| `error` | `fastmail-error` | `#B9031F` |
| `success` | `fastmail-success` | `#147B33` |
| `border` | `fastmail-border-light` | `#EAEBEC` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `fastmail-deep-blue` | `#243959` |
| `surface` | `fastmail-text-alt` | `#333E48` |
| `surface-elevated` | `fastmail-text-subtle` | `#5B646C` |
| `text-primary` | `fastmail-white` | `#FFFFFF` |
| `text-secondary` | `fastmail-border-light` | `#EAEBEC` |
| `text-tertiary` | `fastmail-border-medium` | `#D6D8DA` |
| `primary` | `fastmail-lightblue` | `#69B3E7` |
| `primary-hover` | `fastmail-blue` | `#0067B9` |
| `accent` | `fastmail-lightblue` | `#69B3E7` |
| `accent-hover` | `fastmail-blue` | `#0067B9` |
| `warning` | `fastmail-warning` | `#CA3C08` |
| `warning-hover` | `fastmail-warning` | `#CA3C08` |
| `error` | `fastmail-error` | `#B9031F` |
| `success` | `fastmail-success` | `#147B33` |
| `border` | `fastmail-text-subtle` | `#5B646C` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `fastmail-deep-blue` | `#243959` |
| `on-identity` | `fastmail-white` | `#FFFFFF` |
| `primary` | `fastmail-blue` | `#0067B9` |
| `primary-hover` | `fastmail-blue-hover` | `#176BAD` |
| `accent` | `fastmail-blue` | `#0067B9` |
| `accent-hover` | `fastmail-blue-active` | `#296B9F` |
| `mark` | `fastmail-blue` | `#0067B9` |
| `flag-pink` | `fastmail-pink` | `#FFA0C3` |
| `flag-blue` | `fastmail-blue` | `#0067B9` |
| `flag-lightblue` | `fastmail-lightblue` | `#69B3E7` |
| `flag-yellow` | `fastmail-yellow` | `#FFC107` |
| `surface-warm` | `fastmail-mellow-yellow` | `#FBF7EF` |
| `background` | `fastmail-white` | `#FFFFFF` |
| `surface` | `fastmail-bg-alt` | `#F4F5F5` |
| `text-primary` | `fastmail-text` | `#1B1E20` |
| `text-secondary` | `fastmail-text-subtle` | `#5B646C` |
| `error` | `fastmail-error` | `#B9031F` |
| `success` | `fastmail-success` | `#147B33` |
| `warning` | `fastmail-warning` | `#CA3C08` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (4)

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> WCAG 2.1 Level AA contrast requirement for body text. Fastmail Text (#1B1E20) on Fastmail White clears AA at ~17:1, matching the marketing site's accessibility floor. 

#### `contrastRatio` → `roles.colors.primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> Fastmail Blue (#0067B9) on Fastmail White clears AA at ~5.6:1 — the brand uses #0067B9 specifically because a lighter blue would drop below AA on small body-text links. The CTA blue MUST stay AA-compliant on the white canvas. 

#### `colorChoice` → `roles.colors.primary`

- **allowed:** fastmail-blue, fastmail-blue-hover, fastmail-blue-active
- **forbidden:** fastmail-lightblue, fastmail-pink, fastmail-yellow

> Fastmail's primary CTA is one of the three blue-family tokens. The supporting flag colors (Pink, Light Blue, Yellow) belong in the marketing flag-gradient and as illustration accents — they are NOT CTA colors and lack the AA contrast that the primary affordance demands. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo

> Fastmail's wordmark is a single-color "Fastmail" set in Proxima Nova. Recolored, gradient, or shadowed treatments conflict with the brand's quietly confident, professional voice. 

### 💡 recommendation (4)

#### `compositionConstraint` → `roles.colors.identity`

- **pairsWith:** fastmail-white, fastmail-mellow-yellow, fastmail-pink, fastmail-lightblue, fastmail-yellow
- **doesNotPairWith:** fastmail-error, fastmail-warning

> The Deep Blue brand-anchor reads cleanest against the white and Mellow Yellow canvases, and forms the supporting role of the four-color flag gradient. Pairing it adjacent to the Error red or Warning orange status hues creates a chromatic conflict that competes with the trust-establishing intent of the navy. 

#### `contextRestriction` → `roles.colors.surface-warm`

- **forbiddenContexts:** product-chrome, error-state
- **allowedContexts:** marketing-site, hero, editorial

> Mellow Yellow (#FBF7EF) is a marketing-surface paper tone — used on hero modules and editorial blocks to soften the page. The Fastmail product chrome (the actual webmail UI) is white-canvas-first; substituting Mellow Yellow into the product surface breaks the marketing/product visual contract. 

#### `fontPairing` → `typography.heading`

- **requires:** `body`
- **minSizeRatio:** `1.4`

> Fastmail uses Proxima Nova for both heading and body. A 1.4× minimum size ratio preserves hierarchy when one family does double duty across the marketing site's fluid type scale (the site declares a --fluid-font-0 through --fluid-font-11 ramp). 

#### `enumMembership` → `typography.body.fontWeight`

- **allowed:** 400, 500, 600, 700

> Fastmail's Proxima Nova use is restrained to four weights — Regular (400), Medium (500), Semibold (600), Bold (700). Lighter weights are not part of the brand's typographic voice; heavier-than-Bold conflicts with the professional, not-shouty visual register. 

## Provenance

- **Source:** <https://www.fastmail.com/>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** Fastmail and the Fastmail wordmark are trademarks of Fastmail Pty Ltd. Brand colors and identity guidance documented here are derived from the deployed stylesheet on fastmail.com on 2026-05-18 (--brand-color-*, --theme-*, --ui-color-* token families). 
- **Imported:** `2026-05-18`
- **Notes:** Derived from live site CSS at https://www.fastmail.com on 2026-05-18; no public brand guide located. Fastmail's marketing site exposes a comprehensive brand-color token surface on the document root — the values here are the canonical brand-defining hues plus the baseline neutral ramp. The brand's primary typeface is Proxima Nova (licensed from Mark Simonson Studio) — referenced via the proxima-nova@1 atom; Inter@1 is the open-source rendering substitute when Proxima Nova is unavailable. 

---

*Generated by the brand-atoms converter. Source: `fastmail@1.0.0` from the encyclopedia.*