Cisco Design System Deep Dive

1. Brand Overview

Cisco’s design system screams enterprise-grade precision. This is a brand that has been in the networking and infrastructure space for decades, and they’ve translated that engineering mindset into their visual language.

The vibe is corporate, but not cold. There’s a quiet confidence in how they use color—deep navy blues, clean whites, and high-contrast CTAs in a punchy blue (#0a60ff). They’re not chasing trendy gradients or flashy microinteractions. Instead, they prioritize clarity, accessibility, and scalability across a massive product portfolio.

Typography is disciplined. The CiscoSans family dominates, with weights and sizes tuned for legibility at both small UI scales and large marketing headlines. The type scale is tight—no wild jumps—because this brand needs consistency across marketing pages, documentation, and transactional dashboards.

Spacing follows an 8px base grid, with some occasional 4px or 2px nudges. This works because it keeps layouts clean and predictable, which is essential when you have hundreds of product sub-sites sitting under one umbrella.

If you’re a designer working in this system, your constraints are clear: keep it clean, keep it consistent, and don’t improvise. Cisco’s visual language is engineered to work across multiple contexts, from high-level keynote decks to dense network configuration UIs. That’s why the system feels so “engineered”—it’s built for longevity and repeatability, not novelty.

2. Color System

2.1 Primary Colors

The primary brand color is #0a60ff (rgb(10, 96, 255)). This is the blue you see on CTAs, links, and primary interactive elements. It’s saturated, modern, and immediately readable against white or very dark backgrounds.

Psychologically, blue conveys trust, stability, and competence—exactly what Cisco wants you to feel when buying infrastructure or security products. Competitors like Juniper Networks lean into similar blues but often mix in greens; Cisco keeps their core blue pure.

Their secondary “semantic primary” is a muted steel (#536070) used for text and subdued UI elements. It’s a neutral that pairs well with both light and dark themes.

2.2 Complete Palette

Here’s every color from the extracted data:

(Note: The full token list is extensive—see Design Tokens section for every extracted value.)

2.3 Color Relationships

Dark navy (#07182d) and pure white (#ffffff) form the primary contrast pairing. The blue #0a60ff sits in between—bright enough to pop on dark, bold enough to stand on white.

Accessibility-wise:

• White text on #0a60ff passes WCAG AA easily.
• #536070 on white is borderline for small text—works for secondary copy but not for critical UI labels.
• The palette includes multiple lighter blues (#45d4ff, #7ae2ff) for hover/focus states—these maintain brand consistency while signaling interaction.

Dark mode is supported via deep blues and grays (#013545, #16283d)—tokens clearly exist for dark theme variants.

2.4 Usage Guide

• Primary actions: #0a60ff background, white text.
• Text links: #0a60ff default, #1883fd hover.
• Alerts: Use brand red (#b0121a) for destructive, brand yellow (#f7c223) for warnings.
• Success: Brand green (#5cad37) with white text on buttons.
• Avoid mixing magenta (#ff007f) with primary blue—it clashes. Magenta is for marketing highlights only.
• Always pair dark navy backgrounds with white or light blue text for contrast.

3. Typography

3.1 Font Families

Everything runs on CiscoSans and CiscoSansTT, with fallbacks to -apple-system, system-ui, and Arial in some contexts. No Google or Adobe Fonts—this is a custom corporate typeface.

3.2 Type Scale

(The full set includes many weight/size combos—see tokens section for every value.)

3.3 Hierarchy

They’ve kept heading weights light (300) to avoid heavy blocks of text. This works with a tech brand—lighter headings feel modern and airy. Body and link text at 16px is standard for readability. Captions drop to 14px but keep decent line height (1.43–1.5) so they don’t feel cramped.

4. Spacing & Layout

4.1 Spacing Scale

Base grid is 8px. Common values: 4px, 8px, 12px, 16px, 24px, 48px, 64px.

Occasional odd values like 6.25px show up in specific components—probably icon alignment hacks.

4.2 Layout

Breakpoints suggest a responsive system:

• Mobile: ≤ 600px
• Tablet: ~768px–1024px
• Desktop: ≥ 1280px–1440px
• Ultra-wide: 1920px

5. Visual Elements

Border Radius: Mostly small radii (2px, 4px) for inputs and buttons. Large pill buttons use 48px or 100px. Cards sometimes get 8px or 24px.

Shadows: They do use subtle shadows—rgba black at low opacity, multiple layers for elevation. E.g., rgba(0,0,0,0.16) 0px 1px 4px plus rgba(27,28,29,0.2) 0px 7px 29px.

Borders: Light grays (#e6e7e8, #b9c1c9) for dividers. Solid 1px borders on inputs and buttons, often transparent in default state.

6. Components

6.1 Buttons

They have clear variants:

Secondary CTA (small)
Default: transparent background, #0a60ff text & border, 48px radius, padding 8px 20px.
Hover: white background, lighter blue text, 2px border.
Active: white text on green background (#2c6415), outline.
Focus: black outline, #1eaedb background, white text.

Primary CTA (large)
Default: #0a60ff background, white text, 48px radius, padding 10px 20px.
Hover: white background, blue text.
Active: same green active state as secondary.
Focus: black outline, blue background, white text.

Neutral CTA
Default: white background, dark navy text, 48px radius.
Hover: white background, blue text.

Icon buttons
0px radius, no padding, color changes on hover.

Pill buttons
50% radius, subtle shadows, hover scale effect.

6.2 Links

Variants by context:

• White text on dark background (#ffffff) hover to light blue.
• Dark text (#07182d) hover to blue.
• Bold blue (#0a60ff) hover lighter.
  No underlines—Cisco uses color change as the sole hover indicator.

6.3 Forms

No extracted input styles—likely follow border radius 4px, subtle border colors, focus states with blue outlines.

6.4 Cards

Radius 8px or 24px, light gray borders or subtle shadows for elevation. Padding usually 24px.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #0a60ff;
  --color-primary-dark: #07182d;
  --color-secondary: #536070;
  --color-white: #ffffff;
  --color-gray-medium: #808080;
  --color-gray-dim: #696969;
  --color-gray-light: #e6e7e8;
  --color-brand-cisco-blue-90: #013545;
  --color-brand-cisco-blue-40: #45d4ff;
  --color-brand-medium-blue-80: #15337d;
  --color-brand-orange-60: #d97a00;
  --color-brand-red-60: #b0121a;
  --color-brand-green-40: #5cad37;
  --color-brand-yellow-40: #f7c223;
  --color-brand-magenta-50: #ff007f;
  --color-gray-40: #c3c4c5;

  /* Typography */
  --font-cisco: "CiscoSans", "CiscoSansTT", -apple-system, system-ui;
  --font-cisco-tt: "CiscoSansTT", Arial;

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-48: 48px;
  --space-64: 64px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 48px;
  --radius-full: 100px;

  /* Shadows */
  --shadow-md: rgba(0,0,0,0.16) 0px 1px 4px 0px, rgba(27,28,29,0.2) 0px 7px 29px 0px;
}

8. AI Coding Assistant Prompt

# Cisco Design System Specification

You are a Cisco design expert. Build UIs matching their visual language exactly.

## Brand Context
Cisco values clarity, accessibility, and engineered precision. Their design system supports enterprise-scale products—consistency and readability are key. Colors, typography, and spacing are strictly controlled.

## Color Palette
- Primary Blue: #0a60ff — CTAs, primary buttons, interactive links
- Dark Navy: #07182d — Headers, footers, dark backgrounds
- Steel Gray: #536070 — Secondary text, subdued UI
- Pure White: #ffffff — Page backgrounds, text on dark
- Medium Gray: #808080 — Secondary text
- Dim Gray: #696969 — Neutral text
- Light Gray: #e6e7e8 — Borders, dividers
- Brand Cisco Blue 90: #013545 — Dark theme backgrounds
- Brand Cisco Blue 40: #45d4ff — Hover states, accents
- Brand Medium Blue 80: #15337d — Dark interactive elements
- Brand Orange 60: #d97a00 — Alerts, highlights
- Brand Red 60: #b0121a — Error states
- Brand Green 40: #5cad37 — Success states
- Brand Yellow 40: #f7c223 — Warning states
- Brand Magenta 50: #ff007f — Marketing highlights
- Gray 40: #c3c4c5 — UI borders

## Typography
Font families:
- Primary: "CiscoSans", "CiscoSansTT", -apple-system, system-ui
- Alternate: "CiscoSansTT", Arial

Type sizes:
| Level        | Size      | Weight | Line Height | Use |
|--------------|-----------|--------|-------------|-----|
| H1 Large     | 60px      | 300    | 1.22        | Hero titles |
| H1 Medium    | 40px      | 300    | 1.29        | Section titles |
| H1 Small     | 32px      | 300    | 1.33        | Subsection headings |
| Body         | 16px      | 400    | 1.00        | Paragraphs |
| Link         | 16px      | 500    | 1.50        | Navigation links |
| Caption      | 14px      | 300    | 1.43        | Small text |
| Button Text  | 14px      | 500    | 1.50        | CTA labels |

## Spacing & Grid
Base: 8px grid.
Scale: 2px, 4px, 8px, 12px, 16px, 24px, 48px, 64px.

## Border Radius
- none: 0px — tables, icons
- sm: 2px — inputs, small controls
- md: 4px — buttons, cards
- lg: 8px — larger cards
- xl: 24px — promotional containers
- pill: 48px — CTAs
- full: 100px — search bars, round buttons

## Shadows & Depth
- shadow-md: rgba(0,0,0,0.16) 0px 1px 4px, rgba(27,28,29,0.2) 0px 7px 29px

## Component Specifications

### Primary Button
Default: background #0a60ff, color #ffffff, padding 10px 20px, radius 48px, border 2px solid transparent, font-weight 500, font-size 16px.
Hover: background #ffffff, color #1883fd, border 2px solid var(--muse-border-accent-lighter).
Active: background #2c6415, color #ffffff, box-shadow 0 0 0 2px var(--muse-border-emphasis), outline 2px solid #101010.
Focus: background #1eaedb, color #ffffff, outline 1px solid #000000.

### Secondary Button
Default: transparent background, color #0a60ff, padding 8px 20px, radius 48px, border 1px solid #0a60ff, font-weight 500, font-size 14px.

### Navigation Links
Default: color #ffffff or #07182d depending on context, no underline.
Hover: color #1883fd, no underline.

### Input Fields
Border: 1px solid #b9c1c9, radius 4px, padding 8px 16px.
Focus: border-color #0a60ff, outline none.

### Card
Background: #ffffff, radius 8px or 24px, padding 24px, shadow var(--shadow-md).

## Layout & Responsive Rules
Breakpoints: 600px, 768px, 1024px, 1280px, 1440px, 1920px.

## Interaction Rules
Transition: 150ms ease for hover/focus.
Focus indicators: 1px or 2px solid outlines in brand colors.

## DO List
- Use ONLY colors from palette.
- Maintain 8px grid spacing.
- Keep headings light weight (300) for visual airiness.
- Use pill radius for CTAs.
- Match hover states exactly.

## DON'T List
- No custom blues or grays.
- Don’t use underlines for links.
- Avoid mixing magenta with primary blue.
- No inconsistent corner radii.

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #0a60ff;
  color: #ffffff;
  padding: 10px 20px;
  border-radius: 48px;
  font-weight: 500;
  font-size: 16px;
  border: 2px solid transparent;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #ffffff;
  color: #1883fd;
  border-color: var(--muse-border-accent-lighter);
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: rgba(0,0,0,0.16) 0px 1px 4px, rgba(27,28,29,0.2) 0px 7px 29px;
}
```

### Input
```css
.input {
  border: 1px solid #b9c1c9;
  border-radius: 4px;
  padding: 8px 16px;
}
.input:focus {
  border-color: #0a60ff;
  outline: none;
}
```

9. Summary

TL;DR: Cisco’s design system is built like their infrastructure—precise, consistent, and engineered to scale. Blue is the hero, spacing is disciplined, and typography is light but legible.

Brand Keywords:

• enterprise-precision
• tech-trust
• grid-disciplined
• blue-forward