Cisco / Webex Momentum Design System

# Momentum — Design Style Reference

```yaml
# How this file was made. Sources are first-party; nothing here is
# read from a rendered page. Full breakdown at source_page below.
method: restated-from-official-tokens-package
confidence: medium
verified_at: 2026-09-03
source_page: https://www.designsystems.one/design-systems/cisco-momentum
sources:
  - https://momentum.design/
  - https://momentum.design/tokens
  - https://github.com/momentum-design/momentum-design
```

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Cisco / Webex. "Momentum" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Momentum
**Owner:** Cisco / Webex
**Official documentation:** https://momentum.design/
**Visual character:** Video-call ergonomics: join-green and leave-red as sacred semantics, soft dark-friendly neutrals, and controls sized for mid-meeting stress.

---

## Summary

Cisco's shared design language and component libraries powering the Webex suite of collaboration products across web.

_Editorial confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product. Field-level evidence: 0/71 claims source-linked, 0/71 dated. Confidence is not verification; validate canonical values before implementation._

[Inspect every field and its evidence](https://www.designsystems.one/api/style-spec?system=cisco-momentum)

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Momentum Blue | `#0070d2` | `--mds-color-theme-text-accent-normal` | Primary actions and links |
| Text Primary | `#121212` | `--mds-color-theme-text-primary-normal` | Primary text |
| Text Secondary | `#545454` | `--mds-color-theme-text-secondary-normal` | Secondary text |
| White | `#ffffff` | `--mds-color-theme-background-solid-primary-normal` | Surfaces |
| Background Secondary | `#f7f7f7` | `--mds-color-theme-background-solid-secondary-normal` | Panels |
| Border | `#e0e0e0` | `--mds-color-theme-outline-secondary-normal` | Borders |
| Cancel Red | `#fc2b53` | `--mds-color-theme-button-cancel-normal` | Leave/decline call actions |
| Join Green | `#1abc7b` | `--mds-color-theme-button-join-normal` | Join call actions |
| Warning Yellow | `#ffbc44` | `--mds-color-theme-indicator-attention` | Warnings |

## Typography

- **Body:** CiscoSans / Momentum — weights 400, 500, 700 — `'CiscoSansTT', 'Momentum', 'Helvetica Neue', Arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| display | `40px` | `48px` |
| heading-large | `24px` | `32px` |
| heading-small | `16px` | `24px` |
| body | `14px` | `20px` |
| small | `12px` | `16px` |

## Spacing

Base unit: `8px (rem-based)`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `32px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `8px` |
| large | `12px` |
| pill | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| overlay | `0 4px 16px rgba(0,0,0,0.2)` |

## Quick start (CSS)

```css
/* Momentum — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Native dp/sp values are omitted, never silently converted.
   Official reference: https://momentum.design/
   Field evidence: https://www.designsystems.one/api/style-spec?system=cisco-momentum */

:root {
  /* Color */
  --mds-color-theme-text-accent-normal: #0070d2; /* Primary actions and links */
  --mds-color-theme-text-primary-normal: #121212; /* Primary text */
  --mds-color-theme-text-secondary-normal: #545454; /* Secondary text */
  --mds-color-theme-background-solid-primary-normal: #ffffff; /* Surfaces */
  --mds-color-theme-background-solid-secondary-normal: #f7f7f7; /* Panels */
  --mds-color-theme-outline-secondary-normal: #e0e0e0; /* Borders */
  --mds-color-theme-button-cancel-normal: #fc2b53; /* Leave/decline call actions */
  --mds-color-theme-button-join-normal: #1abc7b; /* Join call actions */
  --mds-color-theme-indicator-attention: #ffbc44; /* Warnings */

  /* Typography */
  --font-body: 'CiscoSansTT', 'Momentum', 'Helvetica Neue', Arial, sans-serif;

  /* Type scale */
  --text-display: 40px; /* line-height 48px */
  --text-heading-large: 24px; /* line-height 32px */
  --text-heading-small: 16px; /* line-height 24px */
  --text-body: 14px; /* line-height 20px */
  --text-small: 12px; /* line-height 16px */

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Radius */
  --radius-default: 8px;
  --radius-large: 12px;
  --radius-pill: 9999px;

  /* Elevation */
  --shadow-overlay: 0 4px 16px rgba(0,0,0,0.2);
}
```

## Engineering profile

- **Ships for:** Web Components, React, Angular
- **Source model:** Open source

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Momentum by Cisco / Webex — Cisco's shared design language and component libraries powering the Webex suite of collaboration products across web. Character: Video-call ergonomics: join-green and leave-red as sacred semantics, soft dark-friendly neutrals, and controls sized for mid-meeting stress. Use a primary colour near #0070d2, the typeface "CiscoSans / Momentum" (or a close equivalent), corner radius around 8px, a spacing rhythm on a 8px (rem-based) base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Momentum documentation](https://momentum.design/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/cisco-momentum) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._