Zoom DESIGN.md

Overview

Visual Theme & Atmosphere

Zoom's website communicates confidence and clarity through a dual-surface palette — a deep, immersive midnight navy (#00053d) hero paired with a clean white (#ffffff) body — that creates a dramatic first impression before settling into an airy, information-dense product experience. The brand's signature blue (#0b5cff) cuts across both surfaces as the single interactive action color, so the eye never loses the "do this" signal whether it's reading white text on navy or scanning product cards on white. The overall feeling is of enterprise software that has been carefully humanized: direct, capable, and built for real work.

Two custom typefaces do the heavy lifting. Happy Face Semi Bold appears on every headline — a geometric display face with rounded, approachable letterforms that soften what could otherwise feel purely corporate. At 54px on the hero, weight 500, it reads as confident without aggression. Almaden Sans handles all UI, navigation, body copy, and buttons — a workmanlike humanist sans with excellent legibility at small sizes and strong multilingual support (Noto fallbacks for JP, KR, SC, TC). The combination feels intentional: display type that has personality, UI type that gets out of the way.

Zoom's depth vocabulary is restrained. Cards use thin #dfe3e8 hairline borders and subtle shadow lift rather than heavy elevation. Tinted surfaces (#f3f8ff, #e6f0ff) segment content into breathable zones. Border-radius lands at 12px on buttons and interactive elements, 8px on cards — generous enough to feel modern and friendly, conservative enough to signal enterprise reliability. The overall system reads as polished SaaS: familiar, trustworthy, and never flashy.

Key Characteristics:

• Dual custom fonts: Happy Face Semi Bold (display) + Almaden Sans (UI/body/nav)
• Signature Zoom Blue (#0b5cff) as the single primary interactive color
• Deep midnight navy (#00053d) hero canvas — immersive brand entry point
• 12px button radius — rounded but not pill; 8px for cards
• Thin hairline borders (#dfe3e8) and soft shadows for depth, no heavy elevation
• Tinted blue-white surfaces (#f3f8ff, #e6f0ff) for content zone separation
• Strong typographic hierarchy: 54px display, 46px section, 32px feature, 20px sub

Primary tasks

• Join a video meeting without thinking about the technology.
• Catch up on a meeting you skipped through its AI summary.
• Switch between annual and monthly billing to compare prices.
• Sign up for a free account from the homepage header.
• Explore Meet, Phone, and Team Chat from the products menu.

Brand Narrative

Zoom was founded in 2011 by Eric S. Yuan, a Chinese-American engineer and former VP of Engineering at Cisco's WebEx division. Yuan left WebEx after growing frustrated with what he saw as an overly complex, customer-unfriendly video conferencing platform. His founding vision was simple and radical: build a video meeting product that works so reliably, at such quality, that no one needs to think about the technology — just the conversation. Zoom launched its cloud-based platform in 2013 and went public on Nasdaq in 2019 (ticker: ZM).

Zoom's breakout moment came during the 2020 COVID-19 pandemic, when distributed work became mandatory and the product became the default verb for video calling globally — "to Zoom" entered everyday language in dozens of languages. At peak pandemic, Zoom hosted more daily meeting participants than it had in entire previous years combined. The company expanded beyond meetings into a full communications stack (Zoom Phone, Zoom Chat, Zoom Events, Zoom Contact Center) and rebranded its core product as Zoom Workplace in 2024, positioning itself as the AI-powered hub for hybrid work.

What Zoom refuses: over-engineered complexity in the meeting experience, fragmentation of communication tools, and the enterprise assumption that reliability requires a procurement cycle. What it embraces: a single platform that spans meetings, phone, chat, and AI assistant — with an AI Companion that doesn't cost extra on paid plans, a quiet but significant commitment to democratizing enterprise AI.

Eric Yuan's public persona — accessible, direct, frequently posting on LinkedIn about remote work challenges — mirrors the brand's communication style. The company's Emmy win for Engineering, Science & Technology in 2023 signals that beneath the consumer-friendly surface is serious infrastructure engineering.

Principles

1. Reliability first. Before features, before design, the connection must work. UI implication: error states are informative, not apologetic; retry actions are immediately visible; skeleton loading maintains layout stability to communicate "this is loading, not broken."
2. Simplicity at every level. Yuan left WebEx because complexity wasn't neutral — it was the product killing trust. UI implication: primary actions are never buried in dropdowns; the most important CTA is always the most visually prominent element.
3. One platform, not a suite. Meetings, phone, chat, and AI in one place reduces context-switching. UI implication: navigation consistently surfaces all product areas; cross-product handoffs feel seamless, not siloed.
4. AI as a quiet multiplier. AI Companion surfaces in meeting summaries, note-taking, and conversation intelligence — always assistive, never in the way. UI implication: AI features are integrated into existing workflows, not launched as separate modal experiences.
5. Inclusion by design. From closed captions to multi-language support to accessibility overlays, Zoom's stated commitment ("technology for all") shows up in feature investment. UI implication: accessibility is a first-class feature, not an afterthought; ARIA labels, keyboard navigation, and reduced-motion support are not optional.

Personas

Personas below are fictional archetypes informed by publicly observable Zoom user segments (remote workers, enterprise IT, educators, event organizers), not individual people.

Priya Sharma, 34, Bangalore. Product Manager at a US-headquartered SaaS company, working fully remote with a distributed team across three time zones. Runs 12–15 Zoom calls per week. Values AI Companion meeting summaries because they let her skip the half of meetings she's not the decision-maker in. Her frustration: when the connection degrades mid-demo and she loses the room's trust in the product she's demoing.

Marcus Thompson, 58, Chicago. IT Director at a regional hospital system. Selected Zoom over Microsoft Teams because of reliability metrics and the ability to run Zoom Phone through a single vendor contract. His mental model is plumbing: it either works or he gets calls at 2am. He cares about the admin console, not the meeting UI.

Yuki Tanaka, 26, Tokyo. Customer Success Manager at a Japanese SaaS startup serving global clients. Zoom's Noto Sans JP support and Japanese-language AI Companion are deciding factors over native competitors. She notices when font rendering looks wrong — it signals that a product wasn't built with her market in mind.

David Kim, 45, Austin, TX. Co-founder and CEO of a 30-person remote-first startup. Uses Zoom Workplace as the company's entire communications stack. Appreciates that AI Companion comes with the paid plan — it makes a small team look like a larger one. Would switch providers if the monthly bill required a conversation with a sales rep.

Colors

Primary

• Zoom Blue (#0b5cff): Primary brand and CTA color. Used on primary buttons ("Buy Now", "Sign Up Free"), interactive links, and accent elements. The defining visual signal throughout the product.
• Primary Hover (#0d6bde): Slightly darker Zoom Blue for button hover states on primary CTAs. Maintains the blue family without jarring contrast shift.
• Brand Dark (#00053d): Deep midnight navy for the hero section background, dark feature surfaces, and high-impact brand moments. Also the primary heading foreground on white surfaces.

Surface

• Canvas (#ffffff): Default page and card background. The workhorse surface.
• Surface Blue (#f3f8ff): Cool blue-tinted surface for tinted content cards, pricing tier backgrounds, and segmented content zones.
• Surface Tint (#e6f0ff): Slightly more saturated blue tint for secondary button fill (Contact Sales variant) and badge/pill backgrounds.
• Border Light (#d1dee2): Standard border color for secondary button outlines and dividers.
• Hairline (#dfe3e8): Thin card and container border; the primary separation device in the white-surface sections.

Text

• Heading (#000000): Pure black for some heading contexts; also #00053d navy for headings inside product sections.
• Body (#222325): Near-black for primary body copy — warm, readable, not pure black.
• Body Alt (#232333): Alternate near-black for body text in some contexts, nearly identical density to #222325.
• Muted (#696b6e): Muted mid-grey for secondary labels, captions, and metadata.

Interaction

• On-Primary (#ffffff): White text on all blue CTAs and the dark nav surface.

Typography

Font Families

• Display: Happy Face Semi Bold — custom geometric display face; fallback Helvetica, Arial.
• UI / Body: Almaden Sans — custom humanist sans; fallbacks Helvetica, Noto Sans JP/KR/SC/TC, Arial.

Hierarchy

Principles

• Display for story, Almaden for function: Happy Face Semi Bold handles headline moments that set emotional tone; Almaden Sans handles everything users interact with or read for information.
• Weight restraint: Display runs at weight 500 — confident but not aggressive. UI labels run at weight 500; body at 400. The system avoids weight 700 for marketing text.
• Negative tracking at large sizes: Section H2 at 46px uses -1.4px letter-spacing for tighter, more authoritative headline blocks.
• Multilingual foundation: Almaden Sans declares Noto Sans fallbacks for JP/KR/SC/TC, reflecting Zoom's global enterprise user base.

Layout

Spacing System

• Base unit: 8px
• Scale: 4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px
• Key surfaces: hero uses generous vertical padding; product sections alternate white / tinted backgrounds

Grid & Container

• Max content width: approximately 1200px centered
• Hero: full-width dark navy (#00053d) with centered headline and sub-copy
• Product feature sections: alternating white and #f3f8ff tinted full-width bands
• Pricing: 3-4 column card grid on desktop

Whitespace Philosophy

• Generous above-the-fold: The hero lavishes vertical space around a single H1 and one CTA pair — makes the product feel premium and focused.
• Dense-but-breathable feature rows: Product feature sections pack information into responsive grids while using tinted surfaces to separate conceptual groupings.
• Flat surface separation: Content zones divide by background tint or hairline rather than shadow depth — clean, enterprise-grade.

Border Radius Scale

• Standard (8px): Cards, feature containers, inputs
• Interactive (12px): Buttons, dropdown panels, nav items
• Pill (9999px): Badges, toggles, small status indicators

Responsive Behavior

Breakpoints

Touch Targets

• Primary buttons: 48px height with 14px padding — comfortable tap targets
• Nav links: 36px minimum hit area
• Toggle switches: 32px+ with pill shape for clear affordance

Collapsing Strategy

• Hero headline: 54px → scales down with viewport, weight 500 maintained
• Navigation: horizontal mega-menu → hamburger with off-canvas drawer
• Pricing table: 4-column → 2-column → stacked single card
• Feature bands: multi-column grid → stacked single column
• Tinted/white alternating sections: full-width at all breakpoints

Image Behavior

• Product screenshots (meeting UI, dashboard) maintain consistent card treatment across breakpoints
• Dark hero sections maintain full-width at all sizes; internal padding reduces on mobile
• Cards maintain 8px radius across all viewport widths

Elevation & Depth

Shadow Philosophy: Zoom's shadow system is minimal and neutral — no brand-colored tint in shadows, unlike Stripe. Depth comes primarily from surface color contrast (white vs #f3f8ff vs #00053d) and hairline borders. The limited shadow vocabulary keeps the enterprise product feeling clean and performant.

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.card: 0 2px 8px rgba(0,0,0,0.08)
• shadow.elevated: 0 4px 16px rgba(0,0,0,0.12)

Motion & Easing

Durations:

Easings:

Motion rules: Motion serves communication, not delight. Dropdown menus open with ease-enter at motion-standard — fast enough to feel responsive, slow enough that the spatial relationship is legible. Hover states on buttons use motion-fast so the interactivity confirmation is near-instant. The AI Companion's ambient loading pulse is the one place where slower, looping motion lives — it signals "working" without blocking or alarming. Under prefers-reduced-motion: reduce, all transitions collapse to motion-instant; the product remains fully functional and the AI pulse halts.

Signature motion:

1. Meeting join transition: The full-screen navy (#00053d) loading screen fades out to the meeting grid at motion-slow / ease-exit — the transition from "anticipation" to "presence" is intentionally cinematic.
2. Pricing toggle (Annual/Monthly): Billing period toggle animates the thumb at motion-standard / ease-standard, and prices cross-fade simultaneously at the same duration — the linked animation makes the relationship between the toggle and the price legible.

Components

Buttons

Primary (Buy Now / Sign Up Free)

• Background: #0b5cff
• Text: #ffffff
• Radius: 12px
• Padding: 13px 14px
• Height: 48px
• Font: 16px Almaden Sans weight 500
• Border: 1px solid #0b5cff
• Hover: #0d6bde background
• Use: Primary transactional CTAs on pricing and product pages

Secondary (Sign Up Free outline / Contact Sales)

• Background: #f3f8ff
• Text: #333333
• Radius: 12px
• Padding: 13px 14px
• Height: 48px
• Font: 16px Almaden Sans weight 500
• Border: 1px solid #d1dee2
• Use: Secondary tier CTAs alongside primary on pricing cards

Nav Primary (Sign Up Free — header)

• Background: #0b5cff
• Text: #ffffff
• Radius: 12px
• Padding: 4px 20px
• Height: 46px
• Font: 14px Almaden Sans weight 600
• Use: Primary CTA in the sticky navigation bar

Nav Secondary (Contact Sales — header)

• Background: #e6f0ff
• Text: #00053d
• Radius: 12px
• Padding: 4px 20px
• Height: 46px
• Font: 14px Almaden Sans weight 600
• Border: 1px solid #e6f0ff
• Use: Secondary CTA in the navigation bar

Inputs & Forms

Default Input

• Background: #ffffff
• Border: 1px solid #dfe3e8
• Radius: 8px
• Text: #222325
• Font: 14px Almaden Sans weight 400
• Use: Search and form inputs across product surfaces

Cards & Containers

Feature Card

• Background: #ffffff
• Border: 1px solid #dfe3e8
• Radius: 8px
• Use: Product feature cards and content cards on white sections

Tinted Card

• Background: #f3f8ff
• Text: #00053d
• Radius: 8px
• Use: Pricing tier cards, info panels with blue-tinted surface

Badges

Blue Pill Badge

• Background: #e6f0ff
• Text: #0b5cff
• Radius: 9999px
• Font: 12px Almaden Sans weight 500
• Use: Product label pills, category tags (e.g., "AI", "New")

Navigation

Top Nav (Dark Hero)

• Background: transparent (over #00053d hero)
• Text: #ffffff
• Font: 14px Almaden Sans weight 500
• Radius: 12px on dropdown containers
• Height: ~56px header
• Use: Products, AI, Solutions, Pricing, Sign In, Support nav links

Dropdown Sub-items

• Radius: 8px
• Font: 14px Almaden Sans weight 500
• Use: Sub-navigation items inside product mega-menus (Meet, Phone, Team Chat, etc.)

Toggle

Feature Toggle (On)

• Background: #0b5cff
• Text: #ffffff
• Radius: 9999px
• Use: Feature comparison toggles in pricing page (Annual/Monthly billing switch)

Verified: 2026-06-22 (omd:add-reference CREATE — Tier 1 live inspect) Tier 1 sources: https://www.zoom.com/ (homepage, live DOM), https://zoom.us/pricing (pricing page, live DOM) Tier 2 sources: getdesign.md/zoom — no entry found; styles.refero.design/?q=zoom — no Zoom match in results Conflicts unresolved: none

States

Do's and Don'ts

Do

• Use Happy Face Semi Bold for all display headlines — it is Zoom's visual personality
• Use #0b5cff Zoom Blue as the single primary action color across all surfaces
• Apply 12px border-radius on all button and interactive elements — the rounded-square feel is intentional
• Use the dark navy (#00053d) for hero and immersive brand sections
• Separate content zones with #f3f8ff tinted surfaces and #dfe3e8 hairlines
• Use Almaden Sans for all UI text, navigation, labels, and body copy
• Apply tight negative tracking (-1.4px) on large 46px section headings
• Pair primary blue button with secondary tinted button for pricing CTA pairs

Don't

• Don't substitute Arial or Helvetica for Happy Face in headline contexts — the display font is the brand
• Don't use multiple accent colors for interactive elements — Zoom Blue is the only interactive color
• Don't use pill-shaped (>20px radius) buttons — 12px is the system's maximum interactive radius
• Don't apply heavy drop shadows — Zoom uses hairline borders and subtle lift only
• Don't use weight 700 for marketing headlines — weight 500 is the display maximum
• Don't place #0b5cff buttons on navy hero sections without ensuring #ffffff text contrast
• Don't use warm accent colors (orange, yellow, red) for CTAs — the palette is cool and restrained
• Don't skip Almaden Sans fallbacks for multilingual contexts — Noto Sans coverage is intentional

Voice & Tone

Zoom's voice is direct, inclusive, and quietly optimistic — the voice of a platform that believes work is better when people can connect easily. Copy is conversational without being casual, confident without being arrogant. The hero headline "Find out what's possible when work connects" sets the register: benefit-framed, present-tense, inviting rather than commanding. Feature copy leads with what users gain ("Your new AI note taker") not what the product does. CTA labels are short and concrete: "Sign Up Free", "Buy Now", "Contact Sales".

Voice samples (verbatim from live site):

• "Find out what's possible when work connects" — hero H1 (verified live 2026-06-22)
• "One platform. Endless ways to work together." — section H2 (verified live 2026-06-22)
• "Trusted by millions. Built for you." — section H2 (verified live 2026-06-22)
• "Businesses achieve more with Zoom" — section H2 (verified live 2026-06-22)

Forbidden register: enterprise jargon ("synergize", "leverage", "best-in-class"), aggressive urgency ("Act now!", countdown timers on standard pricing), tech buzzword stacking, anything that makes video calls feel complex.

Agent Prompt Guide

Quick Color Reference

• Primary CTA: Zoom Blue (#0b5cff)
• CTA Hover: #0d6bde
• Dark Hero / Brand: Midnight Navy (#00053d)
• Background: Canvas White (#ffffff)
• Tinted Surface: #f3f8ff
• Secondary Button Fill: Surface Tint (#e6f0ff)
• Heading / Body: Near-Black (#222325)
• Muted Text: #696b6e
• Border: Hairline (#dfe3e8)
• Secondary Button Border: #d1dee2

Example Component Prompts

• "Create a hero on #00053d navy. Headline at 54px Happy Face Semi Bold weight 500, color #ffffff, line-height 1.12. Sub-copy at 16px Almaden Sans weight 400, rgba(255,255,255,0.85). Two CTAs: Sign Up Free (#0b5cff bg, white text, 12px radius, 46px h, 14px Almaden weight 600) + Contact Sales (#e6f0ff bg, #00053d text, same geometry)."
• "Design a pricing card: #f3f8ff background, 8px radius, 1px #dfe3e8 border. Tier name at 20px Almaden weight 600, #00053d. Price at 32px Happy Face weight 500, #000000. Two buttons: Buy Now (#0b5cff, white, 12px radius, 48px h) + Sign Up Free (#f3f8ff, #333333, 12px radius, 1px #d1dee2 border)."
• "Build a feature section: white #ffffff background. Section heading at 46px Happy Face weight 500, #00053d, -1.4px tracking. Feature cards: white bg, 8px radius, 1px #dfe3e8 border, 8px shadow. Product label pill badge: #e6f0ff bg, #0b5cff text, 9999px radius."
• "Create top nav: fixed/sticky, white bg on scroll. Almaden Sans 14px weight 500 for links, #000000 text. Sign Up Free CTA: #0b5cff bg, white text, 12px radius. Contact Sales: #e6f0ff bg, #00053d text, 12px radius. Logo link uses 24px Almaden weight 700 in #0b5cff."

Iteration Guide

1. Always pair Happy Face Semi Bold display with Almaden Sans UI — never swap roles
2. One blue (#0b5cff) for all interactive elements; dark navy (#00053d) is structural/brand only
3. Button geometry: 12px radius, 48px height for large, 36-38px for nav-bar size
4. Card geometry: 8px radius, 1px #dfe3e8 hairline border
5. Section separation via background tint (#f3f8ff) not shadow or border
6. Negative tracking (-1.4px) on 46px+ headings; normal tracking below that
7. Pricing CTAs always come in pairs: primary blue + secondary tinted