W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Google LLC is a global technology company best known for Search and the Android ecosystem, with a portfolio that spans Chrome, YouTube, Maps, Workspace (Gmail, Docs, Drive), Cloud (GCP), AI (Gemini), and the Pixel hardware line. The visual identity is built around four signature colors — Blue, Red, Yellow, Green — that animate the wordmark, the "G" mark, and Material Design's primary palette. The voice is approachable, optimistic, and information-clear: built for consumer scale while still carrying engineering credibility.
1 palette 3 fonts 0 assets 7 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/google/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/google/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.
Google LLC is a global technology company best known for Search and the Android ecosystem, with a portfolio that spans Chrome, YouTube, Maps, Workspace (Gmail, Docs, Drive), Cloud (GCP), AI (Gemini), and the Pixel hardware line. The visual identity is built around four signature colors — Blue, Red, Yellow, Green — that animate the wordmark, the "G" mark, and Material Design's primary palette. The voice is approachable, optimistic, and information-clear: built for consumer scale while still carrying engineering credibility.
Tags: tech, google, material, search, consumer
Atoms
Palette
Google · [email protected] · Proprietary — All Rights Reserved
Google corporate palette anchored on the four logo colors — Blue (#4285F4), Red (#EA4335), Yellow (#FBBC04), and Green (#34A853) — used across the Google wordmark, the four-color "G" mark, and the Material Design system primaries. Pairs the four chromatic brand-defining hues with a neutral grey ramp drawn from Material Design's surface and text guidance.
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 |
|---|---|---|
google-blue |
Google Blue | #4285F4 |
google-red |
Google Red | #EA4335 |
google-yellow |
Google Yellow | #FBBC04 |
google-green |
Google Green | #34A853 |
google-grey-900 |
Google Grey 900 | #202124 |
google-grey-700 |
Google Grey 700 | #5F6368 |
google-grey-500 |
Google Grey 500 | #9AA0A6 |
google-grey-200 |
Google Grey 200 | #E8EAED |
google-grey-100 |
Google Grey 100 | #F1F3F4 |
google-white |
Google White | #FFFFFF |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
google-white |
#FFFFFF |
surface |
google-grey-100 |
#F1F3F4 |
surface-elevated |
google-white |
#FFFFFF |
text-primary |
google-grey-900 |
#202124 |
text-secondary |
google-grey-700 |
#5F6368 |
text-tertiary |
google-grey-500 |
#9AA0A6 |
primary |
google-blue |
#4285F4 |
primary-hover |
google-blue |
#4285F4 |
accent |
google-green |
#34A853 |
accent-hover |
google-green |
#34A853 |
warning |
google-yellow |
#FBBC04 |
warning-hover |
google-yellow |
#FBBC04 |
error |
google-red |
#EA4335 |
success |
google-green |
#34A853 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
google-grey-900 |
#202124 |
surface |
google-grey-700 |
#5F6368 |
surface-elevated |
google-grey-500 |
#9AA0A6 |
text-primary |
google-white |
#FFFFFF |
text-secondary |
google-grey-200 |
#E8EAED |
text-tertiary |
google-grey-500 |
#9AA0A6 |
primary |
google-blue |
#4285F4 |
primary-hover |
google-blue |
#4285F4 |
accent |
google-green |
#34A853 |
accent-hover |
google-green |
#34A853 |
warning |
google-yellow |
#FBBC04 |
warning-hover |
google-yellow |
#FBBC04 |
error |
google-red |
#EA4335 |
success |
google-green |
#34A853 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
google-blue |
#4285F4 |
on-identity |
google-white |
#FFFFFF |
primary |
google-blue |
#4285F4 |
primary-hover |
google-blue |
#4285F4 |
accent |
google-green |
#34A853 |
background |
google-white |
#FFFFFF |
surface |
google-grey-100 |
#F1F3F4 |
text-primary |
google-grey-900 |
#202124 |
text-secondary |
google-grey-700 |
#5F6368 |
wordmark-blue |
google-blue |
#4285F4 |
wordmark-red |
google-red |
#EA4335 |
wordmark-yellow |
google-yellow |
#FBBC04 |
wordmark-green |
google-green |
#34A853 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (5)
colorChoice → logo.wordmark
- allowed: google-blue, google-red, google-yellow, google-green
- forbidden: google-grey-900, google-grey-700
Google's wordmark and "G" mark use the canonical four-color set in the specified G-o-o-g-l-e order (blue / red / yellow / blue / green / red). Monochromatic uses are reserved for special contexts that Google's brand center calls out explicitly.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, reordered-colors
Google's brand guidelines explicitly prohibit altering the proportions, color order, or orientation of the wordmark and "G" mark, and require generous clearspace around the logo.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
WCAG 2.1 Level AA contrast requirement for body text. Google Grey 900 (#202124) on Google White clears AA at ~16:1, and Material Design's accessibility guidance specifies AA as the floor for text-on-surface pairings.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
3 - standard:
WCAG-AA-large
Google Blue on Google White must remain perceptible at link / large-text sizes. Below 3:1 the affordance for "clickable" collapses on Material surfaces.
colorChoice → roles.colors.error
- allowed: google-red
Material Design uses Google Red (#EA4335) as the canonical error / destructive color across product UI. Other reds dilute the signal.
💡 recommendation (2)
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.5
Google's marketing surfaces pair Google Sans (display / titles) with Roboto (body / UI). Maintain a meaningful size ratio to preserve the geometric-vs-neogrotesque voice split between the two families.
colorChoice → roles.colors.success
- allowed: google-green
Material Design uses Google Green (#34A853) as the canonical success / confirmation color. Other greens are acceptable in illustration but should not be used for confirmation chrome.
Provenance
- Source: https://about.google/brand-resource-center/
- License:
Proprietary — All Rights Reserved - Attribution: Google, the Google logo, the multicolor "G" mark, Android, Material Design, and related names and marks 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/) and the Material Design 3 color reference (m3.material.io/styles/color).
- Imported:
2026-05-17 - Notes: Brand-atoms' read of Google's public brand and Material Design guidance. This file is not an official Google brand document. Google's logo and product marks are among the most-protected trademarks on the internet; no asset files are bundled here.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Google
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.
A clear hierarchy in Google'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
Google
[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
→ google-green #34A853 background
→ google-white #FFFFFF identity
→ google-blue #4285F4 on-identity
→ google-white #FFFFFF primary
→ google-blue #4285F4 primary-hover
→ google-blue #4285F4 surface
→ google-grey-100 #F1F3F4 text-primary
→ google-grey-900 #202124 text-secondary
→ google-grey-700 #5F6368 wordmark-blue
→ google-blue #4285F4 wordmark-green
→ google-green #34A853 wordmark-red
→ google-red #EA4335 wordmark-yellow
→ google-yellow #FBBC04 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Google Sans prose
→ body Roboto Palette mode mappings (from google)
Light mode (14 roles)
accent
→ google-green accent-hover
→ google-green background
→ google-white error
→ google-red primary
→ google-blue primary-hover
→ google-blue success
→ google-green surface
→ google-grey-100 surface-elevated
→ google-white text-primary
→ google-grey-900 text-secondary
→ google-grey-700 text-tertiary
→ google-grey-500 warning
→ google-yellow warning-hover
→ google-yellow Dark mode (14 roles)
accent
→ google-green accent-hover
→ google-green background
→ google-grey-900 error
→ google-red primary
→ google-blue primary-hover
→ google-blue success
→ google-green surface
→ google-grey-700 surface-elevated
→ google-grey-500 text-primary
→ google-white text-secondary
→ google-grey-200 text-tertiary
→ google-grey-500 warning
→ google-yellow warning-hover
→ google-yellow Rules (7 typed constraints)
error · 5 rules
colorChoice logo.wordmark allowed google-blue, google-red, google-yellow, google-green forbidden google-grey-900, google-grey-700 Google's wordmark and "G" mark use the canonical four-color set in the specified G-o-o-g-l-e order (blue / red / yellow / blue / green / red). Monochromatic uses are reserved for special contexts that Google's brand center calls out explicitly.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, reordered-colors Google's brand guidelines explicitly prohibit altering the proportions, color order, or orientation of the wordmark and "G" mark, and require generous clearspace around the logo.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA WCAG 2.1 Level AA contrast requirement for body text. Google Grey 900 (#202124) on Google White clears AA at ~16:1, and Material Design's accessibility guidance specifies AA as the floor for text-on-surface pairings.
contrastRatio roles.colors.primary against background minRatio 3 standard WCAG-AA-large Google Blue on Google White must remain perceptible at link / large-text sizes. Below 3:1 the affordance for "clickable" collapses on Material surfaces.
colorChoice roles.colors.error allowed google-red Material Design uses Google Red (#EA4335) as the canonical error / destructive color across product UI. Other reds dilute the signal.
recommendation · 2 rules
fontPairing typography.heading requires body minSizeRatio 1.5 Google's marketing surfaces pair Google Sans (display / titles) with Roboto (body / UI). Maintain a meaningful size ratio to preserve the geometric-vs-neogrotesque voice split between the two families.
colorChoice roles.colors.success allowed google-green Material Design uses Google Green (#34A853) as the canonical success / confirmation color. Other greens are acceptable in illustration but should not be used for confirmation chrome.
Provenance
- Source
- https://about.google/brand-resource-center/
- License
Proprietary — All Rights Reserved- Attribution
- Google, the Google logo, the multicolor "G" mark, Android, Material Design, and related names and marks 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/) and the Material Design 3 color reference (m3.material.io/styles/color).
- Imported
2026-05-17- Notes
- Brand-atoms' read of Google's public brand and Material Design guidance. This file is not an official Google brand document. Google's logo and product marks are among the most-protected trademarks on the internet; no asset files are bundled here.