W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Gmail
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.
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/gmail/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/gmail/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.
Gmail
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 · [email protected] · 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 ([email protected]) |
Proprietary — Google LLC, internal use only | sans-serif |
body |
Roboto ([email protected]) |
Apache-2.0 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
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: [email protected] from the encyclopedia.
Components — same template, themed by Gmail
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.
Gmail
A clear hierarchy in Gmail'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
Gmail
[email protected]font · heading
Google Sans
[email protected]The quick brown fox jumps over 13 lazy dogs.
font · body
Roboto
[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
→ gmail-red #EA4335 accent-hover
→ gmail-crimson #C5221F background
→ gmail-white #FFFFFF error
→ gmail-red #EA4335 identity
→ gmail-red #EA4335 mark-blue
→ gmail-blue #4285F4 mark-green
→ gmail-green #34A853 mark-inner
→ gmail-crimson #C5221F mark-outer
→ gmail-red #EA4335 mark-yellow
→ gmail-yellow #FBBC04 on-identity
→ gmail-white #FFFFFF primary
→ gmail-blue #4285F4 primary-hover
→ gmail-blue #4285F4 success
→ gmail-green #34A853 surface
→ gmail-grey-100 #F1F3F4 text-primary
→ gmail-grey-900 #202124 text-secondary
→ gmail-grey-700 #5F6368 warning
→ gmail-yellow #FBBC04 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Google Sans prose
→ body Roboto Palette mode mappings (from gmail)
Light mode (14 roles)
accent
→ gmail-red accent-hover
→ gmail-crimson background
→ gmail-white border
→ gmail-grey-200 error
→ gmail-red primary
→ gmail-blue primary-hover
→ gmail-blue success
→ gmail-green surface
→ gmail-grey-100 surface-elevated
→ gmail-white text-primary
→ gmail-grey-900 text-secondary
→ gmail-grey-700 warning
→ gmail-yellow warning-hover
→ gmail-yellow Dark mode (14 roles)
accent
→ gmail-red accent-hover
→ gmail-crimson background
→ gmail-grey-900 border
→ gmail-grey-700 error
→ gmail-red primary
→ gmail-blue primary-hover
→ gmail-blue success
→ gmail-green surface
→ gmail-grey-700 surface-elevated
→ gmail-grey-700 text-primary
→ gmail-white text-secondary
→ gmail-grey-200 warning
→ gmail-yellow warning-hover
→ gmail-yellow Rules (8 typed constraints)
error · 5 rules
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 rules
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.