W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Zoom
Zoom is a video communications and collaboration platform — meetings, phone, chat, webinars, and contact-center surfaces. The brand voice is clear, friendly, and utilitarian: a single bright Zoom Blue accent (#2D8CFF) on a clean white canvas with near-black body text. Where competing communications brands lean on illustrated or multi-color identities, Zoom holds to a tight monochrome-plus-blue composition that reads instantly on shared screens and call tiles.
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/zoom/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/zoom/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Zoom
Zoom is a video communications and collaboration platform — meetings, phone, chat, webinars, and contact-center surfaces. The brand voice is clear, friendly, and utilitarian: a single bright Zoom Blue accent (#2D8CFF) on a clean white canvas with near-black body text. Where competing communications brands lean on illustrated or multi-color identities, Zoom holds to a tight monochrome-plus-blue composition that reads instantly on shared screens and call tiles.
Tags: saas, productivity, zoom, communications, video
Atoms
Palette
Zoom · [email protected] · Proprietary — All Rights Reserved
Zoom's brand palette, anchored on Zoom Blue (#2D8CFF) — the signature bright communications blue used across the meeting client and marketing surfaces. The institutional voice pairs that blue with a clean white canvas and near-black body text; the dark-mode product surface is a deep neutral that lets the blue sit forward without competing.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
zoom-blue |
Zoom Blue | #2D8CFF |
zoom-white |
Zoom White | #FFFFFF |
zoom-black |
Zoom Black | #000000 |
zoom-canvas-dark |
Zoom Canvas Dark | #1A1A1A |
zoom-surface-light |
Zoom Surface Light | #F5F5F5 |
zoom-surface-dark |
Zoom Surface Dark | #2C2C2C |
zoom-text-secondary |
Zoom Text Secondary | #747487 |
zoom-text-tertiary |
Zoom Text Tertiary | #A0A0AB |
zoom-blue-hover |
Zoom Blue Hover | #5AA4FF |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
zoom-white |
#FFFFFF |
surface |
zoom-surface-light |
#F5F5F5 |
surface-elevated |
zoom-white |
#FFFFFF |
text-primary |
zoom-black |
#000000 |
text-secondary |
zoom-text-secondary |
#747487 |
text-tertiary |
zoom-text-tertiary |
#A0A0AB |
primary |
zoom-blue |
#2D8CFF |
primary-hover |
zoom-blue-hover |
#5AA4FF |
accent |
zoom-blue |
#2D8CFF |
accent-hover |
zoom-blue-hover |
#5AA4FF |
warning |
zoom-blue |
#2D8CFF |
warning-hover |
zoom-blue-hover |
#5AA4FF |
error |
zoom-blue |
#2D8CFF |
success |
zoom-blue |
#2D8CFF |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
zoom-canvas-dark |
#1A1A1A |
surface |
zoom-surface-dark |
#2C2C2C |
surface-elevated |
zoom-surface-dark |
#2C2C2C |
text-primary |
zoom-white |
#FFFFFF |
text-secondary |
zoom-text-tertiary |
#A0A0AB |
text-tertiary |
zoom-text-secondary |
#747487 |
primary |
zoom-blue |
#2D8CFF |
primary-hover |
zoom-blue-hover |
#5AA4FF |
accent |
zoom-blue |
#2D8CFF |
accent-hover |
zoom-blue-hover |
#5AA4FF |
warning |
zoom-blue |
#2D8CFF |
warning-hover |
zoom-blue-hover |
#5AA4FF |
error |
zoom-blue |
#2D8CFF |
success |
zoom-blue |
#2D8CFF |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
zoom-blue |
#2D8CFF |
on-identity |
zoom-white |
#FFFFFF |
primary |
zoom-blue |
#2D8CFF |
primary-hover |
zoom-blue-hover |
#5AA4FF |
accent |
zoom-blue |
#2D8CFF |
accent-hover |
zoom-blue-hover |
#5AA4FF |
success |
zoom-blue |
#2D8CFF |
warning |
zoom-blue |
#2D8CFF |
error |
zoom-blue |
#2D8CFF |
background-light |
zoom-white |
#FFFFFF |
background-dark |
zoom-canvas-dark |
#1A1A1A |
surface-light |
zoom-surface-light |
#F5F5F5 |
surface-dark |
zoom-surface-dark |
#2C2C2C |
text-primary-light |
zoom-black |
#000000 |
text-primary-dark |
zoom-white |
#FFFFFF |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (7)
colorChoice → logo.mark
- allowed: zoom-blue, zoom-white, zoom-black
- forbidden: any-non-brand-color
The Zoom mark is rendered in Zoom Blue on light surfaces and in white on dark surfaces. Zoom's brand guidance forbids recoloring the mark into off-brand hues.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, on-busy-photo, gradient-fill
Zoom's brand portal explicitly prohibits stretching, rotating, recoloring, or applying effects to the Zoom logo. The mark reads as a fixed wordmark composition.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
WCAG 2.1 Level AA contrast minimum for body text. Zoom Black (#000000) on Zoom White (#FFFFFF) clears AA at 21:1.
variantSelection → logo
- use:
logo-light - when:
backgroundColorScheme="dark"
On dark surfaces, use Zoom's documented light-fill wordmark variant; do not invert the colored mark on the fly.
variantSelection → logo
- use:
logo-blue - when:
backgroundColorScheme="light"
On light surfaces, use the Zoom-Blue wordmark variant. White wordmarks on white canvases fail WCAG and Zoom's brand guidance.
contextRestriction → roles.colors.identity
- forbiddenContexts: product-of-competitor, merchandise, endorsement-implication, company-name-or-domain
Zoom's trademark guidelines forbid use of the Zoom name and mark in third-party company names, product names, domains, and uses that imply affiliation or endorsement.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Zoom-skinned surfaces must clear AA on body text; the Black-on-White default starts at 21:1.
⚠️ warning (1)
enumMembership → typography.heading.fontWeight
- allowed: 500, 600, 700
Zoom's marketing surfaces render headings in the 500–700 band; lighter weights compromise the confident, utility-forward voice of the brand.
💡 recommendation (1)
compositionConstraint → roles.colors.identity
- pairsWith: zoom-white, zoom-black
Zoom Blue is calibrated to read on white or near-black. Pairing it with a third dominant hue breaks the clean meeting-tile voice of the brand.
Provenance
- Source: https://brand.zoom.us/
- License:
Proprietary — All Rights Reserved - Attribution: Zoom and the Zoom logo are trademarks of Zoom Video Communications, Inc. The primary brand color Zoom Blue (#2D8CFF) is documented on Zoom's brand portal at brand.zoom.us. brand-atoms catalogues only the publicly documented signature color and authored neutrals; licensed application of the Zoom name and mark is governed by Zoom's brand-use program at brand.zoom.us.
- Imported:
2026-05-18 - Notes: Zoom Sans, Zoom's proprietary corporate typeface, is the canonical brand face. brand-atoms references Inter as the open-source fallback (Inter is already in the catalog and is the closest neutral-humanist sans available); consumers with a licensed Zoom Sans file should override this reference at consumption time.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Zoom
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Zoom
A clear hierarchy in Zoom's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ zoom-blue #2D8CFF accent-hover
→ zoom-blue-hover #5AA4FF background-dark
→ zoom-canvas-dark #1A1A1A background-light
→ zoom-white #FFFFFF error
→ zoom-blue #2D8CFF identity
→ zoom-blue #2D8CFF on-identity
→ zoom-white #FFFFFF primary
→ zoom-blue #2D8CFF primary-hover
→ zoom-blue-hover #5AA4FF success
→ zoom-blue #2D8CFF surface-dark
→ zoom-surface-dark #2C2C2C surface-light
→ zoom-surface-light #F5F5F5 text-primary-dark
→ zoom-white #FFFFFF text-primary-light
→ zoom-black #000000 warning
→ zoom-blue #2D8CFF Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from zoom)
Light mode (14 roles)
accent
→ zoom-blue accent-hover
→ zoom-blue-hover background
→ zoom-white error
→ zoom-blue primary
→ zoom-blue primary-hover
→ zoom-blue-hover success
→ zoom-blue surface
→ zoom-surface-light surface-elevated
→ zoom-white text-primary
→ zoom-black text-secondary
→ zoom-text-secondary text-tertiary
→ zoom-text-tertiary warning
→ zoom-blue warning-hover
→ zoom-blue-hover Dark mode (14 roles)
accent
→ zoom-blue accent-hover
→ zoom-blue-hover background
→ zoom-canvas-dark error
→ zoom-blue primary
→ zoom-blue primary-hover
→ zoom-blue-hover success
→ zoom-blue surface
→ zoom-surface-dark surface-elevated
→ zoom-surface-dark text-primary
→ zoom-white text-secondary
→ zoom-text-tertiary text-tertiary
→ zoom-text-secondary warning
→ zoom-blue warning-hover
→ zoom-blue-hover Rules (9 typed constraints)
error · 7 rules
colorChoice logo.mark allowed zoom-blue, zoom-white, zoom-black forbidden any-non-brand-color The Zoom mark is rendered in Zoom Blue on light surfaces and in white on dark surfaces. Zoom's brand guidance forbids recoloring the mark into off-brand hues.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, on-busy-photo, gradient-fill Zoom's brand portal explicitly prohibits stretching, rotating, recoloring, or applying effects to the Zoom logo. The mark reads as a fixed wordmark composition.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA WCAG 2.1 Level AA contrast minimum for body text. Zoom Black (#000000) on Zoom White (#FFFFFF) clears AA at 21:1.
variantSelection logo use logo-light when backgroundColorScheme="dark" On dark surfaces, use Zoom's documented light-fill wordmark variant; do not invert the colored mark on the fly.
variantSelection logo use logo-blue when backgroundColorScheme="light" On light surfaces, use the Zoom-Blue wordmark variant. White wordmarks on white canvases fail WCAG and Zoom's brand guidance.
contextRestriction roles.colors.identity forbiddenContexts product-of-competitor, merchandise, endorsement-implication, company-name-or-domain Zoom's trademark guidelines forbid use of the Zoom name and mark in third-party company names, product names, domains, and uses that imply affiliation or endorsement.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Zoom-skinned surfaces must clear AA on body text; the Black-on-White default starts at 21:1.
warning · 1 rule
enumMembership typography.heading.fontWeight allowed 500, 600, 700 Zoom's marketing surfaces render headings in the 500–700 band; lighter weights compromise the confident, utility-forward voice of the brand.
recommendation · 1 rule
compositionConstraint roles.colors.identity pairsWith zoom-white, zoom-black Zoom Blue is calibrated to read on white or near-black. Pairing it with a third dominant hue breaks the clean meeting-tile voice of the brand.
Provenance
- Source
- https://brand.zoom.us/
- License
Proprietary — All Rights Reserved- Attribution
- Zoom and the Zoom logo are trademarks of Zoom Video Communications, Inc. The primary brand color Zoom Blue (#2D8CFF) is documented on Zoom's brand portal at brand.zoom.us. brand-atoms catalogues only the publicly documented signature color and authored neutrals; licensed application of the Zoom name and mark is governed by Zoom's brand-use program at brand.zoom.us.
- Imported
2026-05-18- Notes
- Zoom Sans, Zoom's proprietary corporate typeface, is the canonical brand face. brand-atoms references Inter as the open-source fallback (Inter is already in the catalog and is the closest neutral-humanist sans available); consumers with a licensed Zoom Sans file should override this reference at consumption time.