# Google

> `google@1.0.0`

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** · `google@1.0.0` · 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** `(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 |
|----|------|-------|
| `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: `google@1.0.0` from the encyclopedia.*