What is Google's primary brand color?

Google's marketing system has a single voltage that does the chrome work — Google Blue, the cobalt #1a73e8 wired as --glue-blue-600. It appears 44 times across the about-page (21 as text, 2 as background fill, 21 as border) — the primary CTA pill, every link tone, the external-link arrows on the three product cards, the focus ring on the active nav tab. The four canonical Google brand colors (red, yellow, green, blue) appear together only inside the multicolor G logotype itself, which renders exactly once on the page as a small centered anchor above the globe section. Outside the logotype, the rainbow is held entirely in reserve.

What typeface does Google use, and what should I use as a substitute?

Google's marketing site runs two related typefaces: Google Sans for every display, heading, button, and nav surface, and Google Sans Text for body paragraphs and metadata. Display headlines run at weight 400 with negative tracking — the 60px hero h1 at -0.5px, the 48px section h2 at -0.5px, the 36px h3 at -0.25px. Body sits at 18px weight 400 with normal tracking. The closest open-source substitutes are Inter for Google Sans Text and Product Sans Free (or Manrope) for Google Sans display tiers. The display weight of 400 — not the 700 most tech brands lean on — is the restraint to preserve.

Why does the page barely use the four canonical Google brand colors?

The four canonical brand colors are reserved for the logotype and for product surfaces (Gmail icon, Maps pin, Drive triangle). On the about-page they appear together only inside the multicolor G mark above the globe section. The rationale is recognition: the four-color logotype is one of the most-recognized brand marks on the planet, and deploying its component colors as page chrome would dilute the mark's status. Instead the page uses Google Blue alone for every link and CTA, lets ink black carry every headline, and lets the photography in the three product cards do every other chromatic job. The brand discipline is to spend the rainbow once.

What corner-radius scale does Google use?

The radius scale is a deliberate three-tier split: 4px on cards (the dominant value at 39 of 57 captured occurrences, tracking the 2014 Material lineage), 8px on slightly larger surfaces (9 occurrences — the subscribe-band container), and a 48px fully-rounded pill on interactive surfaces (the See what's new CTA, the Explore CTA, the Subscribe pill). There is no 16 / 24 / 32px middle tier. The 50% radius appears once as a circular mask on the multicolor G anchor. The tight 4px card rounding marks the system as the only one in the directory that still wears the 2014 Material rounding on a 2026 marketing surface.

Google Design System

Google's About-page marketing system uses a single Google Blue CTA, the four-color G mark held for one centered moment, and Google Sans across every tier.

About Google DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source about.google

Productivity & SaaS

Google's about-page does something almost no other multicolor-brand SaaS attempts: it holds the four signature brand colors in reserve. The four-color G mark — the red / yellow / green / blue logotype every viewer recognizes instantly — appears exactly once on the entire page, as a small centered anchor above the "Google around the globe" section. Every other chromatic moment on the page is a single Google Blue cobalt: the "See what's new" CTA pill, the "Explore" CTA, the external-link arrows on the three product cards, the "Subscribe" subscription pill. Where Apple paints every product page in the saturated hue of its hero device and Microsoft uses bright photo blocks per product tile, Google treats the rainbow as a held-back signature gesture and lets the photography in the three product cards (man on the phone in red-rock canyon country, AI-particle abstract, scientists at the quantum-circuit lab) do the chromatic work.

The DESIGN.md file packages the system into a machine-readable spec for React and AI tools. Inside: 12 color tokens including the four canonical Material-era Google brand colors (Google Blue, Google Red, Google Yellow, Google Green), each declared as a `--glue-*` CSS variable family with full 100-900 ramps; an ink tier at `--glue-grey-900`; a body-text tier at `--glue-grey-700`. Nine typography tokens cover Google Sans at the display tier (60px / 48px / 36px h1-h3 in weight 400) and Google Sans Text at body (18px / 400 with normal tracking). Six radius tokens span the 2px / 4px / 8px small-step ladder plus the 48px pill for interactive surfaces and 50% for icon-circle masks. Fourteen components cover the dark hero with the Android show video, the three hairline-bordered photo cards, the multicolor-G anchor moment, the centered explore CTA, the soft-blue subscription pill, and the wide four-column footer.

Feed this file to Claude or Cursor and it will reproduce Google's specific moves: dark hero band with a single cobalt CTA, multicolor G mark held for one centered moment, Google Sans-equivalent display at weight 400 with negative tracking, Google Sans Text-equivalent body, 4px Material rounding on cards and 48px pill on CTAs. The tokens resolve cleanly without invention. The single move worth borrowing only if you have an instantly-recognized multicolor mark is the restraint: hold the brand colors back, deploy them once, let monochrome chrome and color photography do the rest. Most teams need to deploy their accents more, not less.

What makes it distinct

Four-color G held in reservethe canonical red / yellow / green / blue brand mark appears exactly once on the page, as a centered anchor; chrome is otherwise monochrome
Google Blue as singular voltagethe cobalt #1a73e8 carries the primary CTA fill and every link tone, 44 total occurrences across text, fill, and border
Display weight 400the 60px hero h1 and the 48px section h2 both run at weight 400 with -0.5px tracking, a restrained Material treatment
Two-typeface splitGoogle Sans for display / heading / CTA, Google Sans Text for body and metadata; the split is the only typographic device in the system
48px pill CTA plus 4px card radiusinteractive surfaces use a fully-rounded pill, cards use the canonical 2014 Material tight rounding; no middle tier

Live at about.google

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

about.google

Explore Google

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.