Cisco DESIGN.md

Infrastructure-led enterprise brand with bright network blue, dark technical gradients, and mobile-first content discipline. Cisco’s current web presence balances futuristic AI-era storytelling with practical, readable, conversion-focused layouts.

1. Visual Theme & Atmosphere

Overall Aesthetic

Cisco’s design language feels like global infrastructure made legible. The brand uses luminous blues, dark signal-rich imagery, and concise utility-driven content blocks to make highly technical subject matter feel approachable and high-value. The visual system is polished, but it stays grounded in clarity and business utility.

Mood & Feeling

• Technically confident: expert, stable, and built for large-scale systems
• Future-facing: modern AI and networking visuals without gimmicks
• Action-oriented: CTAs and pathways are clear and purposeful
• Mobile-aware: layouts and content rules assume responsive delivery from the start
• Readable under complexity: advanced concepts are simplified through structure

Design Density

Medium density. Cisco surfaces can carry substantial messaging and multiple pathways, but they avoid crowding through large visual modules, generous line spacing, and disciplined responsive behavior.

Visual Character

• Bright Cisco blue and cyan accents over white and deep navy
• Rounded CTAs paired with modular cards and hero sections
• Technical imagery featuring networks, silicon, grids, and illuminated systems
• Strong use of dark-on-light section alternation for rhythm
• Business copy remains concise and goal-driven
• Links and interactive text are expected to read clearly as blue

2. Color Palette & Roles

Core Brand Colors

Neutral Foundation

Semantic and Highlight Colors

Color Usage Rules

• Blue should always feel clearly interactive or clearly branded.
• Deep navy is ideal for immersive technology storytelling sections.
• Light gray surfaces should simplify dense content, not decorate it.
• Avoid using too many accent colors in the same module; Cisco reads best when blue leads.

3. Typography Rules

Font Stack

css/* Cisco web UI */
--font-sans: 'CiscoSansTT', 'Helvetica Neue', Arial, sans-serif;
--font-display: 'CiscoSansTT', 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'SF Mono', 'Roboto Mono', Menlo, monospace;

Type Scale

Typography Philosophy

Cisco typography is clear, modern, and enterprise-readable. It should support technical storytelling at scale without becoming visually stiff. Large headings can be ambitious, but supporting text must stay direct and easy to parse.

Practical Rules

• Keep headlines concise and outcome-oriented.
• Use blue link styling consistently so interaction remains obvious.
• Prefer readable copy widths and short CTA labels.
• Avoid decorative font experiments; the strength comes from scale, not novelty.

4. Component Stylings

Buttons

Primary Button

css.button-primary {
  background: #049FD9;
  color: #FFFFFF;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 999px;
  font: 600 14px/1 'CiscoSansTT', 'Helvetica Neue', Arial, sans-serif;
  transition: background 140ms ease, transform 140ms ease;
}

.button-primary:hover {
  background: #0B5CAB;
}

.button-primary:active {
  transform: translateY(1px);
}

.button-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(4, 159, 217, 0.2);
}

Ghost Button

css.button-ghost {
  background: transparent;
  color: #049FD9;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #049FD9;
  border-radius: 999px;
  font-weight: 600;
}

.button-ghost:hover {
  background: rgba(4, 159, 217, 0.08);
}

Text CTA

css.button-text {
  background: transparent;
  color: #049FD9;
  min-height: 32px;
  padding: 0;
  border: none;
  font-weight: 600;
}

.button-text:hover {
  color: #0B5CAB;
  text-decoration: underline;
}

Inputs

Text Input

css.input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  background: #FFFFFF;
  color: #16202A;
  border: 1px solid #E6ECF2;
  border-radius: 12px;
  font: 400 16px/1.2 'CiscoSansTT', 'Helvetica Neue', Arial, sans-serif;
}

.input:focus {
  outline: none;
  border-color: #049FD9;
  box-shadow: 0 0 0 3px rgba(4, 159, 217, 0.16);
}

.input::placeholder {
  color: #6B7785;
}

Form Label

css.input-label {
  display: block;
  margin-bottom: 8px;
  color: #16202A;
  font: 600 14px/1.3 'CiscoSansTT', 'Helvetica Neue', Arial, sans-serif;
}

.input-helper {
  margin-top: 8px;
  color: #6B7785;
  font: 400 12px/1.4 'CiscoSansTT', 'Helvetica Neue', Arial, sans-serif;
}

Cards and Content Blocks

Mosaic Card

css.card {
  background: #FFFFFF;
  border: 1px solid #E6ECF2;
  border-radius: 20px;
  overflow: hidden;
}

.card-body {
  padding: 24px;
}

Dark Feature Card

css.card-dark {
  background: linear-gradient(180deg, #0F1F33 0%, #07111F 100%);
  color: #FFFFFF;
  border-radius: 24px;
  padding: 32px;
}

Insight Tile

css.tile {
  background: #F5F7FA;
  border-radius: 16px;
  padding: 20px;
}

5. Layout Principles

Responsive Breakpoints

Cisco’s digital guidelines explicitly require a mobile-first responsive grid.

Spacing Scale

Layout Rules

• Design mobile first, then scale up.
• Keep headline, description, and CTA copy tightly constrained.
• Use modular hero and mosaic sections to simplify complex stories.
• Keep pages light, fast, and easy to scan despite technical subject matter.

6. Depth & Elevation

Surface Hierarchy

Shadow System

Cisco depth is subtle. It supports modular cards, but the brand relies more on color contrast and image drama than on strong shadows.

css.shadow-soft {
  box-shadow: 0 8px 20px rgba(15, 31, 51, 0.08);
}

.shadow-immersive {
  box-shadow: 0 16px 40px rgba(7, 17, 31, 0.18);
}

Depth Rules

• Use shadow gently on white cards.
• Let dark gradients and vivid imagery create the premium feel.
• Avoid crowded layers; Cisco interfaces should feel light and straightforward.

7. Do's and Don'ts

Do

• Keep actions clear, focused, and visibly clickable.
• Use blue consistently for links and key actions.
• Design mobile first and maintain readability on smaller screens.
• Use technical imagery and dark gradients selectively for impact.
• Break complex concepts into modular content sections.

Don't

• Hide actions behind ambiguous styling.
• Overload a module with too many accent colors.
• Let hero copy or CTA counts become verbose.
• Build dense pages that feel heavy on mobile.
• Use mystery navigation or overly clever interaction patterns.

8. Responsive Behavior

Responsive Rules

• Assume all major content patterns must work from 320px upward.
• Hide or shorten secondary descriptions on smaller hero formats when needed.
• Keep touch targets generous for CTA-heavy pages.
• Let cards stack earlier rather than shrinking unreadably.
• Use concise copy and image-safe text treatments because responsive cropping is expected.

Mobile Character

Cisco mobile experiences should feel intentional, not compressed. The structure, CTA clarity, and brand blue interactivity all need to remain obvious on narrow screens and limited bandwidth connections.

9. Agent Prompt Guide

Quick Reference

• Mood: technical, future-facing, business-clear, mobile-aware
• Primary color: Cisco blue #049FD9
• Dark surface: navy #0F1F33
• Typography: CiscoSansTT / neutral enterprise sans
• Layout: modular hero + card system, mobile-first
• Components: pill CTAs, white cards, dark feature blocks, readable technical copy

Prompt Snippet

textDesign this interface in the style of Cisco's current web presence. Use bright Cisco blue (#049FD9) for primary actions and links, deep navy gradients for immersive technology sections, crisp enterprise sans typography, rounded CTA buttons, and modular content cards. The result should feel global-enterprise, AI-era, and highly readable, with mobile-first structure and clear action hierarchy.