Withgoogle Design System Deep Dive

1. Brand Overview

Withgoogle — or more precisely the Google homepage experience — is one of the most distilled, globally recognisable pieces of design in existence. It’s not a marketing microsite, not a brand campaign. It’s the product itself. That’s why its design language is stripped to the bone: minimal colour, restrained typography, surgical use of spacing, and components that are functional before they are ornamental.

The vibe: clean, approachable, and engineered for speed. It’s the UI equivalent of a white lab coat — neutral, trustworthy, and never trying too hard. It’s not chasing trends. The homepage is the same core layout it’s been for decades, with incremental tweaks in typography and micro-interactions to keep it fresh and accessible.

Philosophy: clarity over decoration. Every pixel is accounted for. The design system is built to scale across billions of devices, from low‑end Android phones to high‑resolution desktop screens. The result is a set of design tokens that are ruthlessly practical: neutral greys, a few brand blues, pixel‑perfect spacing multiples, and corner radii that tell the difference between a pill button and a card instantly.

The audience is literally "everyone." That means the system must work for children, seniors, professionals, and people with accessibility needs. This is why contrast is high, fonts are legible, and interactive elements have clear feedback. It’s also why the palette is so narrow — fewer colours mean fewer accessibility pitfalls.

2. Color System

2.1 Primary Colors

The core brand accent here is #1a0dab — that deep, saturated blue used for links. It's the only "loud" colour in the palette, and its role is purely functional: clickable text. This works because blue is universally recognised as a link colour, and Google’s shade is distinctive enough to feel proprietary while still familiar.

There’s also a softer functional blue #005fcc used on hover/focus in certain interactive states. This is brighter and more "action-oriented."

Everything else is neutral: white backgrounds, a spectrum of greys (#5e5e5e, #70757a, #474747, #212121, #9aa0a6, #dadce0) and black text (#000000 or rgba(0,0,0,0.87)). These neutrals keep the interface visually calm and make the primary blue pop.

2.2 Complete Palette

Color Name / Guess	Hex	Role	Usage
Dark Gray	#5e5e5e	Neutral text	Secondary labels
White	#ffffff	Background	Page background, button fill
Link Blue	#1a0dab	Primary accent	Links
Medium Gray	#70757a	Neutral	Subtext, muted UI elements
Black	#000000	Text	Strong text, icons
Charcoal Gray	#474747	Neutral	Footer text
Deep Charcoal	#212121	Neutral	Headlines, strong labels
Light Gray	#9aa0a6	Neutral	Placeholder text
Off-White Gray	#dadce0	Divider	Borders, separators
Hover Gray Overlay	#3c4043	Hover state	Hover/focus overlay backgrounds
Action Blue	#005fcc	Hover/focus accent	Interactive states
Border Gray Light	#f8f9fa	Border	Button border default
Border Gray Mid	#dadce0	Border	Divider lines
Border Gray Dark	#d2d2d2	Border	UI outlines
Border Gray Alt	#999999	Border	Specific spans
Border Gray UI	#e8eaed	Border	Dividers
Border Gray Strong	#1f1f1f	Border	Dark divider
Border Gray Form	#767676	Border	Textarea outline
Accent Blue Shadow	#4285f4	Shadow	Focus outline shadow

2.3 Color Relationships

The contrast ratio between #1a0dab (link blue) and #ffffff is very high — comfortably accessible. On white, the blue pops hard. Against black (#000000), the same blue would be borderline unreadable for small text, so they avoid that pairing.

Greys are chosen to avoid clashing. Notice how #70757a and #9aa0a6 are close in luminance but used for different semantic roles — one for body/secondary text, the other for placeholders.

Dark mode? Not present here. This is a fixed light palette. Accessibility hinges on colour contrast and text size, not theme switching.

2.4 Usage Guide

Always pair #1a0dab links with white or light grey backgrounds for maximum clarity.
Use #005fcc sparingly — only for hover/focus states to avoid diluting its impact.
Keep backgrounds pure #ffffff unless using defined grey tokens for specific containers.
Avoid mixing multiple greys in the same component unless there’s a clear hierarchy — it muddies the UI.
#dadce0 and #e8eaed are divider colours; don’t use them for text.

3. Typography

3.1 Font Families

Three core family stacks:

Google Sans (fallback: Arial) — headings, buttons, certain captions.
Google Sans Text (fallback: Roboto, Helvetica, Arial) — links, captions, body UI text.
Arial — legacy/default text, links, certain captions.

No variable fonts, no Adobe sources. All are Google-owned or system-safe.

3.2 Type Scale

Element	Font	Size	Weight	Line Height
heading-1	Google Sans / Arial	16px (1.00rem)	400	—
link	Arial	14px (0.88rem)	400	—
button	Arial	14px (0.88rem)	400	—
link	Google Sans Text / Roboto, Helvetica, Arial	14px	500	1.29
caption	Google Sans Text / Roboto, Helvetica, Arial	14px	500	1.29
caption	Arial	14px	400	1.43
button	Google Sans / Arial	14px	500	1.43
caption	Google Sans / Arial	14px	500	1.43
button	Google Sans / Arial	14px	400	1.43
caption	Google Sans / Arial	14px	400	—
link	Arial	13px	400	1.85
caption	Google Sans / Arial	13px	400	0.92
link	Arial	13px	400	2.15
caption	Arial	12px	400	1.33
button	Google Sans / Arial	11px	400	—

3.3 Hierarchy

Hierarchy here is subtle — headings are not huge. The largest size is 16px for "heading-1", which is unusual. This keeps the page minimal and consistent. Weight shifts (400 vs 500) are the main differentiators. It’s a utilitarian hierarchy, where link colour and placement matter more than size jumps.

Legibility is strong thanks to high x-height fonts and comfortable line heights (1.29–1.43 for most UI text).

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid, but with fine-grained 2px/4px increments for micro‑adjustments.

px	rem	count	Notes
2	0.13rem	7	Tight gaps
3	0.19rem	1	Rare micro gap
4	0.25rem	21	Common element padding
5	0.31rem	8	Inline spacing
6	0.38rem	15	Button text padding
7	0.44rem	1	Rare
8	0.50rem	7	Grid unit
10	0.63rem	2	Small gaps
11	0.69rem	8	Button padding horizontal
12	0.75rem	7	Input padding
14	0.88rem	4	Button padding vertical
15	0.94rem	14	Common
16	1.00rem	1	Headings
18	1.13rem	3	Section gaps
20	1.25rem	9	Card padding
24	1.50rem	1	Modal padding
54	3.38rem	1	Hero padding
60	3.75rem	1	Large spacing
70	4.38rem	1	Large spacing
312	19.50rem	1	Search box width

4.2 Layout

Breakpoints: 360px, 495px, 496px, 569px, 575px, 576px, 640px, 1200px. No fluid typography — layout shifts at these fixed points.

5. Visual Elements

Border Radius System

Ranges from hard corners (0px) to full pills (9999px).

Value	Count	Use
0px	1	Square container bottom corners
8px	6	Buttons, menus
12px	1	Div
16px	1	Presentation element
20px	3	Div, span
26px	3	Div
28px	1	Span
30px	1	Span
100px	5	Sign in, pill links
9999px	2	Span pills
50%	2	Circular buttons/divs
100%	2	Span full round

Shadows

Rarely used — mostly flat UI.

rgba(0, 0, 0, 0.1) 0px 2px 5px 0px
rgb(66, 133, 244) 0px 1px 0px 0px
rgba(31, 31, 31, 0.08) 0px 3px 10px 0px
rgba(32, 33, 36, 0.28) 0px 4px 6px 0px
rgba(0, 0, 0, 0.2) 0px 2px 10px 0px

Borders

Thin (1px) solids in greys for separation. Dividers use #dadce0 or similar.

6. Components

6.1 Buttons

Variant 1 (plR5qb Y5MKCd):

Default: bg #ffffff, text #1f1f1f, padding 0px 12px 0px 10px, radius 100px, no border.
Hover: bg inherit.

Variant 2 (gNO89b):

Default: bg #f8f9fa, text #3c4043, padding 0px 16px, radius 8px, border 1px solid #f8f9fa.
Hover: bg #f8f9fa, text #202124, box-shadow rgba(0,0,0,0.1) 0px 1px 1px, border 1px solid #dadce0.
Focus: border 1px solid #4285f4.

6.2 Links

Four variants:

#1f1f1f text, no underline.
rgba(0,0,0,0.87) text, no underline.
#1a0dab link blue, no underline.
#ffffff text, no underline.

Hover: text-decoration inherits colour.

6.3 Forms

Textarea:

bg transparent, text rgba(0,0,0,0.87), padding top 14px, radius 0px.

6.4 Cards

No explicit card component in data — containers use spacing and subtle borders.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-dark-gray: #5e5e5e;
  --color-white: #ffffff;
  --color-link-blue: #1a0dab;
  --color-medium-gray: #70757a;
  --color-black: #000000;
  --color-charcoal: #474747;
  --color-deep-charcoal: #212121;
  --color-light-gray: #9aa0a6;
  --color-offwhite-gray: #dadce0;
  --color-hover-overlay: #3c4043;
  --color-action-blue: #005fcc;
  --color-border-light: #f8f9fa;
  --color-border-mid: #dadce0;
  --color-border-dark: #d2d2d2;
  --color-border-alt: #999999;
  --color-border-ui: #e8eaed;
  --color-border-strong: #1f1f1f;
  --color-border-form: #767676;
  --color-shadow-accent-blue: #4285f4;

  /* Typography */
  --font-google-sans: "Google Sans", Arial;
  --font-google-sans-text: "Google Sans Text", Roboto, Helvetica, Arial;
  --font-arial: Arial;

  /* Font sizes */
  --font-size-16: 1rem;
  --font-size-14: 0.88rem;
  --font-size-13: 0.81rem;
  --font-size-12: 0.75rem;
  --font-size-11: 0.69rem;

  /* Spacing */
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-24: 24px;
  --space-54: 54px;
  --space-60: 60px;
  --space-70: 70px;
  --space-312: 312px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-xxl: 26px;
  --radius-28: 28px;
  --radius-30: 30px;
  --radius-pill: 100px;
  --radius-full-pill: 9999px;
  --radius-half: 50%;
  --radius-full: 100%;

  /* Shadows */
  --shadow-soft: rgba(0,0,0,0.1) 0px 2px 5px 0px;
  --shadow-blue-outline: rgb(66,133,244) 0px 1px 0px 0px;
  --shadow-light: rgba(31,31,31,0.08) 0px 3px 10px 0px;
  --shadow-medium: rgba(32,33,36,0.28) 0px 4px 6px 0px;
  --shadow-strong: rgba(0,0,0,0.2) 0px 2px 10px 0px;
}

8. AI Coding Assistant Prompt

# Withgoogle Design System Specification

You are a Withgoogle design expert. Build UIs matching their visual language exactly.

## Brand Context
Google's homepage design prioritises clarity, speed, and neutrality. Typography is clean and legible, colours are minimal with a single strong accent blue, and components have precise spacing and corner radii. Interaction feedback is subtle but clear.

## Color Palette
- Dark Gray: #5e5e5e — Secondary labels
- White: #ffffff — Page background, button fill
- Link Blue: #1a0dab — Links
- Medium Gray: #70757a — Subtext, muted UI elements
- Black: #000000 — Strong text, icons
- Charcoal Gray: #474747 — Footer text
- Deep Charcoal: #212121 — Headlines, strong labels
- Light Gray: #9aa0a6 — Placeholder text
- Off-White Gray: #dadce0 — Dividers
- Hover Gray Overlay: #3c4043 — Hover/focus overlay
- Action Blue: #005fcc — Hover/focus accent
- Border Gray Light: #f8f9fa — Button borders
- Border Gray Mid: #dadce0 — Dividers
- Border Gray Dark: #d2d2d2 — UI outlines
- Border Gray Alt: #999999 — Specific borders
- Border Gray UI: #e8eaed — Dividers
- Border Gray Strong: #1f1f1f — Dark divider
- Border Gray Form: #767676 — Textarea outline
- Accent Blue Shadow: #4285f4 — Focus outline shadow

## Typography
- Google Sans, Arial — headings, buttons
- Google Sans Text, Roboto, Helvetica, Arial — links, captions
- Arial — body, legacy

| Element | Size | Weight | Line Height | Use |
|---------|------|--------|-------------|-----|
| heading-1 | 16px | 400 | — | Main heading |
| link | 14px | 400 | — | Body links |
| button | 14px | 400 | — | UI buttons |
| link | 14px | 500 | 1.29 | Emphasised link |
| caption | 14px | 500 | 1.29 | Caption bold |
| caption | 14px | 400 | 1.43 | Caption normal |
| button | 14px | 500 | 1.43 | Button bold |
| caption | 14px | 500 | 1.43 | Caption bold |
| button | 14px | 400 | 1.43 | Button normal |
| caption | 14px | 400 | — | Caption |
| link | 13px | 400 | 1.85 | Small link |
| caption | 13px | 400 | 0.92 | Small caption |
| link | 13px | 400 | 2.15 | Small link |
| caption | 12px | 400 | 1.33 | Caption small |
| button | 11px | 400 | — | Button tiny |

## Spacing & Grid
Base: 8px grid
Scale: 2px, 3px, 4px, 5px, 6px, 7px, 8px, 10px, 11px, 12px, 14px, 15px, 16px, 18px, 20px, 24px, 54px, 60px, 70px, 312px

Map:
- Button padding: 6px vertical, 11px–16px horizontal
- Card padding: 20px
- Section gaps: 18px, 24px
- Hero spacing: 54px+

## Border Radius
- none: 0px — square containers
- sm: 8px — small buttons, menus
- md: 12px — divs
- lg: 16px — presentation
- xl: 20px — spans, divs
- xxl: 26px — divs
- 28px, 30px — spans
- pill: 100px — primary pill buttons
- full-pill: 9999px — extreme pill shapes
- half: 50% — circles
- full: 100% — round spans

## Shadows & Depth
- Soft: rgba(0,0,0,0.1) 0px 2px 5px
- Blue outline: rgb(66,133,244) 0px 1px 0px
- Light: rgba(31,31,31,0.08) 0px 3px 10px
- Medium: rgba(32,33,36,0.28) 0px 4px 6px
- Strong: rgba(0,0,0,0.2) 0px 2px 10px

## Component Specifications

### Primary Button
Default:
- background: #ffffff
- color: #1f1f1f
- padding: 0px 12px 0px 10px
- border-radius: 100px
- border: none
Hover:
- background: inherit

### Secondary Button
Default:
- background: #f8f9fa
- color: #3c4043
- padding: 0px 16px
- border-radius: 8px
- border: 1px solid #f8f9fa
Hover:
- background: #f8f9fa
- color: #202124
- box-shadow: rgba(0,0,0,0.1) 0px 1px 1px
- border: 1px solid #dadce0
Focus:
- border: 1px solid #4285f4

### Navigation Links
- Default: no underline, colour depends on type (#1a0dab for primary link)
- Hover: inherit text-decoration and colour

### Input Fields
Textarea:
- background: transparent
- color: rgba(0,0,0,0.87)
- padding-top: 14px
- border-radius: 0px

## Layout & Responsive Rules
- Breakpoints: 360px, 495px, 496px, 569px, 575px, 576px, 640px, 1200px

## Interaction Rules
- Transitions: 150ms ease for state changes
- Focus indicators: border colour change or shadow

## DO
- Use only colours from palette
- Maintain 8px grid multiples
- Use Google Sans for headings, Google Sans Text for body
- Keep link blue for interactive text
- Respect border radius mapping

## DON'T
- Invent new colours
- Mix sharp and rounded corners in same element
- Add heavy shadows without defined token
- Use link blue for non-interactive text

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #ffffff;
  color: #1f1f1f;
  padding: 0px 12px 0px 10px;
  border-radius: 100px;
  font-weight: 500;
  font-size: 14px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: inherit; }
```

Secondary Button:
```css
.btn-secondary {
  background: #f8f9fa;
  color: #3c4043;
  padding: 0px 16px;
  border-radius: 8px;
  border: 1px solid #f8f9fa;
}
.btn-secondary:hover {
  background: #f8f9fa;
  color: #202124;
  box-shadow: rgba(0,0,0,0.1) 0px 1px 1px;
  border: 1px solid #dadce0;
}
.btn-secondary:focus { border: 1px solid #4285f4; }
```

Input:
```css
.textarea {
  background-color: transparent;
  color: rgba(0,0,0,0.87);
  padding-top: 14px;
  border-radius: 0px;
}
```

9. Summary

TL;DR — Google’s homepage design system is a masterclass in restraint. One accent colour, a handful of neutral greys, precise typography weights, and pill/rounded corner radii that signal interactivity without noise.

Brand Keywords — neutral-functional, minimal-global, precision-accessible, speed-first

Withgoogle Design System: Minimal Global UI Precision

Brand Identity

Color Palette

Typography

Design Style

Full Analysis