Zoom Brand Design System Deep Dive

1. Brand Overview

Zoom’s design system is exactly what you’d expect from a brand that essentially became the name for online meetings. It’s clean, highly functional, and engineered for trust and ease. The vibe is professional but friendly — they don’t go full corporate gray, nor do they swing into playful startup territory. They sit in the middle: approachable, but you know they mean business.

The site is built to support a huge range of audiences. You’ve got enterprise IT buyers, small business owners, educators, and everyday users — all landing in the same place. That means the design system has to be flexible. And it is. The palette is tight but covers both high-contrast action states and softer neutrals. Typography is clear, with no decorative experiments. Spacing is disciplined. Buttons are unmistakable.

What’s interesting is that Zoom doesn’t lean on heavy visual flourishes. There are shadows, but sparingly and with low alpha values. Borders are used for separation. Radius is consistent — lots of 8px and 12px, plus the occasional full pill. It feels like they’ve pruned the system down to exactly what they need to communicate clarity and reliability.

They also have a lot of micro-variants in type styles — multiple weights and minute tracking differences. That tells me their design team is obsessed with visual rhythm and optical balance, not just sticking to a rigid single heading style. This works because Zoom is a high-traffic, high-complexity product. UI density varies, and they’ve built type styles to adapt.

My overall take: Zoom’s design language is utilitarian with polished edges. It’s not trying to win “most beautiful SaaS site” awards — it’s here to get people to click “Join Meeting” without hesitation. And that’s exactly the right move for them.

2. Color System

2.1 Primary Colors

The hero color is #0b5cff (rgb(11, 92, 255)). This is the unmistakable Zoom blue. It’s bright, saturated, and has enough depth to avoid looking cheap. Psychologically, this shade conveys trust and stability but with energy — the deep saturation gives it a “ready for action” feel.

Compared to competitors: Microsoft Teams goes for a muted purple (#6264A7), Google Meet uses a green/blue gradient. Zoom’s blue is more assertive and cleaner. It reads better against white backgrounds and holds up in accessibility tests for buttons and links.

2.2 Complete Palette

2.3 Color Relationships

Zoom’s blue (#0b5cff) against white (#ffffff) scores a contrast ratio above 4.5:1 — meeting WCAG AA for normal text. Against black (#000000), it’s even higher. The palette’s grays (#696b6e, #5b5b5b) are light enough for text on white but would fail if reversed without bumping weight or size.

Dark mode isn’t explicitly defined in the extracted data. The palette leans heavily on light backgrounds (#ffffff, #e6f0ff) with dark text. Navy (#001a5e) and black could be repurposed for dark mode surfaces, but they’d need lighter text colors.

2.4 Usage Guide

Works well:

• Primary Blue with white text (primary buttons)
• Navy with white text (banner buttons)
• Light Blue backgrounds with black text (low-stress components)
• Gray text on white for secondary content

Avoid:

• Primary Blue text on Light Blue background — too low contrast
• White text on Light Blue — fails WCAG
• Using too many blues together without hierarchy — the palette is tight, so modulation matters.

3. Typography

3.1 Font Families

Two core families:

• Happy Face Semi Bold — custom? fallback: Helvetica, Arial, Noto Sans JP/KR/SC/TC, Noto Sans. Used for headings and some buttons.
• Almaden Sans — fallback: Helvetica, Noto Sans JP/KR/SC/TC, sometimes Arial. Used for most body, links, and UI text.
• icozm — icon font, likely for glyphs.

No Google Fonts or Adobe Fonts — all likely self-hosted.

3.2 Type Scale

Here’s the extracted type table (truncated for sanity but complete in data):

…and so on. The scale is not a perfect modular scale — there are micro-adjustments (like 17.92px body text) for optical reasons.

3.3 Hierarchy

They use Happy Face for big, friendly headings, Almaden Sans for precision in UI. Weight shifts (400–700) create visual emphasis without color changes. Small caps or uppercase are rare — uppercase only in some button styles (900 weight, huge letter spacing). This keeps reading flow natural.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid. Common values: 1px, 2px, 4px, 6px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 32px, 40px, 60px.

Frequency matters: 6px appears 437 times — heavy use in micro-spacing inside components. 10px (228 uses) is common for padding. 16px (157 uses) for button padding and UI gaps.

4.2 Layout

Breakpoints:

• 400px, 425px, 426px — mobile fine-tuning
• 476px, 481px, 482px — small tablet
• 530px, 550px — mid tablet
• 600px, 700px — large tablet
• 768px — classic tablet breakpoint
• 896px — small desktop
• 1024px, 1025px — desktop

This is granular. They’re tuning for specific device widths.

5. Visual Elements

Border Radius

They use a wide range:

• 2px — buttons, small UI
• 6px — spans, badges, small buttons (107 uses)
• 8px — cards, buttons (49 uses)
• 12px — buttons, cards (52 uses)
• 16px — images, cards (17 uses)
• 20px — ai components, divs (28 uses)
• 50% — avatars, circles (29 uses)
• 100px — pill buttons (15 uses)
• 999px — extreme pills (5 uses)

This is a clear hierarchy: small radius for dense UI, larger for primary CTAs, full for avatars.

Shadows

Sparse, low alpha:

• rgba(0, 21, 255, 0.09) 0px 15px 80px... — brand-tinted shadows
• rgba(0, 0, 0, 0.05) 0px 4px 10px — soft depth
• Heavier multi-layer shadows for modals

They avoid strong drop shadows except in interactive lifts.

Borders

Common: 1px solid rgb(209, 222, 242) — pale blue borders for secondary buttons. Dividers use rgb(105, 107, 110) or rgb(0, 5, 61).

6. Components

6.1 Buttons

Primary Button (#0b5cff)

• Default: bg #0b5cff, white text, 8px x 16px padding, radius 12px, border 1px solid same blue.
• Hover: bg rgb(247, 247, 252), text rgb(34, 133, 247), subtle shadow.
• Active: bg rgb(14, 114, 237), white text.
• Focus: outline black 1px, bg rgb(30, 174, 219), white text.

Secondary Button

• Default: bg rgb(243, 248, 255), text black, border 1px solid #d1def2.
• Hover: same hover shadow, bg rgb(247, 247, 252), text blue.
• Active: same as primary active.

Banner Button (Dark)

• Default: bg #00053d, white text, radius 12px.
• Hover: bg rgb(247, 247, 252), text blue.
• Active: same as primary active.

Banner Button (Light)

• Default: bg white, text navy, border pale blue.

Carousel Button

• Default: bg #e6f0ff, black text, radius 50%.
• Hover/Focus: bg rgb(30, 174, 219), white text.

Misc:

• Small uppercase buttons — 900 weight, large letter spacing.
• Livesdk invitation — pill radius 28px.

6.2 Links

Variants:

• Blue (#0b5cff) no underline, hover darker blue.
• Navy (#00053d) underline default, hover lose underline.
• White text links underline default, hover no underline.

6.3 Forms

No text inputs extracted here — possibly styled in app.

6.4 Cards

Cards use 8–12px radius, pale blue/white backgrounds, minimal shadow (rgba(0,0,0,0.05)).

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-1: #696b6e;
  --color-primary-blue: #0b5cff;
  --color-light-blue: #e6f0ff;
  --color-pale-blue: #d1def2;
  --color-dark-gray: #5b5b5b;
  --color-navy: #001a5e;

  /* Typography */
  --font-happy-face: "Happy Face Semi Bold", Helvetica, Arial, Noto Sans JP, Noto Sans KR, Noto Sans SC, Noto Sans TC, Noto Sans;
  --font-almaden: "Almaden Sans", Helvetica, Noto Sans JP, Noto Sans KR, Noto Sans SC, Noto Sans TC, Arial;
  --font-icozm: "icozm";

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-60: 60px;

  /* Border Radius */
  --radius-2: 2px;
  --radius-6: 6px;
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-pill: 100px;
  --radius-full: 50%;
  --radius-extreme: 999px;

  /* Shadows */
  --shadow-brand: rgba(0, 21, 255, 0.09) 0px 15px 80px 0px, rgba(0, 21, 255, 0.05) 0px 3.35px 17.869px 0px, rgba(0, 21, 255, 0.04) 0px 0.998px 5.32px 0px;
  --shadow-soft: rgba(0, 0, 0, 0.05) 0px 4px 10px 0px;
}

8. AI Coding Assistant Prompt

# Zoom Design System Specification

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

## Brand Context
Zoom values clarity, trust, and efficiency. The design is approachable but professional, using a disciplined palette and consistent spacing to create a polished, functional experience.

## Color Palette
- Black: #000000 — Main text, icons
- White: #ffffff — Backgrounds, text on dark
- Gray 1: #696b6e — Secondary text
- Primary Blue: #0b5cff — Primary buttons, links
- Light Blue: #e6f0ff — Background accents
- Pale Blue: #d1def2 — Borders, secondary buttons
- Dark Gray: #5b5b5b — Footer text
- Navy: #001a5e — Banner buttons, hover states

## Typography
- Headings: "Happy Face Semi Bold", Helvetica, Arial, Noto Sans
- Body/UI: "Almaden Sans", Helvetica, Noto Sans
- Icon font: "icozm"

| Level | Font | Size | Weight | Line Height | Use For |
|-------|------|------|--------|-------------|---------|
| H1 | Happy Face Semi Bold | 54px | 400 | 1.12 | Page titles |
| H2 | Happy Face Semi Bold | 46px | 400 | 1.15 | Section headings |
| H3 | Happy Face Semi Bold | 32px | 400 | 1.20 | Subheadings |
| Body | Almaden Sans | 17.92px | 400 | 1.40 | Paragraphs |
| Button | Almaden Sans | 16px | 600 | 1.20 | CTAs |
| Caption | Almaden Sans | 14px | 500 | 1.20 | Small labels |

## Spacing & Grid
Base: 8px. Scale: 1px, 2px, 4px, 6px, 8px, 10px, 12px, 15px, 16px, 20px, 24px, 32px, 40px, 60px.
Use multiples for padding, margin, and gaps.

## Border Radius
- sm: 2px — small buttons
- md: 6px — badges
- lg: 8px — cards
- xl: 12px — CTAs
- pill: 100px — large pills
- full: 50% — avatars
- extreme: 999px — special pills

## Shadows & Depth
- Brand shadow: rgba(0, 21, 255, 0.09)... — modals, lifted cards
- Soft shadow: rgba(0, 0, 0, 0.05)... — subtle depth

## Component Specifications

### Primary Button
Default: bg #0b5cff, color #ffffff, padding 8px 16px, radius 12px, border 1px solid #0b5cff.
Hover: bg #f7f7fc, color #2285f7, subtle shadow.
Active: bg #0e72ed, color #ffffff.
Focus: outline 1px solid #000000, bg #1eaedb, box-shadow #fff 0 0 0 2px, #0b5cff 0 0 0 4px.

### Secondary Button
Default: bg #f3f8ff, color #00031f, border 1px solid #d1def2.
Hover: bg #f7f7fc, color #2285f7.

### Banner Button (Dark)
Default: bg #00053d, color #ffffff.

### Link
Blue link: color #0b5cff, hover #3860be.
Navy link: color #00053d, underline default, remove underline hover.

## Layout & Responsive Rules
Breakpoints: 400px, 425px, 426px, 476px, 481px, 482px, 530px, 550px, 600px, 700px, 768px, 896px, 1024px, 1025px.
Page padding: multiples of 8px.
Grid gaps: multiples of 8px.

## Interaction Rules
Transition: 150ms ease for hover/focus.
Focus: visible outline + box-shadow.
Disabled: opacity 0.5, cursor not-allowed.

## DO List
- Use only palette colors.
- Maintain 8px grid spacing.
- Use Happy Face for headings, Almaden Sans for body.
- Keep radius consistent per component type.
- Ensure text contrast meets WCAG AA.

## DON'T List
- Don't invent new colors.
- Don't mix sharp and rounded corners.
- Don't overload shadows.
- Don't use uppercase unless specified.

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #0b5cff;
  color: #fff;
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid #0b5cff;
  font-weight: 500;
  font-size: 14px;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #f7f7fc;
  color: #2285f7;
}
.btn-primary:focus {
  outline: 1px solid #000;
  box-shadow: #fff 0 0 0 2px, #0b5cff 0 0 0 4px;
}
```

### Card
```css
.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: rgba(0,0,0,0.05) 0px 4px 10px 0px;
  padding: 16px;
}
```

### Input
```css
.input {
  border: 1px solid #d1def2;
  border-radius: 6px;
  padding: 8px;
  font-size: 16px;
}
.input:focus {
  border-color: #0b5cff;
  outline: none;
  box-shadow: #fff 0 0 0 2px, #0b5cff 0 0 0 4px;
}
```

9. Summary

TL;DR — Zoom’s design system is clean, disciplined, and tuned for clarity. Blue is the hero, typography is utilitarian with subtle polish, and spacing stays on an 8px grid.

Brand Keywords:

• trust-focused
• grid-disciplined
• blue-driven
• professional-friendly
• shadow-light