Design System Inspired by Webex

Category: Productivity & SaaS Collaboration platform. Momentum typography, blue action system, multi-user accent spectrum.

1. Visual Theme & Atmosphere

Webex is cleaner, friendlier, and more product-led than Cisco corporate while still living inside the same trust-oriented universe. The brand language combines bright white canvases with dark in-product surfaces, then anchors interaction around a precise family of blue action colors drawn from Momentum. The result is a collaboration platform aesthetic: capable, legible, modern, and designed for continuous use rather than one-shot marketing drama.

Typography is driven by the Momentum system, whose primary font stack is Momentum, Inter, Arial, Helvetica Neue, Helvetica, sans-serif. This gives Webex a more software-native rhythm than Cisco's broader corporate presence. Headings should be clear and confident, but not monumental. Body copy should feel practical and human. In contrast to Cisco's singular-signal visual system, Webex allows a broader supporting collaboration palette — cobalt, cyan, mint, lime, gold, orange, pink, purple — but these should appear as secondary accents for teams, avatars, presence, or workspace state, not as uncontrolled decoration.

What defines Webex is blue-guided clarity plus collaborative color. Action is blue. Surfaces are simple. Supporting colors represent people, teams, or activity.

Key Characteristics:

• Momentum typography stack with clean product rhythm
• Blue action system centered on #1170cf, #0353a8, and #063a75
• White marketing/product canvases paired with optional charcoal dark-mode surfaces
• Soft pill geometry for actions and controls
• Collaboration-spectrum accent colors used sparingly for people/workspaces
• Product-first clarity over ornamental flourish
• Motion should feel polished and unobtrusive

2. Color Palette & Roles

Primary Action

• Webex Action Blue (#1170cf): Primary buttons, active controls, main links, selected states
• Action Blue Hover (#0353a8): Hover and stronger emphasis
• Action Blue Pressed (#063a75): Pressed / active interaction state
• Accent Light Blue (#64b4fa): Focus ring, bright dark-surface link state, supportive highlight

Text & Surface

• Primary Text (Light Theme) (#000000f2): Main light-surface text
• Secondary Text (Light Theme) (#000000b3): Support copy and metadata
• Primary Text (Dark Theme) (#fffffff2): Main dark-surface text
• Secondary Text (Dark Theme) (#ffffffb3): Support copy on dark
• White Canvas (#ffffff): Primary light background
• Black Canvas (#000000): Full dark background
• Dark Surface 1 (#1a1a1a): Dark cards, modals, product chrome
• Dark Surface 2 (#262626): Elevated dark layers

Collaboration / Team Spectrum

• Team Cobalt (#5ebff7)
• Team Cyan (#22c7d6)
• Team Mint (#30c9b0)
• Team Lime (#93c437)
• Team Gold (#d6b220)
• Team Orange (#fd884e)
• Team Pink (#fc97aa)
• Team Purple (#f294f1)

Use these as secondary collaboration accents: avatars, presence markers, workspace labels, chips, or lightweight category signals.

Semantic

• Success (#3cc29a)
• Warning (#f2990a)
• Danger (#fc8b98)

3. Typography Rules

Font Family

• Primary: Momentum, fallbacks: Inter, Arial, Helvetica Neue, Helvetica, sans-serif

Hierarchy

Principles

• Keep typography highly legible and product-oriented.
• Use medium weight for structural emphasis, not ultra-bold display theatrics.
• The system should feel modern and easy to scan, especially in dashboard and collaboration contexts.
• Avoid decorative font mixing unless the artifact explicitly requires a marketing flourish.

4. Component Stylings

Buttons

Primary Blue Pill

• Background: Webex Action Blue (#1170cf)
• Text: White (#ffffff)
• Radius: pill
• Hover: #0353a8
• Active: #063a75

Secondary Outline / Ghost on Light

• Background: transparent or white
• Text: #1170cf
• Border: subtle dark or blue-tinted alpha border
• Radius: pill
• Purpose: secondary CTA on white or light product surfaces

Secondary Outline / Ghost on Dark

• Background: transparent or #1a1a1a
• Text: #64b4fa or white for the strongest emphasis
• Border: 1px white-alpha or Accent Light Blue (#64b4fa) depending on emphasis
• Radius: pill
• Hover: soft blue-tinted dark fill with the text color preserved
• Focus ring: 2px Accent Light Blue halo
• Purpose: dark-surface secondary CTA without dropping below contrast targets

Cards & Containers

• Light cards: white fill with subtle outline
• Dark cards: #1a1a1a fill with bright text and light outline
• Radius: 16px
• Keep interiors airy; do not over-densify by default

Inputs & Controls

• Light surfaces: subtle outline, blue focus
• Dark surfaces: bright text, soft white-alpha outline, blue focus signal
• Toggles, tabs, and nav should feel precise and product-native, not ornamental

Collaboration Tokens

• Use team-spectrum colors for presence chips, avatar backgrounds, workspace badges, or lightweight categorization
• Do not assign them to all primary buttons or all large surfaces

Brand-Specific Recipes

Meeting Card

• Anatomy: title, time block, participant count, host avatar, device or room status, primary join action
• States: upcoming, live, ended, recording, muted-device warning
• Brand behavior: primary action stays blue; meeting state uses subtle chips rather than full-surface color fills

Presence Chip

• Anatomy: avatar or initials, user name, compact status dot/chip, optional location/device label
• Sizes: 24px compact, 32px default, 40px prominent
• States: available, presenting, in meeting, away, do-not-disturb
• Color rule: use collaboration colors as supporting identity accents, not as replacements for semantic status

Workspace Sidebar

• Anatomy: workspace switcher, search, primary nav groups, badge counts, pinned spaces, footer utilities
• Behavior: keep hierarchy obvious and allow badge counts or unread state to read at a glance
• States: selected item, unread, hovered, collapsed narrow mode

Roster Row

• Anatomy: avatar, display name, role label, mute/video state, hand-raise or reaction slot, overflow actions
• States: speaking, muted, hand raised, spotlighted, disconnected
• Density: support both meeting roster density and more spacious messaging/contact density

5. Layout Principles

Spacing & Grid

• Base rhythm: 8px
• Common scale: 8px, 12px, 16px, 24px, 32px, 48px, 64px, 88px
• Use clean marketing bands and product-story sections
• Prefer simple grids with clear scanning order
• Breakpoints: mobile up to 767px, tablet 768px-1199px, desktop 1200px and above

Composition

• White space is important; the UI should not feel cramped
• Marketing layouts should balance clarity with product focus
• Collaboration/product pages may mix white sections with dark embedded product surfaces
• Blue should lead the eye; collaboration colors should support, not compete
• On tablet, reduce multi-panel collaboration layouts to two primary regions and preserve a clear action rail
• On mobile, stack sidebars beneath the main header, collapse meeting side-panels into drawers, and keep call controls centered in a single thumb-reachable row
• Navigation should shift to a compact app bar plus drawer on smaller screens rather than shrinking labels until they wrap

Accessibility & Responsiveness

• Minimum touch target: 44px by 44px for buttons, tabs, roster actions, and call controls
• Maintain visible keyboard focus with an Accent Light Blue halo on both light and dark surfaces
• Any hover-revealed affordance must also appear on focus and touch
• Respect reduced-motion users by replacing staggered entrance motion with instant layout plus subtle opacity changes only

6. Motion & Interaction

• Motion should feel polished, calm, and practical
• Use fade, slide, and soft stagger in the 160ms–280ms range
• Hover and focus can use gentle blue glow or highlight
• Avoid loud spring physics or excessive flourish
• Under prefers-reduced-motion, remove stagger choreography and large panel slides; keep state feedback under 120ms with opacity or outline changes only

7. Voice & Brand

• Webex voice is practical, clear, and human
• Headlines should emphasize usefulness, outcomes, and collaborative capability
• The brand should feel like a trusted workspace platform for meetings, messaging, devices, and shared work
• It should be warmer than Cisco corporate, but still disciplined

8. Anti-patterns

• Do not turn Webex into a rainbow-heavy consumer social product
• Do not use collaboration colors as primary CTA colors
• Do not overuse gradients as core brand language
• Do not make the system overly corporate-dark when the artifact is meant to feel collaborative and accessible
• Do not use decorative typography that harms scannability

9. Agent Prompt Guide

Quick Color Reference

• Primary action: #1170cf
• Hover: #0353a8
• Pressed: #063a75
• Focus / bright dark-surface accent: #64b4fa
• Success: #3cc29a
• Warning: #f2990a
• Danger: #fc8b98

Example Component Prompts

• "Create a Webex-style product landing page with white canvases, Momentum typography, and blue pill CTAs using #1170cf."
• "Design a collaboration dashboard with clean white cards, one embedded dark product panel, and secondary team-color chips for presence."
• "Build a settings or admin surface that uses calm spacing, blue action states, and restrained multi-user color accents."