Google Analytics — Design System Deep Dive

1. Brand Overview

Google Analytics is a product under the Google Marketing Platform umbrella, and its design language is a direct descendant of Google’s broader Material-inspired ecosystem. This isn’t just a “blue and white” site — it’s a carefully engineered interface meant to communicate trust, clarity, and tech authority.

The vibe is straightforward. Minimal ornamentation. Everything feels like it’s been stripped down to only what’s necessary for comprehension and interaction. That’s intentional — analytics tools deal with dense, often intimidating data; the UI’s job is to make it approachable without feeling dumbed down.

Typography and spacing follow Google’s 8px grid discipline. There’s not much visual fluff — shadows are used sparingly, borders are subtle, and color accents carry the weight of hierarchy. The primary blue (#1a73e8) is the anchor for CTAs and focus states, while neutrals handle most surfaces and text.

Audience-wise, this is for marketing managers, analysts, and UX pros who live in dashboards. The design language leans heavily on functional clarity and accessibility, while still fitting neatly into the family of Google products. If you’ve used Gmail or Google Drive, the visual rhythm here will feel familiar — because it’s designed to.

What stands out? The restraint. They could have gone heavy on gradients or data-viz style flair; instead, they keep it strictly utilitarian. That’s smart — it keeps the focus on the data. And because this is Google, the design system is consistent across breakpoints — from mobile to large desktop, every spacing increment, font size, and hover state is accounted for.

Odd choice: The hover state on the primary button changes to rgb(5, 85, 36) — a deep green. This is unusual for a blue-dominant brand, and it’s one of the few moments where the palette feels inconsistent with the rest of the system.

2. Color System

2.1 Primary Colors

The star is rgb(26, 115, 232) (#1a73e8). This is Google’s well-known action blue. It’s everywhere in their ecosystem — CTAs, links, active states. Psychologically, it’s trustworthy, non-threatening, and “Google-y.” Compared to competitors like Adobe Analytics (which leans into purples) or Mixpanel (which uses dark navy), Google’s blue is brighter and more optimistic.

The secondary semantic color here is “transparent” — rgba(0, 0, 0, 0) — essentially a placeholder for non-colored surfaces.

2.2 Complete Palette

2.3 Color Relationships

Most text-on-background combinations meet WCAG AA — white #ffffff on primary blue #1a73e8 is high contrast. The darker neutrals (#202124, #414141) against white backgrounds are readable even at smaller sizes.

No explicit dark mode palette is present in the extracted data — this is a light-mode-first design.

2.4 Usage Guide

• Works well: Primary blue for interactive elements (buttons, links), neutrals for everything else.
• Avoid: Using blue for static headings — it dilutes its interactive signal.
• Caution: That hover green (rgb(5, 85, 36)) is an outlier — use it only where the system dictates.

3. Typography

3.1 Font Families

Two Google-owned sans-serifs dominate:

• Google Sans — primary heading font, fallback: Roboto, Arial, Helvetica.
• Product Sans — occasional heading use, fallback: Arial, Helvetica.
• Roboto — body text, links, buttons, fallback: Arial, Helvetica.

Source: Google Fonts. No Adobe Fonts. No variable font usage.

3.2 Type Scale

3.3 Hierarchy

The scale is tight. Big jumps at the top (76 → 56 → 44) give strong visual hierarchy for hero sections. Below that, the system converges around 22px, 18px, and 16px — common for UI-heavy products where readability and density matter.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px scale. Common increments:

4.2 Layout

Breakpoints range from 414px (small mobile) up to 1441px+. The variety suggests fine-tuned responsive adjustments, not just standard mobile/tablet/desktop tiers. Likely used to tweak container widths and grid layouts for specific device classes.

5. Visual Elements

Border Radius

Two values:

• 2px — buttons, small clickable elements.
• 50% — circular avatars/icons (social share icons, nav drawer toggle).

Shadows

Sparse use:

1. rgb(218, 220, 224) 0px -1px 0px 0px inset
2. rgba(0, 0, 0, 0.12) 0px 2px 6px 0px, rgb(218, 220, 224) 0px -1px 0px 0px inset
3. rgba(0, 0, 0, 0.12) 0px 1px 1.5px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px
4. rgb(218, 220, 224) 0px 1px 0px 0px inset

These are subtle — no heavy drop shadows.

Borders

Mostly 1px solid rgb(218, 220, 224) for dividers. Occasional 2px solid white for buttons in focus states.

6. Components

6.1 Buttons

Primary button defaults:

• Background: #1a73e8
• Text: #ffffff
• Padding: 10px 18px 9px
• Radius: 2px
• No border or shadow.

Hover: Background rgb(5, 85, 36) (!), text rgb(23, 78, 166), box-shadow rgba(0, 0, 0, 0.12) 0px 2px 4px.

Active: Background rgb(23, 78, 166).

Focus: Background rgba(32, 33, 36, 0.06), border 2px solid rgb(23, 78, 166).

6.2 Links

Four styles:

1. Blue (#1a73e8), weight 300, hover to charcoal (#202124).
2. Black (#000000), weight 400, no hover change.
3. Medium gray (#5f6368), hover to light gray (#dadce0).
4. White (#ffffff), weight 500, hover to charcoal.

6.3 Forms

Select inputs:

• Default: Background #f8f9fa, text #5f6368, padding 0px 24px 0px 2px.
• Focus: Background #e8eaed, text #202124, border-color #1a1a1a, outline 10px solid #e8eaed.

6.4 Cards

Not explicitly extracted — likely white surface with subtle border or inset shadow.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-primary: #1a73e8;
  --color-secondary: transparent;
  --color-dark-gray: #414141;
  --color-medium-gray: #5f6368;
  --color-charcoal: #202124;
  --color-white: #ffffff;

  /* Typography */
  --font-google-sans: 'Google Sans', Roboto, Arial, Helvetica;
  --font-product-sans: 'Product Sans', Arial, Helvetica;
  --font-roboto: 'Roboto', Arial, Helvetica;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13-33: 13.3333px;
  --space-15: 15px;
  --space-17: 17px;
  --space-18: 18px;
  --space-20: 20px;
  --space-26: 26px;
  --space-30: 30px;
  --space-40: 40px;
  --space-45: 45px;
  --space-50: 50px;
  --space-80: 80px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-inset-light: rgb(218, 220, 224) 0px -1px 0px 0px inset;
  --shadow-combo-1: rgba(0, 0, 0, 0.12) 0px 2px 6px 0px, rgb(218, 220, 224) 0px -1px 0px 0px inset;
  --shadow-combo-2: rgba(0, 0, 0, 0.12) 0px 1px 1.5px 0px, rgba(0, 0, 0, 0.24) 0px 1px 1px 0px;
  --shadow-inset-dark: rgb(218, 220, 224) 0px 1px 0px 0px inset;
}

8. AI Coding Assistant Prompt

# Google Analytics Design System Specification

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

## Brand Context
Google Analytics’ design language is functional, minimal, and part of Google’s Material-inspired ecosystem. Prioritizes clarity and trust over decoration. Blue accents signal interactivity; neutrals carry most of the interface weight.

## Color Palette
- Primary Blue: #1a73e8 — CTAs, primary buttons, links
- Transparent: transparent — background placeholder
- Dark Gray: #414141 — headers, background blocks
- Medium Gray: #5f6368 — body text, UI labels
- Charcoal: #202124 — titles, dark text
- White: #ffffff — surfaces, button text

## Typography
- Google Sans — headings (`'Google Sans', Roboto, Arial, Helvetica`)
- Product Sans — occasional headings (`'Product Sans', Arial, Helvetica`)
- Roboto — body, links, buttons (`'Roboto', Arial, Helvetica`)

| Element   | Size | Weight | Line Height | Use For |
|-----------|------|--------|-------------|---------|
| H1 hero   | 76px | 400    | 1.05        | Hero titles |
| H1 large  | 56px | 400    | 1.18        | Section headers |
| H1 medium | 44px | 400    | 1.30        | Subheaders |
| H1 small  | 22px | 400    | 1.36-1.44   | Small headings |
| Body lg   | 18px | 300-500| 1.44-1.67   | Paragraphs |
| Body md   | 16px | 300-700| 1.63-2.75   | UI text |
| Caption   | 14px | 400    | 1.57-1.86   | Labels |

## Spacing & Grid
Base: 8px grid. Scale includes: 1px, 2px, 4px, 5px, 6px, 8px, 9px, 10px, 12px, 13.33px, 15px, 17px, 18px, 20px, 26px, 30px, 40px, 45px, 50px, 80px.

## Border Radius
- sm: 2px — buttons, small elements
- full: 50% — avatars, circular icons

## Shadows & Depth
- Inset light: rgb(218,220,224) 0px -1px 0px 0px inset
- Combo 1: rgba(0,0,0,0.12) 0px 2px 6px, inset light
- Combo 2: rgba(0,0,0,0.12) 0px 1px 1.5px, rgba(0,0,0,0.24) 0px 1px 1px
- Inset dark: rgb(218,220,224) 0px 1px 0px 0px inset

## Component Specifications

### Primary Button
Default:
```css
background: #1a73e8;
color: #ffffff;
padding: 10px 18px 9px;
border-radius: 2px;
font-weight: 500;
font-size: 16px;
border: none;
```
Hover:
```css
background: rgb(5,85,36);
color: rgb(23,78,166);
box-shadow: rgba(0,0,0,0.12) 0px 2px 4px;
```
Active:
```css
background: rgb(23,78,166);
color: rgb(23,78,166);
```
Focus:
```css
background: rgba(32,33,36,0.06);
border: 2px solid rgb(23,78,166);
color: rgb(23,78,166);
```

### Links
Blue link: default `#1a73e8`, hover `#202124`. No underline.

Medium gray link: default `#5f6368`, hover `#dadce0`.

### Input Fields (select-one)
Default: bg `#f8f9fa`, text `#5f6368`, padding `0px 24px 0px 2px`.
Focus: bg `#e8eaed`, text `#202124`, border-color `#1a1a1a`, outline `10px solid #e8eaed`.

## Layout & Responsive Rules
Breakpoints: 414px, 470px, 480px, 500px, 568px, 600px, 601px, 620px, 767px, 768px, 900px, 1024px, 1180px, 1218px, 1299px, 1300px, 1344px, 1440px, 1441px.

## Interaction Rules
- Transitions: ~150ms ease for hover/focus state changes
- Focus indicators: 2px solid brand blue

## DO List
- Use ONLY colors from palette
- Maintain 8px grid spacing
- Use Google Sans for headings, Roboto for body
- Keep buttons at 2px radius
- Keep links underline-free unless specified

## DON'T List
- Don't add custom colors
- Don't mix blue with non-system accent colors
- Don't increase border radius beyond 2px unless full-circle
- Don't add heavy shadows

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #1a73e8;
  color: #ffffff;
  padding: 10px 18px 9px;
  border-radius: 2px;
  font-weight: 500;
  font-size: 16px;
}
.btn-primary:hover {
  background: rgb(5,85,36);
  color: rgb(23,78,166);
}
```

Select Input:
```css
.select {
  background: #f8f9fa;
  color: #5f6368;
  padding: 0 24px 0 2px;
  border: none;
}
.select:focus {
  background: #e8eaed;
  color: #202124;
  border-color: #1a1a1a;
  outline: 10px solid #e8eaed;
}
```

9. Summary

TL;DR — Google Analytics’ design system is blue-forward, neutral-heavy, and built for clarity. Small radius, sparse shadows, strict 8px grid. Everything feels intentional and consistent with Google’s broader product family.

Brand Keywords — data-minimalist, google-material, blue-action, utilitarian-clean, trust-driven