# Gmail

> `gmail@1.0.0`

Gmail is Google's email service — launched 2004, refreshed in 2020 with the multicolor "M" envelope mark that replaced the long-standing single-red envelope. Gmail is a product-brand under the Google parent (see brands/google/1.0.0); it inherits Google's typography (Google Sans for display, Roboto for body), the corporate four-color identity, and the approachable, information-clear voice. The visual fingerprint that distinguishes Gmail specifically is the five-color envelope mark — Blue, Green, Yellow, Red, and a deeper Crimson for the inner fold — and the Compose-button blue (#4285F4) as the primary action affordance across the product surface.


**Tags:** `gmail`, `google`, `email`, `product-brand`, `productivity`, `consumer`

## Atoms

### Palette

**Gmail** · `gmail@1.0.0` · Proprietary — All Rights Reserved

> Gmail's product palette, anchored on the 2020-refresh envelope mark — a multicolor "M" rendered in the four Google brand hues (Blue, Green, Yellow, Red) with a deeper Crimson accent for the envelope interior. Gmail is a product-brand under the Google parent: the typography and corporate voice inherit from Google, while these envelope-specific swatches are the visual fingerprint of the Gmail mark itself. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Google Sans** `(google-sans@1.0.0)` | Proprietary — Google LLC, internal use only | sans-serif |
| `body` | **Roboto** `(roboto@1.0.0)` | Apache-2.0 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `gmail-red` | Gmail Red | `#EA4335` |
| `gmail-crimson` | Gmail Crimson | `#C5221F` |
| `gmail-yellow` | Gmail Yellow | `#FBBC04` |
| `gmail-green` | Gmail Green | `#34A853` |
| `gmail-blue` | Gmail Blue | `#4285F4` |
| `gmail-grey-900` | Gmail Grey 900 | `#202124` |
| `gmail-grey-700` | Gmail Grey 700 | `#5F6368` |
| `gmail-grey-200` | Gmail Grey 200 | `#E8EAED` |
| `gmail-grey-100` | Gmail Grey 100 | `#F1F3F4` |
| `gmail-white` | Gmail White | `#FFFFFF` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `gmail-white` | `#FFFFFF` |
| `surface` | `gmail-grey-100` | `#F1F3F4` |
| `surface-elevated` | `gmail-white` | `#FFFFFF` |
| `text-primary` | `gmail-grey-900` | `#202124` |
| `text-secondary` | `gmail-grey-700` | `#5F6368` |
| `primary` | `gmail-blue` | `#4285F4` |
| `primary-hover` | `gmail-blue` | `#4285F4` |
| `accent` | `gmail-red` | `#EA4335` |
| `accent-hover` | `gmail-crimson` | `#C5221F` |
| `warning` | `gmail-yellow` | `#FBBC04` |
| `warning-hover` | `gmail-yellow` | `#FBBC04` |
| `error` | `gmail-red` | `#EA4335` |
| `success` | `gmail-green` | `#34A853` |
| `border` | `gmail-grey-200` | `#E8EAED` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `gmail-grey-900` | `#202124` |
| `surface` | `gmail-grey-700` | `#5F6368` |
| `surface-elevated` | `gmail-grey-700` | `#5F6368` |
| `text-primary` | `gmail-white` | `#FFFFFF` |
| `text-secondary` | `gmail-grey-200` | `#E8EAED` |
| `primary` | `gmail-blue` | `#4285F4` |
| `primary-hover` | `gmail-blue` | `#4285F4` |
| `accent` | `gmail-red` | `#EA4335` |
| `accent-hover` | `gmail-crimson` | `#C5221F` |
| `warning` | `gmail-yellow` | `#FBBC04` |
| `warning-hover` | `gmail-yellow` | `#FBBC04` |
| `error` | `gmail-red` | `#EA4335` |
| `success` | `gmail-green` | `#34A853` |
| `border` | `gmail-grey-700` | `#5F6368` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `gmail-red` | `#EA4335` |
| `on-identity` | `gmail-white` | `#FFFFFF` |
| `primary` | `gmail-blue` | `#4285F4` |
| `primary-hover` | `gmail-blue` | `#4285F4` |
| `accent` | `gmail-red` | `#EA4335` |
| `accent-hover` | `gmail-crimson` | `#C5221F` |
| `mark-outer` | `gmail-red` | `#EA4335` |
| `mark-inner` | `gmail-crimson` | `#C5221F` |
| `mark-blue` | `gmail-blue` | `#4285F4` |
| `mark-green` | `gmail-green` | `#34A853` |
| `mark-yellow` | `gmail-yellow` | `#FBBC04` |
| `background` | `gmail-white` | `#FFFFFF` |
| `surface` | `gmail-grey-100` | `#F1F3F4` |
| `text-primary` | `gmail-grey-900` | `#202124` |
| `text-secondary` | `gmail-grey-700` | `#5F6368` |
| `error` | `gmail-red` | `#EA4335` |
| `success` | `gmail-green` | `#34A853` |
| `warning` | `gmail-yellow` | `#FBBC04` |

### Typography

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

## Rules

### 🛑 error (5)

#### `colorChoice` → `logo.envelope-mark`

- **allowed:** gmail-red, gmail-crimson, gmail-yellow, gmail-green, gmail-blue
- **forbidden:** gmail-grey-900, gmail-grey-700

> The 2020 Gmail envelope mark uses exactly five colors — Blue, Green, Yellow, Red, and Crimson Dark — declared in the public Gmail icon SVG. Monochromatic Gmail marks are reserved for special contexts (favicons at extreme small sizes) that Google's brand guidance calls out explicitly. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, on-busy-photo, reverted-to-old-red-envelope, reordered-colors

> Gmail's 2020 refresh replaced the pre-2020 solid-red envelope. Reverting to the legacy mark, recoloring the strokes, or altering proportions all conflict with current Google brand guidance. The mark requires generous clearspace and an unbusy background. 

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

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

> WCAG 2.1 Level AA contrast requirement for body text. Gmail Grey 900 (#202124) on Gmail White clears AA at ~16:1, matching the Google parent's accessibility floor for Material surfaces. 

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

- **against:** `background`
- **minRatio:** `3`
- **standard:** `WCAG-AA-large`

> Gmail Blue (#4285F4) on Gmail White must remain perceptible as the Compose-button and primary-link affordance. Below 3:1 the "clickable" signal collapses on the inbox canvas. 

#### `colorChoice` → `roles.colors.error`

- **allowed:** gmail-red

> Gmail uses Google Red (#EA4335) as the canonical error / destructive color across the product UI (delete-thread, send-failed). Other reds dilute the signal and break parity with the Google parent. 

### 💡 recommendation (3)

#### `colorChoice` → `roles.colors.success`

- **allowed:** gmail-green

> Gmail uses Google Green (#34A853) as the canonical success color — "Message sent," "Recipient added," conversation-marked labels. Other greens are acceptable for illustration but should not appear in confirmation chrome. 

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

- **requires:** `body`
- **minSizeRatio:** `1.5`

> Gmail's marketing surfaces pair Google Sans (display / titles) with Roboto (body / UI), inheriting the Google parent's typographic pairing. A 1.5× minimum size ratio preserves the geometric-vs-neogrotesque hierarchy when the two families appear together. 

#### `compositionConstraint` → `roles.colors.primary`

- **pairsWith:** gmail-white, gmail-grey-100, gmail-grey-900
- **doesNotPairWith:** gmail-red, gmail-green, gmail-yellow

> The five envelope hues belong together as the brand mark. Pairing Gmail Blue with a single sibling hue (without the full five-color set) reads as a brand-identity conflict rather than a coordinated palette — same pattern as the Google parent. 

## Provenance

- **Source:** <https://about.google/brand-resource-center/>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** Gmail, the Gmail envelope mark, and Google Sans are trademarks of Google LLC. Brand colors and identity guidance documented here are derived from the Google Brand Resource Center (about.google/brand-resource-center/), the public 2020 Gmail icon SVG hosted on Wikimedia Commons, and the live Gmail product surface at mail.google.com. 
- **Imported:** `2026-05-18`
- **Notes:** Gmail inherits typography and brand voice from the Google parent (see brands/google/1.0.0). Identity role uses the Gmail envelope mark colors specifically. This atom is brand-atoms' read of public Gmail brand surfaces; it is not an official Google brand document. Gmail's logo and envelope mark are among the most-protected trademarks on the internet; no asset files are bundled here. The proprietary Google Sans / Product Sans typefaces are referenced via the google-sans@1 atom and Inter@1 is the open-source rendering substitute when Google Sans is unavailable. 

---

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