DESIGN.md · Analysis

Google

google.com · 30 Oct 2026 · 47 colors · Google Sans, Roboto

Google

Google's homepage is a minimal, utility-first search surface: a centred wordmark, a single pill-shaped search field and a restrained blue CTA. The brand reads as calm, functional and approachable, with Google Sans carrying the identity and Roboto handling body copy.

Colors

surface#ffffff

surface-dim#f1f3f4

surface-bright#ffffff

surface-container-lowest#ffffff

surface-container-low#f8f9fa

surface-container#f3f5f6

surface-container-high#eceff1

surface-container-highest#e5edff

on-surface#16171a

on-surface-variant#111111

inverse-surface#1f1f1f

inverse-on-surface#f5f8ff

outline#dadce0

outline-variant#d2d2d2

surface-tint#0b57d0

primary#0b57d0

on-primary#ffffff

primary-container#d3e3fd

on-primary-container#001d35

inverse-primary#a3c9ff

secondary#545d7e

on-secondary#ffffff

secondary-container#e5edff

on-secondary-container#001d35

tertiary#1a73e8

on-tertiary#ffffff

tertiary-container#ffd8e4

on-tertiary-container#31111d

error#b3261e

on-error#ffffff

error-container#f9dedc

on-error-container#410e0b

primary-fixed#c2e7ff

primary-fixed-dim#a3c9ff

on-primary-fixed#001d35

on-primary-fixed-variant#0b57d0

secondary-fixed#c2e7ff

secondary-fixed-dim#a3c9ff

on-secondary-fixed#001d35

on-secondary-fixed-variant#545d7e

tertiary-fixed#ffd8e4

tertiary-fixed-dim#f0b7c9

on-tertiary-fixed#31111d

on-tertiary-fixed-variant#5c1f3a

background#ffffff

on-background#16171a

surface-variant#f1f3f4

Typography

display: fontFamily: Google Sans · fontSize: 36px · fontWeight: 400 · lineHeight: 44px
headline-lg: fontFamily: Google Sans · fontSize: 28px · fontWeight: 400 · lineHeight: 36px
headline-md: fontFamily: Google Sans · fontSize: 24px · fontWeight: 400 · lineHeight: 32px
title-lg: fontFamily: Google Sans · fontSize: 20px · fontWeight: 500 · lineHeight: 28px
body-lg: fontFamily: Roboto · fontSize: 16px · fontWeight: 400 · lineHeight: 24px
body-md: fontFamily: Roboto · fontSize: 14px · fontWeight: 400 · lineHeight: 20px
label-md: fontFamily: Google Sans · fontSize: 14px · fontWeight: 400 · lineHeight: 18px
label-sm: fontFamily: Roboto · fontSize: 12px · fontWeight: 500 · lineHeight: 16px

Design guidance

Overview

Google's homepage is built around a single job: start a search. The aesthetic is a restrained, utilitarian minimalism, a flat white canvas where the wordmark and one rounded search field do all the work. The emotional response is calm readiness rather than excitement; nothing competes with the query.

Tone is plain and direct, with short functional labels such as "Google Search", "I'm Feeling Lucky" and "Sign in". Personality shows up through the four-colour wordmark rather than through copy. Example sentence: "Build, create, and do more with AI tools from Google."

Colors

The palette is anchored on a white surface (#ffffff) with near-black text (#16171a) and a saturated Google blue primary (#0b57d0), used for the Sign in CTA and key interactive states. Its tonal partner #d3e3fd is reserved for hover and selected backgrounds. Secondary (#545d7e) supports muted labels and the secondary surface tone #e5edff.

Surface stacking is almost entirely flat: the page uses #ffffff, controls sit on #f8f9fa or #f1f3f4, and borders use #dadce0 at 1px. The four-colour wordmark (blue, red, yellow, green) is the only multi-hue element and must never be recoloured.

Typography

Google Sans is the display and label voice (headline weight 400, labels 500), while Roboto carries body and footer text at 14px. The pairing communicates a friendly product geometry with neutral legibility. Use weight 500 only for interactive labels; keep headlines at 400 for a light, open tone. Apply letter-spacing: normal throughout; no tracking adjustments are needed at these sizes.

Layout

The layout is a fluid, centred column with a container max-width of 1200px and a 12-column grid. The search module is vertically offset into the upper third of the viewport, with header and footer pinned to the edges. Use 16px gutters and lg (16px) spacing between related controls, with 2xl (24px) for section separation. White space is generous and deliberate.

Elevation & Depth

Depth is conveyed sparingly. Resting controls are flat with a 1px border. The search field and dropdown menus lift with box-shadow: 0 2px 10px 0 rgba(0,0,0,0.2) at rest and 0px 4px 12px rgba(60,64,67,0.24) on hover. Modal or overflow surfaces use the lg stack 0px 5px 26px 0px rgba(0,0,0,0.22), 0px 20px 28px 0px rgba(0,0,0,0.3).

Shapes

The shape language is soft-technical. Pills (9999px) define the search field and the Sign in CTA, cards and dropdowns use 8px, and larger containers use 20px. Use rounded.full for input fields and CTAs so the search bar reads as a single continuous capsule, and rounded.sm (8px) for secondary buttons.

Components

Action Elements The primary CTA (Sign in) is a 40px-high pill on #0b57d0 with 12px vertical padding and 16px horizontal padding. Its hover state shifts to #d3e3fd with on-primary-container text. Secondary buttons such as "Google Search" sit on #f8f9fa with an 8px radius and transition background over 200ms.

Containers & Surfaces Cards use #ffffff with a 12px radius and 16px padding; on hover they step to #eceff1. Dropdown menus use the sm shadow at 8px radius.

Inputs & Interaction The search field is a 44px pill with a 1px #dadce0 border; on focus the shadow elevates to the md stack. Icon affordances (microphone, lens, AI Mode) sit inside the field at 24px with on-surface-variant tint.

Do's and Don'ts

**Do**

Do keep the search field as the single dominant interactive element above the fold.
Do use #0b57d0 only for the primary CTA and key links.
Do keep body text on Roboto 14px and labels on Google Sans 500.
Do preserve the four-colour wordmark exactly as supplied.

**Don't**

Don't add gradients or decorative imagery to the homepage canvas.
Don't use #0b57d0 for body copy or large background fills.
Don't introduce additional accent hues beyond the Google palette.
Don't round the search field below 9999px; the capsule shape is core to recognition.

---
version: alpha
name: Google
description: >-
  Google's homepage is a minimal, utility-first search surface: a centred wordmark, a single pill-shaped search field
  and a restrained blue CTA. The brand reads as calm, functional and approachable, with Google Sans carrying the
  identity and Roboto handling body copy.
logo:
  src: https://www.gstatic.com/images/branding/searchlogo/ico/favicon.ico
colors:
  surface: '#ffffff'
  surface-dim: '#f1f3f4'
  surface-bright: '#ffffff'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f8f9fa'
  surface-container: '#f3f5f6'
  surface-container-high: '#eceff1'
  surface-container-highest: '#e5edff'
  on-surface: '#16171a'
  on-surface-variant: '#111111'
  inverse-surface: '#1f1f1f'
  inverse-on-surface: '#f5f8ff'
  outline: '#dadce0'
  outline-variant: '#d2d2d2'
  surface-tint: '#0b57d0'
  primary: '#0b57d0'
  on-primary: '#ffffff'
  primary-container: '#d3e3fd'
  on-primary-container: '#001d35'
  inverse-primary: '#a3c9ff'
  secondary: '#545d7e'
  on-secondary: '#ffffff'
  secondary-container: '#e5edff'
  on-secondary-container: '#001d35'
  tertiary: '#1a73e8'
  on-tertiary: '#ffffff'
  tertiary-container: '#ffd8e4'
  on-tertiary-container: '#31111d'
  error: '#b3261e'
  on-error: '#ffffff'
  error-container: '#f9dedc'
  on-error-container: '#410e0b'
  primary-fixed: '#c2e7ff'
  primary-fixed-dim: '#a3c9ff'
  on-primary-fixed: '#001d35'
  on-primary-fixed-variant: '#0b57d0'
  secondary-fixed: '#c2e7ff'
  secondary-fixed-dim: '#a3c9ff'
  on-secondary-fixed: '#001d35'
  on-secondary-fixed-variant: '#545d7e'
  tertiary-fixed: '#ffd8e4'
  tertiary-fixed-dim: '#f0b7c9'
  on-tertiary-fixed: '#31111d'
  on-tertiary-fixed-variant: '#5c1f3a'
  background: '#ffffff'
  on-background: '#16171a'
  surface-variant: '#f1f3f4'
typography:
  display:
    fontFamily: Google Sans
    fontSize: 36px
    fontWeight: '400'
    lineHeight: 44px
  headline-lg:
    fontFamily: Google Sans
    fontSize: 28px
    fontWeight: '400'
    lineHeight: 36px
  headline-md:
    fontFamily: Google Sans
    fontSize: 24px
    fontWeight: '400'
    lineHeight: 32px
  title-lg:
    fontFamily: Google Sans
    fontSize: 20px
    fontWeight: '500'
    lineHeight: 28px
  body-lg:
    fontFamily: Roboto
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  body-md:
    fontFamily: Roboto
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
  label-md:
    fontFamily: Google Sans
    fontSize: 14px
    fontWeight: 400
    lineHeight: 18px
  label-sm:
    fontFamily: Roboto
    fontSize: 12px
    fontWeight: '500'
    lineHeight: 16px
rounded:
  sm: 8px
  DEFAULT: 8px
  md: 12px
  lg: 20px
  xl: 24px
  full: 9999px
spacing:
  unit: 4px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  gutter: 16px
  container-max: 1200px
elevation:
  sm: 0 2px 10px 0 rgba(0,0,0,0.2)
  md: 0px 4px 12px rgba(60,64,67,0.24)
  lg: 0px 5px 26px 0px rgba(0,0,0,0.22),0px 20px 28px 0px rgba(0,0,0,0.3)
layout:
  containerMaxWidth: 1200px
  gridColumns: 12
components:
  button-primary:
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-md}'
    rounded: '{rounded.full}'
    padding: '{spacing.lg}'
    height: 40px
  button-primary-hover:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary-container}'
  button-secondary:
    backgroundColor: '{colors.surface-container-low}'
    textColor: '{colors.on-surface}'
    typography: '{typography.label-md}'
    rounded: '{rounded.sm}'
    padding: '{spacing.lg}'
    height: 36px
  button-secondary-hover:
    backgroundColor: '{colors.surface-container-high}'
  search-field:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-surface}'
    typography: '{typography.body-lg}'
    rounded: '{rounded.full}'
    padding: '{spacing.lg}'
    height: 44px
  search-field-focus:
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-surface}'
  card:
    backgroundColor: '{colors.surface-container-lowest}'
    rounded: '{rounded.md}'
    padding: '{spacing.lg}'
  card-hover:
    backgroundColor: '{colors.surface-container-high}'
  list-item:
    backgroundColor: transparent
    textColor: '{colors.on-surface}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    padding: '{spacing.sm}'
  list-item-hover:
    backgroundColor: '{colors.surface-container}'
    textColor: '{colors.on-surface}'
  badge:
    backgroundColor: '{colors.primary-container}'
    textColor: '{colors.on-primary-container}'
    typography: '{typography.label-sm}'
    rounded: '{rounded.full}'
    padding: '{spacing.xs}'
  footer-link:
    backgroundColor: transparent
    textColor: '{colors.on-surface-variant}'
    typography: '{typography.body-md}'
    padding: '{spacing.sm}'
---

## Overview

## Colors

## Typography

## Layout

## Elevation & Depth

## Shapes

## Components

### Action Elements
The primary CTA (Sign in) is a 40px-high pill on #0b57d0 with 12px vertical padding and 16px horizontal padding. Its hover state shifts to #d3e3fd with on-primary-container text. Secondary buttons such as "Google Search" sit on #f8f9fa with an 8px radius and transition background over 200ms.

### Containers & Surfaces
Cards use #ffffff with a 12px radius and 16px padding; on hover they step to #eceff1. Dropdown menus use the sm shadow at 8px radius.

### Inputs & Interaction
The search field is a 44px pill with a 1px #dadce0 border; on focus the shadow elevates to the md stack. Icon affordances (microphone, lens, AI Mode) sit inside the field at 24px with on-surface-variant tint.

## Do's and Don'ts

**Do**
- Do keep the search field as the single dominant interactive element above the fold.
- Do use #0b57d0 only for the primary CTA and key links.
- Do keep body text on Roboto 14px and labels on Google Sans 500.
- Do preserve the four-colour wordmark exactly as supplied.

**Don't**
- Don't add gradients or decorative imagery to the homepage canvas.
- Don't use #0b57d0 for body copy or large background fills.
- Don't introduce additional accent hues beyond the Google palette.
- Don't round the search field below 9999px; the capsule shape is core to recognition.

Edit, then copy or download.