Zoom
A video-first communication platform built around Zoom's signature blue (#0B5CFF / #2D8CFF) on white surfaces with a clean, enterprise-ready aesthetic. The interface prioritizes functional clarity above all — large avatar tiles, prominent mute/video controls, and an uncluttered toolbar that even non-technical users navigate instinctively. Marketing uses Inter or the custom Zoom Sans at bold weights against white with blue gradients as accent moments. The system reads as approachable enterprise: neither intimidating nor playful, built for a CEO and their 5-year-old to both use comfortably.
Color Tokens
version: alpha name: Zoom description: "A video-first communication platform built around Zoom's signature blue (#0B5CFF / #2D8CFF) on white surfaces with a clean, enterprise-ready aesthetic. The interface prioritizes functional clarity above all — large avatar tiles, prominent mute/video controls, and an uncluttered toolbar that even non-technical users navigate instinctively. Marketing uses Inter or the custom Zoom Sans at bold weights against white with blue gradients as accent moments. The system reads as approachable enterprise: neither intimidating nor playful, built for a CEO and their 5-year-old to both use comfortably."
colors: primary: "#0B5CFF" on-primary: "#ffffff" primary-hover: "#0A52E8" secondary: "#2D8CFF" ink: "#1F1F1F" ink-muted: "#747487" canvas: "#ffffff" surface-1: "#F7F9FC" surface-2: "#EEF2F9" border: "#DDE1EC" meeting-bg: "#1C1C1C" tile-bg: "#2D2D2D" success: "#00C767" danger: "#E5484D"
typography: display: fontFamily: "Zoom Sans, Inter, -apple-system, sans-serif" fontSize: 48px fontWeight: 700 lineHeight: 1.15 letterSpacing: -0.02em body: fontFamily: "Zoom Sans, Inter, -apple-system, sans-serif" fontSize: 15px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0
spacing: base: 8px scale: [4, 8, 12, 16, 24, 32, 48, 64, 96]
radius: sm: 4px md: 8px lg: 12px pill: 9999px
shadows: card: "0 2px 8px rgba(31,31,31,0.08)" elevated: "0 8px 24px rgba(31,31,31,0.12)"
motion: duration-fast: 100ms duration-base: 200ms easing: cubic-bezier(0.4, 0, 0.2, 1)
1. Visual Theme & Atmosphere
Zoom solved a problem that many complicated: making video calls feel easy. The product design reflects this — the in-meeting UI is deliberately minimal, showing faces and sharing content with a toolbar that hides when not needed. The brand blue is confident and accessible, used on the primary join button and brand moments. The dark meeting canvas (#1C1C1C) is chosen for eye comfort in extended calls.
2. Color System
- Brand blue: #0B5CFF — primary CTAs, logo, active states
- Lighter blue: #2D8CFF — hover states, secondary actions, gradient partner
- Meeting dark: #1C1C1C — in-call background, comfortable for long sessions
- Tile dark: #2D2D2D — individual participant video tile background
- Canvas: White for dashboard, settings, marketing
- Success green: #00C767 — hand raise, reactions, successful connection
- Danger red: #E5484D — end call, recording alerts
3. Typography
Zoom Sans (custom, based on Inter) at display weights for marketing. Product UI uses system fonts at comfortable reading sizes. Control bar labels are small (12px) and muted to minimize distraction during calls. The type hierarchy is functional: name labels in video tiles, reaction counts, participant lists.
4. Components & Patterns
- Video grid: Auto-reflow tile layout, speaker highlight border in blue, name overlay bottom-left
- Control bar: Fixed bottom strip, icon + label buttons (Mute / Video / Share / Reactions / End)
- Participant panel: Right sidebar with scrollable list, audio indicator, hand raise icon
- Meeting controls: Hover to reveal, auto-hide after inactivity
- Dashboard cards: White panels, blue accent on key metrics, clean table for upcoming meetings
- Join button: Full blue, large, rounded — the most important button in the product
5. Spacing & Layout
In-meeting: full viewport, control bar ~64px fixed bottom. Gallery view tiles sized to fit viewport. Dashboard: centered 1200px max, card grid with 16px gap. Control icons are 24px with 40px tap target.
6. Motion & Interaction
Smooth participant join/leave animations. Tile reflow when someone enters/exits gallery view. Reaction emojis float up from the bottom. Hand raise icon bounces briefly. Control bar fade in/out on mouse activity.