---
version: alpha
name: Cisco
description: Momentum Design System — enterprise networking authority through deep navy canvases, electric Cisco Blue accents, Inter at medium weight, conservative 4px grid, and subtle multi-layer shadows.

colors:
  # Canvas / surfaces
  background: "#07182d"           # --muse-color-brand-gray-90 domain; dominant deep navy
  surface: "#0d2137"              # slightly lifted navy for card/panel layering
  surface-elevated: "#162d47"     # modal, drawer, elevated containers
  surface-light: "#ffffff"        # light-mode sections and CTA panels
  surface-light-muted: "#f4f6f8"  # --muse-color-brand-gray-15 tint; alternate light bg

  # Ink / text
  ink: "#ffffff"                  # primary text on dark canvas
  ink-secondary: "#ced4db"        # --muse-color-brand-gray-15; subdued labels on dark
  ink-muted: "#a1a9b2"            # --muse-color-gray-40; placeholder, metadata
  on-primary: "#ffffff"           # text on primary-colored buttons
  on-surface: "#07182d"           # text on light surfaces
  ink-dark: "#07182d"             # primary text when used on white sections

  # Brand accent — Cisco Blue
  primary: "#00bceb"              # Cisco Blue; signature electric cyan-blue for dark surfaces
  primary-medium: "#0076d5"       # --cta-button-secondary-text-light; mid-blue for light surfaces
  primary-dark: "#0051af"         # --cta-text-primary-text-light-hover; pressed/hover on light
  primary-hover: "#45d4ff"        # --muse-color-brand-cisco-blue-40; lighter hover on dark bg
  primary-active: "#02c8ff"       # --muse-color-brand-cisco-blue-50; vivid active state
  primary-container: "#013545"    # --muse-color-brand-cisco-blue-90; tinted bg for dark selections
  primary-container-light: "#ccf4ff" # --muse-color-brand-cisco-blue-10; light-mode tinted bg

  # Secondary / mid-blue palette
  medium-blue: "#478eff"          # --muse-color-brand-medium-blue-40; secondary interactive
  medium-blue-deep: "#15337d"     # --muse-color-brand-medium-blue-80; dark accent fills
  text-accent: "#124fc9"          # --muse-text-accent-darker; accessible accent on light
  text-emphasis: "#0e3a99"        # --muse-text-emphasis-darker; deep emphasis link

  # Semantic
  success: "#6abf4b"              # --color-green-50; mid-green status
  success-dark: "#3d851c"         # --muse-theme-dark-color-success; dark-mode success
  warning: "#fbab18"              # --color-text-warning; amber alert text
  warning-bg: "#ffe5bd"           # --color-status-warning-5; warm amber tint
  error: "#d91821"                # --muse-theme-light-color-error; high-contrast red
  error-dark: "#f54952"           # --muse-theme-contrast-dark-color-error; dark-mode error
  info: "#0076d5"                 # --cta-button-secondary-text-light; informational blue

  # Borders
  border: "#26384f"               # --muse-color-brand-gray-90; subtle dark border
  border-light: "#ced4db"         # --muse-color-brand-gray-15; border on dark surface
  border-interactive: "#848d99"   # --muse-theme-gray-color-border-interactive; inputs
  border-focus: "#00bceb"         # same as primary; focus ring on dark

  # Shadow tints (opaque — Google format requires hex)
  shadow-soft: "#000000"          # was rgba(0,0,0,0.16) — card shadow flattened
  shadow-medium: "#000000"        # was rgba(27,28,29,0.20) — deep shadow layer flattened
  shadow-glow: "#0a60ff"          # was rgba(10,96,255,0.30) — focus/hover glow flattened

typography:
  display-hero:
    fontFamily: "Inter, Noto Sans, CiscoSans, CiscoSansTT, -apple-system, system-ui, sans-serif"
    fontSize: 60px
    fontWeight: 500
    lineHeight: 1.13
    letterSpacing: -0.5px
  display:
    fontFamily: "Inter, Noto Sans, CiscoSans, CiscoSansTT, -apple-system, system-ui, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.17
    letterSpacing: -0.25px
  heading-section:
    fontFamily: "Inter, Noto Sans, CiscoSans, CiscoSansTT, -apple-system, system-ui, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Inter, Noto Sans, CiscoSans, CiscoSansTT, -apple-system, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
  heading-small:
    fontFamily: "Inter, Noto Sans, CiscoSans, CiscoSansTT, -apple-system, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0px
  body-large:
    fontFamily: "Inter, Noto Sans, CiscoSans, CiscoSansTT, -apple-system, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.44
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Noto Sans, CiscoSans, CiscoSansTT, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Noto Sans, CiscoSans, CiscoSansTT, -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  nav-link:
    fontFamily: "Inter, Noto Sans, CiscoSans, CiscoSansTT, -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.43
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Noto Sans, CiscoSans, CiscoSansTT, -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.43
    letterSpacing: 0.14px
  label:
    fontFamily: "Inter, Noto Sans, CiscoSans, CiscoSansTT, -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.30
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, Noto Sans, CiscoSans, CiscoSansTT, -apple-system, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.00
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 8px
  lg: 12px
  pill: 48px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-surface}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-surface}"
  button-primary-active:
    backgroundColor: "{colors.primary-active}"
    textColor: "{colors.on-surface}"

  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 24px
    borderColor: "{colors.primary}"
    borderWidth: 1px
  button-secondary-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary-hover}"
    borderColor: "{colors.primary-hover}"

  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 24px
  button-ghost-hover:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"

  button-light-primary:
    backgroundColor: "{colors.primary-medium}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 10px 24px
  button-light-primary-hover:
    backgroundColor: "{colors.primary-dark}"
    textColor: "{colors.on-primary}"

  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    padding: 24px
    borderColor: "{colors.border}"
    borderWidth: 1px
  card-hover:
    borderColor: "{colors.primary}"
    backgroundColor: "{colors.surface-elevated}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
    borderColor: "{colors.border-interactive}"
    borderWidth: 1px
  input-focus:
    borderColor: "{colors.border-focus}"
    outlineWidth: 2px
    outlineColor: "{colors.border-focus}"

  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  badge-success:
    backgroundColor: "{colors.success-dark}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  badge-warning:
    backgroundColor: "{colors.warning-bg}"
    textColor: "{colors.on-surface}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  nav-global:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 0px 16px

  tooltip:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 6px 10px

  data-table-header:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label}"
    padding: 10px 16px
    borderColor: "{colors.border}"
---

# Cisco Design System

## Overview

Cisco's Momentum Design System earns its name from mass and velocity: an enterprise UI that moves with purpose across networking consoles, security dashboards, collaboration platforms, and the public-facing cisco.com. The primary canvas is `{colors.background}` — a deep navy blue-black at `#07182d` — that positions every surface against the darkness of infrastructure. This isn't a decorative choice. It signals command-and-control, the same visual logic that governs data center interfaces, where dark themes reduce eye strain during extended operation and give high-value status signals somewhere to glow.

The accent strategy is immediately legible: `{colors.primary}` is electric cyan-blue (`#00bceb`), Cisco's proprietary brand color, applied to every interactive element on dark backgrounds. It reads as signal against the navy — the same logic that makes indicator LEDs visible on hardware faceplates. On light sections of the site, the system shifts to `{colors.primary-medium}` (`#0076d5`), a more restrained accessible blue that meets WCAG AA on white. This dual-surface color strategy is intentional and consistent — the brand reads as authoritative regardless of whether the canvas is dark or light.

Typography is Inter throughout. Cisco used to set the web in their proprietary CiscoSansTT (still referenced as a system fallback), but the production site serves Inter as a variable-weight web font. Weight 500 anchors headings — neither aggressive bold nor uncertain light — while 700 appears selectively on buttons and emphasized labels. This measured weight system creates an impression of confident competence over dramatic flair. Body copy at `{typography.body}` (16px/400) is generous and deliberate. The CiscoSans fallback preserves brand continuity when the web font fails in enterprise network environments where external CDNs are blocked.

**Key Characteristics:**
- Deep navy primary canvas — `{colors.background}` at `#07182d` signals operational authority, not decorative darkness
- Dual-surface color logic — `{colors.primary}` (`#00bceb`) on dark, `{colors.primary-medium}` on light; same brand, different contrast targets
- Electric Cisco Blue accent — the signature cyan-blue is a unique marker in the enterprise landscape, neither IBM's cobalt nor Salesforce's cloud-blue
- Inter replaces CiscoSans — variable-weight web font with CiscoSansTT as graceful enterprise fallback
- Weight-500 headings — confident middle-weight, never shouting; `{typography.display-hero}` at 500 is the system's loudest voice
- 8px-base spacing — `{spacing.sm}` is the grid atom; all component density flows from this unit
- Conservative 4px default radius — `{rounded.sm}` for buttons, inputs, cards; the system values precision over softness
- Multi-layer shadow system — primary shadow is two-layer: `rgba(0,0,0,0.16)` close + `rgba(27,28,29,0.20)` deep, creating realistic depth without flat decorative use
- Layered navy surfaces — `{colors.surface}` and `{colors.surface-elevated}` stack as near-identical dark tones, creating hierarchy through elevation rather than lightness contrast
- Complete Cisco Blue ramp — 10-step scale from `{colors.primary-container-light}` to `{colors.primary-container}` enables tinted state and selection patterns
- Full semantic system — success, warning, error each with dedicated tokens for both dark and light contexts
- Momentum component tokens — CSS custom properties follow `--muse-*` naming (`muse` = Momentum UI System Engine)

## Colors

### Primary

- **Deep Navy Canvas** (`{colors.background}`): `#07182d` — the base application shell. Sets the operational tone. Used on the full-bleed marketing page, nav, and product dashboards.
- **Lifted Surface** (`{colors.surface}`): `#0d2137` — card and panel backgrounds elevated one stop above the base canvas. The contrast is subtle — 2-3% luminance shift — creating hierarchy without breaking the dark theme.
- **Elevated Surface** (`{colors.surface-elevated}`): `#162d47` — modals, opened drawers, and active overlays sit on this tone. The layered navy system reads as physical depth.
- **Ink** (`{colors.ink}`): Pure white for primary text on dark surfaces.
- **Ink Secondary** (`{colors.ink-secondary}`): `#ced4db` — `--muse-color-brand-gray-15`; labels, metadata, table headers.
- **Ink Muted** (`{colors.ink-muted}`): `#a1a9b2` — `--muse-color-gray-40`; placeholder text, disabled states, supporting captions.

### Brand Accent

- **Cisco Blue (dark)** (`{colors.primary}`): `#00bceb` — the canonical electric cyan-blue for dark backgrounds. Every CTA, toggle, checkbox, and focus ring on the dark canvas anchors to this value.
- **Cisco Blue (light)** (`{colors.primary-medium}`): `#0076d5` — `--cta-button-secondary-text-light`; the accessible blue for light-mode surfaces on cisco.com's mixed-theme layout.
- **Hover Blue** (`{colors.primary-hover}`): `#45d4ff` — `--muse-color-brand-cisco-blue-40`; brightens toward white on hover over dark backgrounds, maintaining the electric quality.
- **Active Blue** (`{colors.primary-active}`): `#02c8ff` — `--muse-color-brand-cisco-blue-50`; the most vivid state, used for pressed and selected.
- **Tinted Container (dark)** (`{colors.primary-container}`): `#013545` — deep Cisco Blue tint for selected rows, active tabs, selected navigation items on dark backgrounds.
- **Tinted Container (light)** (`{colors.primary-container-light}`): `#ccf4ff` — `--muse-color-brand-cisco-blue-10`; light-mode selection and focus halos.

### Semantic

- **Success** (`{colors.success}`): `#6abf4b` — mid-green status text and icons. `{colors.success-dark}` (`#3d851c`) for dark-mode contexts.
- **Warning** (`{colors.warning}`): `#fbab18` — amber alert text on dark surfaces. `{colors.warning-bg}` (`#ffe5bd`) for light-surface tinted banners.
- **Error** (`{colors.error}`): `#d91821` — strong red for error states on light surfaces. `{colors.error-dark}` (`#f54952`) for dark-mode error surfaces.

### Borders and Shadows

- **Border** (`{colors.border}`): `#26384f` — `--muse-color-brand-gray-90`; near-invisible 1px rule between dark surfaces. Adds structure without fighting the dark theme.
- **Border Interactive** (`{colors.border-interactive}`): `#848d99` — `--muse-theme-gray-color-border-interactive`; input field edges, where contrast needs to be legible even in low-light.
- **Shadow soft** (`{colors.shadow-soft}`): was `rgba(0,0,0,0.16)` — flattened to `#000000`. The close shadow layer in the two-part dropdown and card shadow.
- **Shadow Glow** (`{colors.shadow-glow}`): was `rgba(10,96,255,0.30)` — flattened to `#0a60ff`. Tinted brand glow for focus/hover emphasis on interactive elements.

## Typography

### Font Family

- **Primary**: `Inter` (self-hosted variable font, `inter-latin-variable.woff2`), with fallbacks: `Noto Sans, CiscoSans, CiscoSansTT, -apple-system, system-ui, sans-serif`
- **Legacy fallback**: CiscoSans / CiscoSansTT — Cisco's proprietary humanist grotesque. Appears on captions and labeled elements in product interfaces. Self-hosted as `CiscoSansTTRegular.woff2`, `CiscoSansTTLight.woff2`.
- **CiscoSans characteristics**: Capitalized label treatment; used at small sizes (9-12px) with `text-transform: capitalize` for category tags and metadata labels.
- **Font loading**: Both fonts are self-hosted — critical for enterprise environments where external CDN access may be blocked by network policy.

### Hierarchy

The complete type scale is declared in the `typography:` token block above. Use those tokens directly via reference rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | Full-bleed hero sections, major campaign headlines |
| `display` | Section-level feature headings, product announcement titles |
| `heading-section` | Page-level section openers, navigation category titles |
| `heading-sub` | Sub-section titles, card headings, feature names |
| `heading-small` | Sidebar headings, inline feature callouts, tile titles |
| `body-large` | Lead paragraph text, feature description summaries |
| `body` | Standard paragraph, product page copy, form labels |
| `body-small` | Supporting text, footnotes, supplemental descriptions |
| `nav-link` | Global navigation items, sidebar links, breadcrumb segments |
| `button-ui` | All button labels; weight 700 signals action affordance |
| `label` | Form field labels, table column headers, input placeholders |
| `caption` | Timestamps, metadata, status tags, icon labels |

### Principles

- **Weight 500 as the default heading voice** — Inter at medium weight reads as confident infrastructure; heavier weights reserved only for buttons and critical labels
- **CiscoSans as the capitalized label language** — product-interface metadata uses the proprietary font with `text-transform: capitalize`, carrying the brand into data-dense contexts
- **16px body floor** — no paragraph text runs below `{typography.body}`; enterprise density is managed through spacing, not font scaling
- **Tracked button labels** — `{typography.button-ui}` at 0.14px letter-spacing signals interactive elements by their typographic rhythm, not color alone
- **Self-hosted fonts first** — both Inter and CiscoSans are loaded from Cisco's own infrastructure, reflecting enterprise trust and network-independence requirements

## Layout

### Spacing System

The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

The Momentum spacing system is disciplined and dense. The 8px atom generates a predictable grid that reads as enterprise-native: information-rich without being cramped. Generous use of `{spacing.lg}` (24px) and `{spacing.xl}` (32px) separates logical sections, while `{spacing.sm}` (8px) governs component internals like icon gaps and inline element separation.

### Grid & Container

- Max content width: 1440px (responsive down through 1280px, 1024px, 768px, 425px, 320px)
- Standard 12-column grid with gutters; product pages may use asymmetric splits (60/40 or 50/50) for feature callouts
- Full-bleed dark sections alternate with contained light-background panels for visual rhythm
- Navigation: sticky global nav with `{colors.background}` fill; transparent mega-menu on scroll

### Whitespace Philosophy

- Enterprise density is managed primarily through section-level spacing, not component-level tightness
- Cards use `{spacing.lg}` (24px) internal padding — enough breathing room to prevent the dark surfaces from feeling claustrophobic
- List items and table rows use `{spacing.md}` (16px) vertical rhythm — consistent with data-heavy product UIs where scanning speed matters

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Base canvas elements; nav items, body sections |
| Subtle (Level 1) | `1px 4px rgba(0,0,0,0.16)` close layer | Inline-elevated cards, pinned headers |
| Card (Level 2) | Two-layer: close + `7px 29px rgba(27,28,29,0.20)` deep | Product cards, feature panels, dropdowns |
| Elevated (Level 3) | `0px 0px 18px rgba(0,0,0,0.20)` | Sticky navigation, scroll-locked panels |
| Dialog (Level 4+) | `surface-elevated` bg + Card Level 2 shadow | Modals, side drawers, context menus |
| Focus Ring | `2px solid {colors.primary}` | All interactive elements; meets WCAG 2.4.11 |
| Brand Glow | `0px 0px 20px rgba(10,96,255,0.30)` | CTA hover emphasis; electric highlight on key actions |

**Shadow Philosophy**: Cisco's shadow system is two-layer by default — a tight `rgba(0,0,0,0.16)` close shadow combined with a softer `rgba(27,28,29,0.20)` bloom behind it. This creates depth that photographs realistically: the close layer creates crispness, the diffuse layer creates atmosphere. On dark backgrounds, shadows are nearly invisible (dark-on-dark), so elevation is communicated primarily through the `{colors.surface}` → `{colors.surface-elevated}` background color steps rather than shadow cast. Shadow plays a stronger role only when a dark element lifts above a light background in mixed-theme contexts.

## Shapes

The complete radius scale is in the `rounded:` token block above. The system uses:

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-width banners, section dividers, table rows |
| `xs` | 2px | Micro-elements: close buttons, progress bars, tab indicators |
| `sm` | 4px | Primary workhorse: buttons, inputs, icon containers, compact cards |
| `md` | 8px | Feature cards, modals, expanded panels, larger containers |
| `lg` | 12px | Hero imagery, large feature modules, marketing sections |
| `pill` | 48px | Tag chips, status badges, navigation pills |

The radius system sits in the precise-to-moderately-rounded range. `{rounded.sm}` at 4px is the dominant shape for interactive elements — enough to eliminate harsh mechanical corners without drifting into friendly-app softness. The system reads as purposeful and technical, not playful. `{rounded.pill}` appears on badges and compact tags; it's the only fully-rounded treatment, used deliberately to mark semantic status.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them.

### Button Variants

- **`button-primary`** — Electric cyan-blue fill (`{colors.primary}`) on dark surfaces; full navy text. Reserved strictly for primary CTAs. Hover brightens to `{colors.primary-hover}`.
- **`button-light-primary`** — Accessible mid-blue (`{colors.primary-medium}`) for primary actions on white/light sections. Hover deepens to `{colors.primary-dark}`.
- **`button-secondary`** — Transparent fill with `{colors.primary}` border and label; cyan-blue outline button for dark contexts. Hover fills with `{colors.primary-container}`.
- **`button-ghost`** — No border, no fill; muted secondary text. Used for dismissal, back navigation, and tertiary actions in data-dense interfaces.

### Cards

Cards use `{colors.surface}` as background against the `{colors.background}` canvas — the delta is subtle (a few percent luminance) but structurally clear. Border at `{colors.border}` adds a 1px structural edge. Hover state shifts to `{colors.surface-elevated}` and brightens the border to `{colors.primary}`, signaling interactivity without dramatic animation.

### Inputs

Inputs sit on `{colors.surface}` with `{colors.border-interactive}` edges — a noticeably lighter border than the default card border, keeping form fields visible in the dark environment. Focus state adds a 2px `{colors.primary}` ring and upgrades the border color to `{colors.border-focus}`. CiscoSans label-level tokens appear on form field labels in product contexts.

### Badges / Tags

Badges use `{rounded.pill}` exclusively — the only component category that fully rounds. Dark-surface badges use `{colors.primary-container}` fill with `{colors.primary}` text for information; semantic variants (success, warning, error) each have dedicated background/text pairings for status communication.

### Navigation

The global nav uses `{colors.background}` fill and `{colors.ink}` text — visually continuous with the page canvas, differentiated by sticky positioning and a subtle bottom border. Nav links use `{typography.nav-link}` (14px/600). Mega-menu dropdowns layer onto `{colors.surface}` with the two-part card shadow for depth.

## Do's and Don'ts

### Do

- Use `{colors.primary}` (`#00bceb`) exclusively for interactive affordances on dark surfaces — CTAs, toggles, focus rings, active states
- Switch to `{colors.primary-medium}` on white/light-mode sections; never use the electric cyan on white (contrast fails)
- Use `{colors.surface}` → `{colors.surface-elevated}` layering to communicate elevation on dark canvases instead of shadow
- Set all heading tokens at weight 500 (Inter); reserve weight 700 strictly for `{typography.button-ui}` and `{typography.label}`
- Apply `{rounded.sm}` (4px) as the default for all interactive elements — buttons, inputs, icon containers
- Use the two-layer shadow system (`shadow-soft` + the `rgba(27,28,29,0.20)` deep layer) together on cards that lift above mixed-theme backgrounds
- Reference CSS custom properties (`--muse-color-brand-cisco-blue-*`) when extending the system; the full 10-step blue ramp is available
- Keep CiscoSans/CiscoSansTT in the font fallback stack — enterprise users may block external CDNs and the local font creates graceful degradation

### Don't

- Don't use `{colors.primary}` (`#00bceb`) on white backgrounds — the contrast ratio fails WCAG AA; use `{colors.primary-medium}` instead
- Don't introduce new radius values between `{rounded.sm}` and `{rounded.md}` — the 4px/8px binary handles all product needs; mid-range values create system drift
- Don't use weight 300 (CiscoSansTT Light or Inter Light) for any interactive UI text — it reads as provisional in enterprise contexts and fails minimum weight contrast at small sizes
- Don't render dark navy text (`{colors.ink-dark}`) on `{colors.background}` — it disappears. `{colors.ink}` (white) is the only correct dark-surface text color
- Don't mix the dark-surface and light-surface primary colors within a single component — `{colors.primary}` and `{colors.primary-medium}` are surface-specific; crossing them creates incoherent interactive states
- Don't use `{rounded.pill}` on buttons — Cisco buttons are `{rounded.sm}`; pill buttons signal a different brand (consumer product) and conflict with the system's technical register
- Don't deploy with external font CDN load only — always include self-hosted fallbacks for CiscoSans in enterprise deployments where CDN access may be blocked by firewall policy
- Don't apply `{colors.warning}` amber text on `{colors.surface}` without sufficient contrast check — `#fbab18` on dark navy passes, but on light surfaces it may require `{colors.warning-bg}` as the carrier

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <320px | Single column; all padding collapses to `{spacing.sm}`; navigation hidden |
| Mobile | 320–767px | Single column; hamburger nav; hero headline drops to `{typography.heading-section}` |
| Tablet | 768–1023px | Two-column cards; mega-menu collapses to accordion; hero at `{typography.display}` |
| Desktop | 1024–1439px | Full 12-column grid; sticky global nav; mega-menu expands |
| Large Desktop | 1440px+ | Max-width container activates (1440px); content centered with increased side margin |

### Touch Targets

- Minimum touch target: 44×44px on mobile, following WCAG 2.5.5
- Button padding (`10px 24px`) expands to `12px 28px` on mobile viewports below 768px
- Navigation items use full-width tap targets in mobile accordion state

### Collapsing Strategy

- Global navigation collapses to hamburger below 768px; mega-menu converts to full-screen overlay
- Card grids reduce from 3-column to 2-column at 1024px, then single-column at 768px
- Hero section text scales down one step in the `{typography.*}` hierarchy at each breakpoint
- Data tables switch to card-stack layout below 640px, with column labels promoted to bold row headers

### Image Behavior

- Hero images maintain aspect ratio with `object-fit: cover`; focal point preserved via `object-position`
- Product screenshots and interface previews use `srcset` with dedicated 1x/2x/3x variants
- Dark-mode images (dark-background screenshots) display without overlay; light-background images use a subtle dark gradient footer to integrate with the navy canvas

---

## Agent Prompt Guide

### Quick Color Reference

- Background: `{colors.background}` (`#07182d`)
- Text: `{colors.ink}` (white)
- Secondary text: `{colors.ink-secondary}` (`#ced4db`)
- Brand accent (dark): `{colors.primary}` (`#00bceb`)
- Brand accent (light): `{colors.primary-medium}` (`#0076d5`)
- Border: `{colors.border}` (`#26384f`)
- CTA on dark: `{colors.primary}`
- CTA on light: `{colors.primary-medium}`

### Example Component Prompts

- "Build a hero section using `{colors.background}` as the full-bleed canvas, `{colors.ink}` for headline text set in `{typography.display-hero}` (Inter 500, 60px), a `{colors.primary}` CTA button with `{rounded.sm}` radius and `{typography.button-ui}` label, and a `{colors.ink-secondary}` subheadline in `{typography.body-large}`."
- "Create a product card with `{colors.surface}` background, `{rounded.md}` corners, 24px internal padding, a 1px `{colors.border}` edge, `{colors.ink}` heading in `{typography.heading-sub}`, `{colors.ink-secondary}` body in `{typography.body-small}`, and a hover state that shifts the background to `{colors.surface-elevated}` and the border to `{colors.primary}`."
- "Design a primary action button: `{colors.primary}` fill, `{colors.on-surface}` label text, `{typography.button-ui}` (Inter 700, 14px, 0.14px tracking), `{rounded.sm}` radius, 10px/24px padding. Hover shifts background to `{colors.primary-hover}`; active to `{colors.primary-active}`."
- "Build a global navigation bar with `{colors.background}` fill, white `{colors.ink}` links in `{typography.nav-link}`, 0px/16px padding on link items, sticky positioning, and a `{colors.border}` 1px bottom rule. On hover, links shift to `{colors.primary}`."
- "Create a status badge using `{colors.primary-container}` fill, `{colors.primary}` text in `{typography.caption}`, `{rounded.pill}` radius, 4px/10px padding. For a success variant, use `{colors.success-dark}` fill and `{colors.ink}` text."
- "Design an input field: `{colors.surface}` background, `{colors.border-interactive}` 1px border, `{colors.ink}` text in `{typography.body}`, `{rounded.sm}` corners, 8px/12px padding, `{colors.ink-muted}` placeholder. Focus state: `{colors.border-focus}` border + 2px `{colors.primary}` outline ring."

### Iteration Guide

1. **Start with `{colors.background}` (`#07182d`) as the full application canvas** — every component sits against this deep navy; white sections are contained modules, not the default surface
2. **Choose the right primary blue for the surface** — `{colors.primary}` (`#00bceb`) on dark backgrounds; `{colors.primary-medium}` (`#0076d5`) on white/light backgrounds; never cross-use
3. **Set headings to Inter weight 500** — use `{typography.display-hero}`, `{typography.display}`, `{typography.heading-section}` via their tokens; never exceed 500 for body headings
4. **Apply the two-layer shadow only when lifting above a mixed-theme background** — on pure dark surfaces, use `{colors.surface-elevated}` background step for elevation instead of shadow
5. **Default all interactive elements to `{rounded.sm}` (4px)** — only cards and large modules use `{rounded.md}` (8px); badges and status chips use `{rounded.pill}`
6. **Use the `--muse-color-brand-cisco-blue-*` CSS custom property ramp for tinted state variations** — the 10-step scale (10–90) is the complete Cisco Blue family; `{colors.primary-container}` and `{colors.primary-container-light}` are the key tint tokens for selection states
7. **For enterprise product interfaces, include CiscoSans in the font stack** — `CiscoSansTTRegular.woff2` must be self-hosted; use it for caption-scale labels with `text-transform: capitalize` to match the Momentum product UI pattern

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Cisco. Brand names and trademarks belong to their respective owners.