W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Google Cloud
Google Cloud (GCP) is Google's public-cloud platform, providing compute, storage, networking, databases, AI/ML, and developer- platform services. The Google Cloud sub-brand carries the parent Google four-color identity (Blue / Red / Yellow / Green) forward and ties it to a deeper interactive Cloud Blue (#1A73E8) used in the Google Cloud Console chrome and as the primary action color on cloud.google.com. Typography is Google Sans for display, Roboto for body and UI. The voice is product-clear and architecture- forward: GCP reference architectures, the Cloud Console, and the Google Cloud Skills Boost surfaces share the same four-color dialect against a Material neutral canvas.
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/google-cloud/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-cloud/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 Cloud
Google Cloud (GCP) is Google's public-cloud platform, providing compute, storage, networking, databases, AI/ML, and developer- platform services. The Google Cloud sub-brand carries the parent Google four-color identity (Blue / Red / Yellow / Green) forward and ties it to a deeper interactive Cloud Blue (#1A73E8) used in the Google Cloud Console chrome and as the primary action color on cloud.google.com. Typography is Google Sans for display, Roboto for body and UI. The voice is product-clear and architecture- forward: GCP reference architectures, the Cloud Console, and the Google Cloud Skills Boost surfaces share the same four-color dialect against a Material neutral canvas.
Tags: tech, cloud, gcp, google, four-color, infrastructure, material
Atoms
Palette
Google Cloud · [email protected] · Proprietary — All Rights Reserved
Google Cloud Platform palette built around the four signature Google brand hues — Blue (#4285F4), Red (#EA4335), Yellow (#FBBC04), and Green (#34A853) — adapted for cloud-platform surfaces. The Google Cloud sub-brand carries the parent Google four-color identity forward and ties it to a deeper interactive Cloud Blue used in console chrome and on cloud.google.com. The palette pairs the four chromatic hues with a Google neutral ramp anchored on Google Grey 900 for primary text.
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 |
Roboto ([email protected]) |
Apache-2.0 | sans-serif |
Swatches
| ID | Name | Value |
|---|---|---|
google-blue |
Google Blue | #4285F4 |
cloud-blue-600 |
Cloud Blue 600 | #1A73E8 |
cloud-blue-700 |
Cloud Blue 700 | #185ABC |
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-grey-50 |
Google Grey 50 | #F8F9FA |
google-white |
Google White | #FFFFFF |
google-grey-1000 |
Google Grey 1000 | #171717 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
google-white |
#FFFFFF |
surface |
google-grey-50 |
#F8F9FA |
surface-elevated |
google-white |
#FFFFFF |
text-primary |
google-grey-900 |
#202124 |
text-secondary |
google-grey-700 |
#5F6368 |
text-tertiary |
google-grey-500 |
#9AA0A6 |
primary |
cloud-blue-600 |
#1A73E8 |
primary-hover |
cloud-blue-700 |
#185ABC |
accent |
google-blue |
#4285F4 |
accent-hover |
cloud-blue-600 |
#1A73E8 |
warning |
google-yellow |
#FBBC04 |
warning-hover |
google-red |
#EA4335 |
error |
google-red |
#EA4335 |
success |
google-green |
#34A853 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
google-grey-1000 |
#171717 |
surface |
google-grey-900 |
#202124 |
surface-elevated |
google-grey-700 |
#5F6368 |
text-primary |
google-white |
#FFFFFF |
text-secondary |
google-grey-200 |
#E8EAED |
text-tertiary |
google-grey-500 |
#9AA0A6 |
primary |
google-blue |
#4285F4 |
primary-hover |
cloud-blue-600 |
#1A73E8 |
accent |
google-blue |
#4285F4 |
accent-hover |
cloud-blue-600 |
#1A73E8 |
warning |
google-yellow |
#FBBC04 |
warning-hover |
google-red |
#EA4335 |
error |
google-red |
#EA4335 |
success |
google-green |
#34A853 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
cloud-blue-600 |
#1A73E8 |
on-identity |
google-white |
#FFFFFF |
primary |
cloud-blue-600 |
#1A73E8 |
primary-hover |
cloud-blue-700 |
#185ABC |
accent |
google-blue |
#4285F4 |
accent-hover |
cloud-blue-600 |
#1A73E8 |
background |
google-white |
#FFFFFF |
surface |
google-grey-50 |
#F8F9FA |
surface-elevated |
google-white |
#FFFFFF |
text-primary |
google-grey-900 |
#202124 |
text-secondary |
google-grey-700 |
#5F6368 |
text-tertiary |
google-grey-500 |
#9AA0A6 |
logo-quadrant-blue |
google-blue |
#4285F4 |
logo-quadrant-red |
google-red |
#EA4335 |
logo-quadrant-yellow |
google-yellow |
#FBBC04 |
logo-quadrant-green |
google-green |
#34A853 |
mark |
cloud-blue-600 |
#1A73E8 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
colorChoice → logo.four-color
- allowed: google-blue, google-red, google-yellow, google-green
- forbidden: cloud-blue-600, cloud-blue-700, google-grey-900
The Google Cloud four-color mark uses the canonical Google brand hues (#4285F4 / #EA4335 / #FBBC04 / #34A853). The Cloud Blue 600 interactive variant is a UI primary, not a logo fill, and the neutral text greys are never used as mark colors.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, mark-reordered, mark-monochrome
Google's brand guidelines explicitly prohibit altering the proportions, colors, or arrangement of the Google Cloud mark. The four-color order is fixed; monochrome treatments are not part of the published brand system.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Google Grey 900 (#202124) on Google White gives ~16:1 — well above WCAG 2.1 Level AA. Material Design's accessibility guidance specifies AA as the floor for text-on-background pairings on Google Cloud surfaces.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Cloud Blue 600 (#1A73E8) on Google White gives ~5.0:1 — clearing WCAG AA for body-sized interactive text. The console's link / button labels rely on this contrast to stay legible at standard body sizes.
contextRestriction → roles.colors.accent
- forbiddenContexts: error-state, validation-failure, destructive-action
Google Blue is the brand accent and link color. The destructive / error role is reserved for Google Red. Substituting blue for red on destructive surfaces breaks the Material color-meaning contract.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Material Design tokens are AA-compliant by construction; cloud.google.com and the Cloud Console both inherit that floor.
💡 recommendation (2)
compositionConstraint → roles.colors.primary
- pairsWith: google-white, google-grey-50, google-grey-100
- doesNotPairWith: google-red, google-yellow
The console primary Cloud Blue pairs cleanly against the neutral surface ramp. Placing Cloud Blue directly adjacent to large fills of Google Red or Yellow creates a status- color conflict (error/warning hues against the primary action) that reads as a UI defect rather than a brand composition.
fontPairing → typography.heading
- requires:
body - minSizeRatio:
1.5
Google Cloud surfaces use Google Sans for display and Roboto for body — two distinct families. A 1.5× heading- to-body ratio preserves the typographic distinction between the marketing display voice and the dense reference-documentation body.
Provenance
- Source: https://cloud.google.com/
- License:
Proprietary — All Rights Reserved - Attribution: Google, Google Cloud, the Google Cloud logo, the Google four- color brand palette, Google Sans, and Roboto are trademarks of Google LLC. Brand colors and identity guidance documented here are derived from cloud.google.com, the Google brand- resources surface, and the Google Material Design 2 color reference (material.io/design/color).
- Imported:
2026-05-18 - Notes: Google Cloud is documented as a distinct brand atom because the cloud surfaces tie the parent four-color palette to the deeper Cloud Blue 600 interactive primary and use Google Sans in a more reserved register than the consumer Google brand. No assets are bundled here — Google Cloud's marks are trademarked and must be retrieved from the Google brand- resources site under Google's stated terms.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Google Cloud
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.
Google Cloud
A clear hierarchy in Google Cloud'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
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-blue #4285F4 accent-hover
→ cloud-blue-600 #1A73E8 background
→ google-white #FFFFFF identity
→ cloud-blue-600 #1A73E8 logo-quadrant-blue
→ google-blue #4285F4 logo-quadrant-green
→ google-green #34A853 logo-quadrant-red
→ google-red #EA4335 logo-quadrant-yellow
→ google-yellow #FBBC04 mark
→ cloud-blue-600 #1A73E8 on-identity
→ google-white #FFFFFF primary
→ cloud-blue-600 #1A73E8 primary-hover
→ cloud-blue-700 #185ABC surface
→ google-grey-50 #F8F9FA surface-elevated
→ google-white #FFFFFF text-primary
→ google-grey-900 #202124 text-secondary
→ google-grey-700 #5F6368 text-tertiary
→ google-grey-500 #9AA0A6 Typography
code
→ mono Roboto display
→ heading Google Sans prose
→ body Roboto Palette mode mappings (from google-cloud)
Light mode (14 roles)
accent
→ google-blue accent-hover
→ cloud-blue-600 background
→ google-white error
→ google-red primary
→ cloud-blue-600 primary-hover
→ cloud-blue-700 success
→ google-green surface
→ google-grey-50 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-red Dark mode (14 roles)
accent
→ google-blue accent-hover
→ cloud-blue-600 background
→ google-grey-1000 error
→ google-red primary
→ google-blue primary-hover
→ cloud-blue-600 success
→ google-green surface
→ google-grey-900 surface-elevated
→ google-grey-700 text-primary
→ google-white text-secondary
→ google-grey-200 text-tertiary
→ google-grey-500 warning
→ google-yellow warning-hover
→ google-red Rules (8 typed constraints)
error · 6 rules
colorChoice logo.four-color allowed google-blue, google-red, google-yellow, google-green forbidden cloud-blue-600, cloud-blue-700, google-grey-900 The Google Cloud four-color mark uses the canonical Google brand hues (#4285F4 / #EA4335 / #FBBC04 / #34A853). The Cloud Blue 600 interactive variant is a UI primary, not a logo fill, and the neutral text greys are never used as mark colors.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, mark-reordered, mark-monochrome Google's brand guidelines explicitly prohibit altering the proportions, colors, or arrangement of the Google Cloud mark. The four-color order is fixed; monochrome treatments are not part of the published brand system.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Google Grey 900 (#202124) on Google White gives ~16:1 — well above WCAG 2.1 Level AA. Material Design's accessibility guidance specifies AA as the floor for text-on-background pairings on Google Cloud surfaces.
contrastRatio roles.colors.primary against background minRatio 4.5 standard WCAG-AA Cloud Blue 600 (#1A73E8) on Google White gives ~5.0:1 — clearing WCAG AA for body-sized interactive text. The console's link / button labels rely on this contrast to stay legible at standard body sizes.
contextRestriction roles.colors.accent forbiddenContexts error-state, validation-failure, destructive-action Google Blue is the brand accent and link color. The destructive / error role is reserved for Google Red. Substituting blue for red on destructive surfaces breaks the Material color-meaning contract.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Material Design tokens are AA-compliant by construction; cloud.google.com and the Cloud Console both inherit that floor.
recommendation · 2 rules
compositionConstraint roles.colors.primary pairsWith google-white, google-grey-50, google-grey-100 doesNotPairWith google-red, google-yellow The console primary Cloud Blue pairs cleanly against the neutral surface ramp. Placing Cloud Blue directly adjacent to large fills of Google Red or Yellow creates a status- color conflict (error/warning hues against the primary action) that reads as a UI defect rather than a brand composition.
fontPairing typography.heading requires body minSizeRatio 1.5 Google Cloud surfaces use Google Sans for display and Roboto for body — two distinct families. A 1.5× heading- to-body ratio preserves the typographic distinction between the marketing display voice and the dense reference-documentation body.
Provenance
- Source
- https://cloud.google.com/
- License
Proprietary — All Rights Reserved- Attribution
- Google, Google Cloud, the Google Cloud logo, the Google four- color brand palette, Google Sans, and Roboto are trademarks of Google LLC. Brand colors and identity guidance documented here are derived from cloud.google.com, the Google brand- resources surface, and the Google Material Design 2 color reference (material.io/design/color).
- Imported
2026-05-18- Notes
- Google Cloud is documented as a distinct brand atom because the cloud surfaces tie the parent four-color palette to the deeper Cloud Blue 600 interactive primary and use Google Sans in a more reserved register than the consumer Google brand. No assets are bundled here — Google Cloud's marks are trademarked and must be retrieved from the Google brand- resources site under Google's stated terms.