<!-- Generated by ExtractVibe — https://extractvibe.com/brand/zoom.us -->
<!-- Extracted: 2026-05-03T16:54:28.250Z | Schema: v1 | Quality: 100/100 -->
---
version: alpha
name: "Zoom"
description: "Zoom projects a polished, enterprise-grade presence that balances professional reliability with modern accessibility. The brand feels efficient and trustworthy, using a clean, structured layout to convey that complex workflows are simplified through their platform."
colors:
  primary: "#0b5cff"
  tertiary: "#00031f"
  neutral: "#696b6e"
  surface: "#ffffff"
  on-surface: "#000000"
  on-surface-secondary: "#696b6e"
typography:
  display-lg:
    fontFamily: "Happy Face Semi Bold"
    fontSize: "54px"
    fontWeight: "500"
    lineHeight: "60.48px"
  headline-lg:
    fontFamily: "Happy Face Semi Bold"
    fontSize: "54px"
    fontWeight: "500"
    lineHeight: "72.9px"
  headline-md:
    fontFamily: "Almaden Sans"
    fontSize: "20px"
    fontWeight: "600"
    lineHeight: "28px"
    letterSpacing: "-0.2px"
  headline-sm:
    fontFamily: "Almaden Sans"
    fontSize: "14px"
    fontWeight: "600"
    lineHeight: "21px"
  body-md:
    fontFamily: "Almaden Sans"
    fontSize: "16px"
    fontWeight: "400"
    lineHeight: "16px"
rounded:
  sm: "8px"
  md: "10px"
  lg: "12px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-primary:
    backgroundColor: "#0b5cff"
    textColor: "#ffffff"
    rounded: "8px"
    padding: "14px 16px"
    fontSize: "16px"
    fontWeight: "600"
    borderColor: "#ffffff"
  button-secondary:
    backgroundColor: "#e6f0ff"
    textColor: "#00053d"
    rounded: "12px"
    padding: "4px 20px"
    fontSize: "14px"
    fontWeight: "600"
    borderColor: "#e6f0ff"
    borderWidth: "1px"
---

# Zoom — Design System

## Overview

Zoom's design system embodies the archetypes of The Ruler and The Sage. It projects an authoritative yet approachable presence, akin to the established professionalism of Microsoft Teams and the streamlined efficiency of Slack. The aesthetic prioritizes clarity and functionality, ensuring that complex collaborative tasks are presented with intuitive simplicity. This design language is inherently trustworthy and modern, reflecting a commitment to enterprise-grade reliability without sacrificing contemporary appeal. It is built to facilitate seamless interaction and convey a sense of controlled power, where technology serves to empower rather than complicate.

This system deliberately avoids overly playful or informal design elements. It does not utilize vibrant, attention-seeking palettes or whimsical typography. The focus remains on a clean, structured layout that supports efficient workflows and clear communication. Every design decision reinforces the brand's core values: professional collaboration, streamlined efficiency, and unwavering reliability. The visual identity is a direct extension of the platform's promise to simplify and enhance professional connectivity, ensuring a consistent and dependable user experience across all touchpoints.

**Key characteristics:**

- Vibe — professional, collaborative, efficient, trustworthy, modern, corporate
- Archetypes — The Ruler, The Sage
- Comparable to — Slack, Microsoft Teams, Asana, Notion
- Design era — contemporary-minimal
- Emotional tone — reliable-efficient
- Target audience — Enterprise and mid-market professionals seeking robust, all-in-one collaboration tools for remote and hybrid work environments.
- Visual energy — 6/10 (moderate)

## Colors

The primary color, `#0b5cff`, establishes Zoom's core identity as professional and trustworthy. This vibrant blue signifies reliability and innovation, aligning with the brand's corporate yet modern vibe. The dominant use of `#ffffff` for surfaces reinforces cleanliness, clarity, and efficiency, providing a neutral canvas that highlights content and user interactions. This restrained palette ensures visual focus remains on functionality, communicating an organized and approachable digital environment.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#0b5cff` | Royal Blue |
| accent / tertiary | `#00031f` | Black |
| surface | `#ffffff` | White |
| background | `#ffffff` | White |
| text | `#000000` | Black |
| secondary text | `#696b6e` | Dim Gray |
| muted | `#696b6e` | Dim Gray |

## Typography

The typography system leverages 'Almaden Sans' for body text and 'Happy Face Semi Bold' for key headings. 'Almaden Sans' provides a clean, highly readable foundation that communicates efficiency and professionalism. 'Happy Face Semi Bold' introduces a subtle, modern distinction for titles, signaling approachability within a corporate framework. The hierarchy is clear and functional, guiding the user's eye through content with minimal cognitive load, reinforcing the brand's commitment to clarity and streamlined information delivery.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Almaden Sans | body | self-hosted | 400, 600 |
| Happy Face Semi Bold | heading | self-hosted | 500 |
| Almaden Sans | heading | self-hosted | 600 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Happy Face Semi Bold | 54px | 500 | 60.48px | — |
| Heading 2 | Happy Face Semi Bold | 54px | 500 | 72.9px | — |
| Heading 3 | Almaden Sans | 20px | 600 | 28px | -0.2px |
| Heading 4 | Almaden Sans | 14px | 600 | 21px | — |
| Body | Almaden Sans | 16px | 400 | 16px | — |

### Conventions

- Heading case — title-case
- Body line-height — 16px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| card | `rgba(0, 0, 0, 0.04) 0px 33px 26px 0px` |
| dropdown | `rgba(0, 0, 0, 0.2) 0px -9px 75px 0px, rgba(0, 0, 0, 0.15) 0px -2.01px 20px 0px, rgba(0, 0, 0, 0.1) 0px -0.599px 10px 0px` |
| dropdown | `rgba(0, 0, 0, 0.05) 0px 4px 10px 0px` |

### Gradients

- `radial-gradient(400% 240% at 50% 100%, rgb(255, 255, 255), rgb(255, 255, 255) 10%, 15%, rgb(199, 197, 253) 16%, rgba(154, 103, 250, 0.6) 17%, 21%, rgb(38, 76, 171) 28%, 35%, rgb(0, 3, 29) 45%, rgb(0, 3, 29))`
- `linear-gradient(-81.05deg, rgb(251, 50, 126) 0%, rgb(11, 92, 255) 100%)`
- `linear-gradient(90deg, rgb(141, 93, 247), rgb(108, 176, 255) 45%, rgb(23, 34, 246))`

## Shapes

Border-radius scale:

- `sm` — 8px
- `md` — 10px
- `lg` — 12px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Primary**

- Background — `#0b5cff`
- Text — `#ffffff`
- Radius — `8px`
- Padding — `14px 16px`
- Font size — `16px`
- Font weight — `600`
- Border — ` solid #ffffff`
- Sample copy — "Sign Up Free"

**Secondary**

- Background — `#e6f0ff`
- Text — `#00053d`
- Radius — `12px`
- Padding — `4px 20px`
- Font size — `14px`
- Font weight — `600`
- Border — `1px solid #e6f0ff`
- Sample copy — "Contact Sales"

## Do's and Don'ts

### Do

- Use Almaden Sans (400 weight) for body copy with a strict 16px line-height, and Almaden Sans (600 weight) or Happy Face Semi Bold (500 weight) for headings.
- Format all headings in Title Case to maintain a structured, editorial feel, while keeping body text in sentence case for readability.
- Style primary CTAs with a solid #0b5cff background, #ffffff text, 8px border-radius, and 14px vertical / 16px horizontal padding.
- Style secondary CTAs with a #e6f0ff background, #00053d text, 12px border-radius, and 4px vertical / 20px horizontal padding.
- Apply subtle, multi-layer shadows to interactive elements like dropdowns (e.g., rgba(0,0,0,0.2) 0px -9px 75px 0px) to create depth without clutter.
- Use the primary brand blue (#0b5cff) for key interactive states and accents, reserving #00031f for high-contrast text and #ffffff for backgrounds.
- Incorporate gradients sparingly, specifically using the linear-gradient from rgb(251, 50, 126) to rgb(11, 92, 255) for hero sections or feature highlights to add visual interest.
- Maintain a base spacing unit of 2px for consistent padding and margins across all UI components.

### Don't

- Do not use Title Case for body copy; reserve it exclusively for headings to preserve the formal/casual balance.
- Avoid heavy, solid shadows on buttons; keep button surfaces flat and clean to emphasize accessibility and modernity.
- Do not use serif fonts; the brand is strictly sans-serif (Almaden Sans/Happy Face) to convey modern efficiency.
- Avoid excessive emoji usage; limit to light, professional contexts where appropriate, never in primary navigation or critical alerts.
- Do not use sharp corners (0px radius) on UI elements; maintain a minimum of 8px radius for buttons and cards to soften the corporate aesthetic.
- Avoid using the accent color #00031f for large background areas; it is reserved for text and high-contrast elements against white.
- Do not use multi-layer shadows on static cards unless they are interactive; keep static content flat with minimal depth (rgba(0,0,0,0.04)).

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 6/10 | balanced |
| Playful ↔ Serious | 4/10 | playful |
| Enthusiastic ↔ Matter-of-fact | 7/10 | matter-of-fact |
| Respectful ↔ Irreverent | 2/10 | respectful |
| Technical ↔ Accessible | 6/10 | balanced |

### Copywriting style

- Avg. sentence length — 18 words
- Vocabulary — moderate
- Jargon — some
- CTA style — action-oriented imperative verbs
- Rhetorical devices — metaphor, repetition, hyperbole

### Sample copy

> Find out what's possible when work connects

> One platform. Endless ways to work together.

> Zoom AI Companion helps by:

> Trusted by millions. Built for you.

> Zoom Workplace turns my brainwaves into polished gems.

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/zoom.us) | 100% |
| primary | color | png | [link](https://extractvibe.com/api/assets/brands/zoom.us/logo-4.png) | 80% |
| primary | color | svg | [link](https://extractvibe.com/api/assets/brands/zoom.us/logo-17.svg) | 80% |
| primary | color | svg | [link](https://extractvibe.com/api/assets/brands/zoom.us/logo-16.svg) | 80% |
| primary | color | svg | [link](https://extractvibe.com/api/assets/brands/zoom.us/logo-14.svg) | 80% |
| primary | color | svg | [link](https://extractvibe.com/api/assets/brands/zoom.us/logo-11.svg) | 80% |
| primary | color | svg | [link](https://extractvibe.com/api/assets/brands/zoom.us/logo-12.svg) | 80% |
| primary | color | svg | [link](https://extractvibe.com/api/assets/brands/zoom.us/logo-13.svg) | 80% |
| wordmark | color | jpg | [link](https://extractvibe.com/api/assets/brands/zoom.us/logo-5.jpg) | 80% |
| wordmark | color | jpg | [link](https://extractvibe.com/api/assets/brands/zoom.us/logo-6.jpg) | 80% |
| wordmark | color | jpg | [link](https://extractvibe.com/api/assets/brands/zoom.us/logo-7.jpg) | 80% |
| wordmark | color | jpg | [link](https://extractvibe.com/api/assets/brands/zoom.us/logo-8.jpg) | 80% |

## Sources

- Official brand guidelines — https://brand.zoom.us/
- Live brand page — https://extractvibe.com/brand/zoom.us
- Raw JSON — https://extractvibe.com/api/brand/zoom.us
- DESIGN.md (this file) — https://extractvibe.com/api/brand/zoom.us/design.md
- Extracted — 2026-05-03T16:54:28.250Z
- Generator — ExtractVibe vv1
- Quality score — 100/100