What is Zoom's primary brand color?

Zoom's brand voltage is cobalt blue #0b5cff. It appears 121 times in the captured page — 49 as text, 9 as background, 56 as border, and 7 inside gradients — making it the dominant chromatic element after the navy ink. The hero embeds the cobalt as a full-bleed gradient block carrying the 5-up video tiles; below the fold the cobalt recedes to button text fills, the AI-notes app badge, and the link color across the editorial bands. Wired in CSS without an explicit named variable in the captured surface. Two derived blue tones appear in named text-gradient variables: --text-gradient-dark walks from #006be5 (a slightly darker cobalt) to #4ab5ff (a sky blue) for dark backgrounds, and --text-gradient-light walks from a silver #b8c2d6 to a pale blue #d1edff for light backgrounds.

What typeface does Zoom use, and what should I use as a substitute?

Zoom runs Happy Face Semi Bold for the display tier (32-54px headlines) and Almaden Sans for body, label, button, and nav surfaces. Both are proprietary families introduced in Zoom's 2024 brand refresh. Happy Face is a friendly rounded sans with humanist letterforms that read warm rather than precise; Almaden Sans is a workhorse neutral grotesque with broad Asian-script fallbacks (Noto Sans JP / KR / SC / TC) baked into the family stack. The closest open-source substitute for Happy Face is Nunito Sans or Fraunces at weight 600; for Almaden Sans, Inter at the same weights transfers well, though Almaden has a slightly wider cap-height. Display weight sits at 500 (matched to Cloudflare's restraint move), never 700+; the headline confidence comes from the rounded letterforms rather than from weight.

Why is the Zoom hero on cobalt blue but the rest of the page on white?

The cobalt-blue hero block is the brand's single voltage moment — the full-bleed #0b5cff gradient extends only across the top hero band and contains the 5-up camera-tile grid showing live human faces. Below the fold the page inverts to a pure-white canvas (#ffffff dominates with 590 captured occurrences) with navy #00053d headings, and the cobalt recedes to small accent roles. The move is the inverse of Twilio's dark-canvas-throughout pattern: Zoom uses the dark-cobalt block to anchor the brand identity above the fold, then drops into the conventional white developer-business canvas for the rest of the editorial bands so the dense product content reads at maximum contrast. The hero cobalt block is the only place on the page where the brand voltage owns the canvas.

What corner-radius scale does Zoom use?

The radius scale leans soft and consumer-friendly. 20px appears 29 times (cards, video tiles, the AI-notes app card), 12px appears 25 times (the primary 'Zoom Workplace' button, secondary chips, nav tabs), 8px appears 26 times (medium surfaces like the customer-quote card), 50% appears 17 times (avatar circles and the chat-emoji indicators), 16px appears 5 times on mid-sized cards. There is no 4px tier on common surfaces and no fully-rounded pill — even the navigation tabs at 12px stay below the pill threshold. The combination is deliberately softer than the developer-tools convention (Vercel and Linear lean on 4-8px) but harder than the kid-friendly extreme (Notion uses 16-20px universally). The result reads as 'business-software friendly' rather than 'developer-precise' or 'consumer-playful'.

Can I use this DESIGN.md to build my own React video or collaboration site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Zoom's specific moves: human-face-as-product hero with a full-bleed cobalt gradient block above the fold, white canvas with navy ink below it, Happy Face Semi Bold display family with rounded humanist letterforms, the consumer-friendly 20px / 12px radius pair, and the cobalt-as-accent voltage discipline. The tokens resolve cleanly without invention. One caveat: the live-video-tile hero only works if your product actually has human faces to show — a screenshot of a calendar grid or a chat thread will not carry the same emotional weight. If your product is more workflow than face-to-face, the standard editorial-hero pattern from Linear or Notion is closer to the right anchor.

Zoom Design System

Zoom's marketing-site system as a DESIGN.md file: cobalt #0b5cff voltage, Happy Face Semi Bold display, Almaden Sans body, 22 colors.

About Zoom DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source zoom.us

Communication & Messaging
Productivity & SaaS

Zoom's marketing site does something the video-meetings category convention pushes against: it treats the actual product visual — live human faces in a 5-up camera-tile grid — as the hero's anchor element rather than as a sample screenshot below the fold. The hero canvas is a full-bleed cobalt-blue gradient block at #0b5cff with the 54px Happy Face Semi Bold headline "Find out what's possible when work connects" rendered in white above it, and immediately beneath sits a row of five rounded-card video tiles showing actual smiling humans on real camera feeds. Where Microsoft Teams renders flat purple shapes and Google Meet runs flat color blocks, Zoom commits to the human-face-as-product moment.

Below the fold the page inverts to a white canvas with navy ink #00053d carrying every heading, and the cobalt voltage recedes to small button highlights, the AI-notes app badge, and the link color. The typographic move that distinguishes the brand from the developer-tools category is the Happy Face Semi Bold display family — a friendly proprietary sans with rounded humanist letterforms that read warm rather than precise. Headlines sit at 32-54px in weight 500 (never 700+), and the body voice is Almaden Sans at 14-16px / 400-600. The pairing reads as consumer-friendly business software rather than as developer infrastructure — closer to Notion or Asana than to Linear or Vercel.

The DESIGN.md file packages the system into a machine-readable spec. Inside: 14 color tokens drawn from the white canvas, the navy ink ladder, the cobalt voltage, and a handful of gradient end-stops; 11 typography tokens running Happy Face Semi Bold for display and Almaden Sans for everything else; a 5-step radius scale centered on 20px and 12px (the softer-than-dev-tools move); and 16 component definitions covering the cobalt-floor hero, the rounded video tile, the cobalt-text primary button, the navy section heading, and the customer-quote card. Feed this file to Claude or Cursor and it will reproduce the specific moves: human-face-as-product hero, Happy Face display family, white canvas with navy ink, and the consumer-friendly 20px / 12px radius pair.

What makes it distinct

Happy Face Semi Bold displayZoom's proprietary friendly sans carries every 32-54px headline; the rounded humanist letterforms are the typographic move that distinguishes the brand from the harder dev-tool grotesks
Cobalt-as-camera-floorthe hero embeds live video tiles inside a full-bleed cobalt gradient block rather than placing a CTA accent on a white field; the human faces become the visual anchor
White canvas with navy inkbelow the fold the page sits on pure white with #00053d navy headings, the inverse of Twilio or Linear's dark-canvas convention
20px cards plus 12px buttonsthe softer-than-dev-tools radius scale signals consumer-friendly rather than enterprise-precision
Text-gradient marquee tokenstwo named gradients (cobalt-to-sky for dark contexts, silver-to-pale-blue for light) appear only inside specific feature headlines

Live at zoom.us

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

zoom.us

Explore Zoom

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Zoom design system FAQ

Common questions about Zoom's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Zoom — official site

Zoom's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.