W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Fastmail
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.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/fastmail/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/fastmail/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Fastmail
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 · [email protected] · 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 ([email protected]) |
Adobe Fonts subscription — licensed for web embedding via Adobe Fonts kit | sans-serif |
body |
Proxima Nova ([email protected]) |
Adobe Fonts subscription — licensed for web embedding via Adobe Fonts kit | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
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: [email protected] from the encyclopedia.
Components — same template, themed by Fastmail
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Fastmail
A clear hierarchy in Fastmail's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
palette
Fastmail
[email protected]font · heading
Proxima Nova
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Proxima Nova
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · mono
JetBrainsMono Nerd Font
[email protected]The quick brown fox jumps over 13 lazy dogs.
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ fastmail-blue #0067B9 accent-hover
→ fastmail-blue-active #296B9F background
→ fastmail-white #FFFFFF error
→ fastmail-error #B9031F flag-blue
→ fastmail-blue #0067B9 flag-lightblue
→ fastmail-lightblue #69B3E7 flag-pink
→ fastmail-pink #FFA0C3 flag-yellow
→ fastmail-yellow #FFC107 identity
→ fastmail-deep-blue #243959 mark
→ fastmail-blue #0067B9 on-identity
→ fastmail-white #FFFFFF primary
→ fastmail-blue #0067B9 primary-hover
→ fastmail-blue-hover #176BAD success
→ fastmail-success #147B33 surface
→ fastmail-bg-alt #F4F5F5 surface-warm
→ fastmail-mellow-yellow #FBF7EF text-primary
→ fastmail-text #1B1E20 text-secondary
→ fastmail-text-subtle #5B646C warning
→ fastmail-warning #CA3C08 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Proxima Nova prose
→ body Proxima Nova Palette mode mappings (from fastmail)
Light mode (16 roles)
accent
→ fastmail-blue accent-hover
→ fastmail-blue-active background
→ fastmail-white border
→ fastmail-border-light error
→ fastmail-error primary
→ fastmail-blue primary-hover
→ fastmail-blue-hover success
→ fastmail-success surface
→ fastmail-bg-alt surface-elevated
→ fastmail-white surface-warm
→ fastmail-mellow-yellow text-primary
→ fastmail-text text-secondary
→ fastmail-text-subtle text-tertiary
→ fastmail-text-extra-subtle warning
→ fastmail-warning warning-hover
→ fastmail-warning Dark mode (15 roles)
accent
→ fastmail-lightblue accent-hover
→ fastmail-blue background
→ fastmail-deep-blue border
→ fastmail-text-subtle error
→ fastmail-error primary
→ fastmail-lightblue primary-hover
→ fastmail-blue success
→ fastmail-success surface
→ fastmail-text-alt surface-elevated
→ fastmail-text-subtle text-primary
→ fastmail-white text-secondary
→ fastmail-border-light text-tertiary
→ fastmail-border-medium warning
→ fastmail-warning warning-hover
→ fastmail-warning Rules (8 typed constraints)
error · 4 rules
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 rules
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.