Gmail Brand Design System Deep-Dive

1. Brand Overview

Gmail’s design language is pure Google Material 3 — functional, clean, and frictionless. You’re not here to “explore” or “delight” in visual flourishes; you’re here to get in, process information, and get out. The interface is stripped of anything ornamental. Every pixel serves either usability or clarity.

The vibe is professional minimalism with a touch of friendliness. They avoid harsh monochrome by injecting a confident, saturated primary blue (#0b57d0) for actions and links. The rest is light neutrals, subtle grays, and functional feedback colors (error reds, success greens, secondary blues). The palette feels “Google” — bright, approachable, but still corporate enough to pass in enterprise contexts.

Gmail’s sign-in experience is a masterclass in restrained UI. Typography is uniform — Google Sans with occasional Roboto — no decorative type at all. Everything is 4px or 20px rounded corners depending on component type, which keeps the system consistent. Shadows are rare and subtle, used only for layered emphasis.

The target audience spans from casual users to corporate teams. That’s why the interface is so neutral — it has to work for someone signing in on a phone in a café and for a sysadmin provisioning accounts on a 4K monitor.

Design philosophy: efficiency first, brand second. Gmail doesn’t scream “Gmail” visually; it whispers “Google.” The sign-in flow is basically a Material Design template tuned for Gmail’s brand color and typography.

2. Color System

2.1 Primary Colors

The hero here is Primary Blue:
rgb(11, 87, 208) → #0b57d0

Psychologically, it’s confident and dependable — classic “trust me” blue. Compared to Microsoft Outlook’s blue (#0078D4), Gmail’s is slightly deeper and more saturated. This difference makes it pop more against white backgrounds and hold contrast against dark text without feeling neon.

Primary blue drives CTAs, links, focus rings, and brand touchpoints. It’s never used for backgrounds — always for interactive elements. This is key: Gmail avoids diluting the brand color by keeping it action-specific.

2.2 Complete Palette

2.3 Color Relationships

Primary blue against white hits AAA contrast. Against dark gray text, it’s comfortably readable. Error red (#b3261e) is strong enough for alerts without clashing with primary blue.

Dark mode colors (Inverse Surface #303030, Inverse On Surface #f2f2f2) maintain contrast by flipping luminance.

Accessibility: The palette passes WCAG for all main interactive elements. The only caution: mid-gray (#747775) on white is borderline for small text — keep it for borders or large text only.

2.4 Usage Guide

Works well:

• Primary Blue + White → crisp CTAs.
• Error Red + Error Container → clear validation.
• Tertiary Green + Tertiary Container → success states.

Avoid:

• Primary Blue on Secondary Blue — low contrast.
• Dark Gray (#444746) on Surface Dim (#d3dbe5) — too low for small text.
• Using Inverse Primary (#a8c7fa) as a background — it’s meant for text.

3. Typography

3.1 Font Families

Everything is Google Sans. It’s paired with fallbacks: Google Sans, roboto, Noto Sans Myanmar UI, Noto Sans Khmer, arial

Occasional use of Roboto for body text: Roboto, Arial

No decorative fonts — utilitarian sans-serifs only. This keeps the system aligned with Google’s global product suite.

3.2 Type Scale

3.3 Hierarchy

The scale is tight. H1 jumps to 44px, then collapses to 16px for most body content. This makes the UI feel uniform and prevents typography from crowding the limited space in sign-in flows.

Weights: 400 for body, 500 for actions. This subtle bump in weight makes buttons and links stand out without needing extra color.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid.

Values:

4.2 Layout

Breakpoints:

400px, 450px, 480px, 481px, 568px, 569px, 592px, 600px, 601px, 672px, 720px, 800px, 840px, 960px, 1240px, 1600px.

They’re tight increments — clearly tuned for multi-device layouts. The sign-in form responds progressively, not in big jumps.

5. Visual Elements

Border Radius

Values:

• 0px 8px 8px 0px → segmented controls (span)
• 4px → inputs, buttons, links
• 8px 0px 0px 8px → segmented controls (span)
• 8px → buttons, links
• 16px → panels, menus
• 20px → pill buttons
• 22px → div containers
• 28px → large divs

Rounded corners are consistent: 4px for form elements, 20px for pill actions.

Shadows

Single shadow style:
rgba(0,0,0,0.2) 0px 3px 5px -1px, rgba(0,0,0,0.14) 0px 6px 10px 0px, rgba(0,0,0,0.12) 0px 1px 18px 0px

Used sparingly — mostly for elevated modals.

Borders

• 2px solid #185abc → focus outlines
• 1px solid #747775 → neutral borders
• 2px inset #1f1f1f → iframe boundaries
• 2px solid #0b57d0 → active states

6. Components

6.1 Buttons

Primary Button (VfPpkd-LgbsSe):

Default:

• Background: #0b57d0
• Color: #ffffff
• Padding: 0px 24px
• Border-radius: 20px
• Border: none
• Font-weight: 500, size: 14px

Hover:

• Opacity: 0.08
• Box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15)

Active:

• Opacity: 0.1
• Box-shadow: deeper variant

Focus:

• Outline: 2px solid #0b57d0
• Box-shadow: 0 0 0 2px #d3e3fd
• Background: #f0f4f9

6.2 Links

Type 1:

• Color: #0b57d0
• Font-weight: 500
• No underline default

Type 2:

• Color: #1f1f1f
• Font-weight: 400
• Underline on hover

6.3 Forms

Email input:

• Border-radius: 4px
• Padding: 12px 14px
• Focus color: #0b57d0

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #0b57d0;
  --color-white: #ffffff;
  --color-dark-gray: #444746;
  --color-mid-gray: #747775;
  --color-inverse-surface: #303030;
  --color-outline-variant: #c4c7c5;
  --color-inverse-on-surface: #f2f2f2;
  --color-surface-container-low: #f8fafd;
  --color-shadow: #000000;
  --color-surface-container: #f0f4f9;
  --color-surface-dim: #d3dbe5;
  --color-surface-container-highest: #dde3ea;
  --color-error-container: #f9dedc;
  --color-error: #b3261e;
  --color-inverse-primary: #a8c7fa;
  --color-surface-variant: #e1e3e1;
  --color-on-error: #ffffff;
  --color-tertiary-container: #c4eed0;
  --color-on-error-container: #8c1d18;
  --color-on-secondary-container: #004a77;
  --color-tertiary: #146c2e;
  --color-surface-container-high: #e9eef6;
  --color-outline: #747775;
  --color-on-primary-container: #0842a0;
  --color-secondary: #00639b;
  --color-secondary-container: #c2e7ff;
  --color-primary-container: #d3e3fd;
  --color-on-surface-variant: #444746;
  --color-on-background: #1f1f1f;
  --color-on-tertiary-container: #0f5223;

  /* Typography */
  --font-google-sans: "Google Sans", roboto, "Noto Sans Myanmar UI", "Noto Sans Khmer", arial;
  --font-roboto: Roboto, Arial;
  --font-size-h1: 44px;
  --font-size-body: 16px;
  --font-size-caption: 14px;
  --font-size-small: 12px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-6: 6px;
  --space-8: 8px;
  --space-9: 9px;
  --space-11: 11px;
  --space-12: 12px;
  --space-13: 13px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-36: 36px;
  --space-48: 48px;
  --space-108: 108px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 22px;
  --radius-xxl: 28px;

  /* Shadows */
  --shadow-elevated: rgba(0,0,0,0.2) 0px 3px 5px -1px, rgba(0,0,0,0.14) 0px 6px 10px 0px, rgba(0,0,0,0.12) 0px 1px 18px 0px;
}

8. AI Coding Assistant Prompt

# Gmail Design System Specification

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

## Brand Context
Gmail’s design system is focused on clarity, efficiency, and Material 3 consistency. It uses a restrained color palette with a bold primary blue for interactive elements, Google Sans typography, and an 8px spacing grid.

## Color Palette
- Primary Blue: #0b57d0 — CTAs, primary buttons, links, focus outlines
- White: #ffffff — Background, text on dark
- Dark Gray: #444746 — Secondary text
- Mid Gray: #747775 — Outlines, borders
- Inverse Surface: #303030 — Dark mode backgrounds
- Outline Variant: #c4c7c5 — Divider lines
- Inverse On Surface: #f2f2f2 — Text in dark mode
- Surface Container Low: #f8fafd — Light panels
- Shadow: #000000 — Shadows
- Surface Container: #f0f4f9 — Cards, modals
- Surface Dim: #d3dbe5 — Disabled backgrounds
- Surface Container Highest: #dde3ea — Elevated surfaces
- Error Container: #f9dedc — Error backgrounds
- Error Red: #b3261e — Error text/icons
- Inverse Primary: #a8c7fa — Text on dark primary
- Surface Variant: #e1e3e1 — Variant surfaces
- On Error: #ffffff — Text on error
- Tertiary Container: #c4eed0 — Success backgrounds
- On Error Container: #8c1d18 — Error text in container
- On Secondary Container: #004a77 — Text on secondary
- Tertiary Green: #146c2e — Success text/icons
- Surface Container High: #e9eef6 — Elevated surfaces
- Outline: #747775 — Borders
- On Primary Container: #0842a0 — Text on primary container
- Secondary Blue: #00639b — Secondary CTAs
- Secondary Container: #c2e7ff — Secondary backgrounds
- Primary Container: #d3e3fd — Light primary backgrounds
- On Surface Variant: #444746 — Text on variant surfaces
- On Background: #1f1f1f — Body text
- On Tertiary Container: #0f5223 — Text on success backgrounds

## Typography
- Font Family: "Google Sans", roboto, "Noto Sans Myanmar UI", "Noto Sans Khmer", arial
- Body Alt: Roboto, Arial
| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 44px | 400 | 1.18 | Page titles |
| Body | 16px | 400 | 1.50 | Form text |
| Button | 14px | 500 | — | Buttons |
| Caption | 14px | 400 | 1.43 | Secondary labels |
| Small | 12px | 400 | 1.33 | Microcopy |

## Spacing & Grid
Base: 8px grid. Values: 1, 2, 3, 6, 8, 9, 11, 12, 13, 16, 24, 32, 36, 48, 108px.

## Border Radius
- sm: 4px — inputs, small buttons
- md: 16px — menus, panels
- lg: 20px — pill buttons
- xl: 22px — containers
- xxl: 28px — large containers

## Shadows & Depth
- Elevated: rgba(0,0,0,0.2) 0px 3px 5px -1px, rgba(0,0,0,0.14) 0px 6px 10px 0px, rgba(0,0,0,0.12) 0px 1px 18px 0px

## Component Specifications

### Primary Button
Default:
```css
background: #0b57d0;
color: #ffffff;
padding: 0px 24px;
border-radius: 20px;
font-weight: 500;
font-size: 14px;
border: none;

Hover: opacity: 0.08; box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15)
Active: opacity: 0.1; deeper shadow
Focus: outline: 2px solid #0b57d0; box-shadow: 0 0 0 2px #d3e3fd; background: #f0f4f9

Links

Type 1: #0b57d0, weight 500, no underline default.
Type 2: #1f1f1f, weight 400, underline on hover.

Input

Border-radius: 4px, padding: 12px 14px, focus color #0b57d0.

Layout & Responsive Rules

Breakpoints: 400px, 450px, 480px, 481px, 568px, 569px, 592px, 600px, 601px, 672px, 720px, 800px, 840px, 960px, 1240px, 1600px.

Interaction Rules

• Transition: 150ms ease
• Focus indicators: 2px solid primary blue

DO

• Use only palette colors
• Maintain 8px grid
• Use Google Sans for headings
• Reserve primary blue for interactive elements
• Keep shadows subtle

DON'T

• Use custom colors
• Mix corner styles
• Overuse shadows
• Make text smaller than 12px

Code Examples

Primary Button:

.btn-primary {
  background: #0b57d0;
  color: #ffffff;
  padding: 0 24px;
  border-radius: 20px;
  font-weight: 500;
  font-size: 14px;
  border: none;
}
.btn-primary:hover { opacity: 0.08; }
.btn-primary:focus { outline: 2px solid #0b57d0; }

Input:

.input {
  border-radius: 4px;
  padding: 12px 14px;
  border: none;
}
.input:focus { color: #0b57d0; }

---

## 9. Summary

**TL;DR** — Gmail’s design system is pure Material 3 with a bold primary blue, strict 8px grid, Google Sans, and minimal shadows. It’s tuned for clarity and universality.

**Brand Keywords**:  
- clarity-first  
- material-consistent  
- efficiency-driven  
- trust-blue  
- global-neutral