vndangkhoa/open-design
1
0
Fork 0
mirror of https://github.com/nexu-io/open-design.git synced 2026-06-01 03:14:35 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Add Cisco and Webex design systems (#991)

Browse source 
* Add Cisco and Webex design systems

* Address review feedback for Cisco and Webex systems

---------

Co-authored-by: Rahul Jain <rajain5@cisco.com>
This commit is contained in:
Rahul Jain 2026-05-08 18:02:19 -07:00 committed by GitHub
parent 0b039777b9
commit 0d66643f33
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 427 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/web/src/i18n/content.fr.ts
View file

@ -387,6 +387,7 @@ export const FR_DESIGN_SYSTEM_IDS_WITH_EN_FALLBACK = [
'brutalism',
'cafe',
'canva',
'cisco',
'claymorphism',
'clean',
'colorful',
@ -444,6 +445,7 @@ export const FR_DESIGN_SYSTEM_IDS_WITH_EN_FALLBACK = [
'urdu',
'vibrant',
'vintage',
'webex',
] as const;
export const FR_PROMPT_TEMPLATE_CATEGORIES: Record<string, string> = {

2
apps/web/src/i18n/content.ru.ts
View file

@ -387,6 +387,7 @@ export const RU_DESIGN_SYSTEM_IDS_WITH_EN_FALLBACK = [
'brutalism',
'cafe',
'canva',
'cisco',
'claymorphism',
'clean',
'colorful',
@ -444,6 +445,7 @@ export const RU_DESIGN_SYSTEM_IDS_WITH_EN_FALLBACK = [
'urdu',
'vibrant',
'vintage',
'webex',
] as const;
export const RU_PROMPT_TEMPLATE_CATEGORIES: Record<string, string> = {

2
apps/web/src/i18n/content.ts
View file

@ -436,6 +436,7 @@ const DE_DESIGN_SYSTEM_IDS_WITH_EN_FALLBACK = [
'brutalism',
'cafe',
'canva',
'cisco',
'claymorphism',
'clean',
'colorful',
@ -493,6 +494,7 @@ const DE_DESIGN_SYSTEM_IDS_WITH_EN_FALLBACK = [
'urdu',
'vibrant',
'vintage',
'webex',
] as const;
const DE_PROMPT_TEMPLATE_CATEGORIES: Record<string, string> = {

20
design-systems/README.md
View file

@ -23,17 +23,20 @@ will read it as part of its system prompt.
- **57 design skills**, sourced from
[`bergside/awesome-design-skills`](https://github.com/bergside/awesome-design-skills)
and added directly as normalized 9-section `DESIGN.md` files.
- **70 product systems**, imported from
- **72 product systems**, including 70 imported from
[`VoltAgent/awesome-design-md`](https://github.com/VoltAgent/awesome-design-md)
(the [`getdesign@latest`](https://www.npmjs.com/package/getdesign) npm
package, MIT-licensed). One folder per brand:
package, MIT-licensed), plus two hand-authored additions (`cisco`,
`webex`). This table covers that imported product-system subset only; the
full bundled catalog is larger once you include the hand-authored starters
and the separate design-skill systems listed above. One folder per brand:
| Category | Systems |
|---|---|
| AI & LLM | claude · cohere · elevenlabs · minimax · mistral-ai · ollama · opencode-ai · replicate · runwayml · together-ai · voltagent · x-ai |
| Developer Tools | cursor · expo · lovable · raycast · superhuman · vercel · warp |
| Productivity & SaaS | cal · intercom · linear-app · mintlify · notion · resend · zapier |
| Backend & Data | clickhouse · composio · hashicorp · mongodb · posthog · sanity · sentry · supabase |
| Productivity & SaaS | cal · intercom · linear-app · mintlify · notion · resend · webex · zapier |
| Backend & Data | cisco · clickhouse · composio · hashicorp · mongodb · posthog · sanity · sentry · supabase |
| Design & Creative | airtable · clay · figma · framer · miro · webflow |
| Fintech & Crypto | binance · coinbase · kraken · mastercard · revolut · stripe · wise |
| E-Commerce & Retail | airbnb · meta · nike · shopify · starbucks |
@ -70,8 +73,8 @@ any new label and it lands at the bottom of the dropdown.
## Refreshing the bundled set
The 70 product systems are pulled from the upstream npm package. To re-sync
to the latest hashes:
The 70 imported product systems are pulled from the upstream npm package. To
re-sync to the latest hashes:
```bash
curl -sL $(npm view getdesign dist.tarball) -o /tmp/getdesign.tgz
@ -84,11 +87,14 @@ For now, the original importer lives at the top of the
## Attribution
The 70 product systems are sourced from
The 70 imported product systems are sourced from
[`VoltAgent/awesome-design-md`](https://github.com/VoltAgent/awesome-design-md)
(MIT, © VoltAgent contributors). They are aesthetic *inspirations* — none
of them are official assets of the brands they reference.
The `cisco/` and `webex/` systems are hand-authored additions based on the
current public Cisco and Webex / Momentum visual languages.
The `kami/` system adapts tokens, type rules, and the "ten invariants" from
[`tw93/kami`](https://github.com/tw93/kami) (MIT, © Tw93 and contributors),
a Claude skill for typesetting professional documents and slide decks.

201
design-systems/cisco/DESIGN.md Normal file
View file

@ -0,0 +1,201 @@
# Design System Inspired by Cisco
> Category: Backend & Data
> Enterprise infrastructure brand. Dark trust surfaces, Cisco Blue signal, technical clarity.
## 1. Visual Theme & Atmosphere
Cisco's current public web presence is enterprise infrastructure rendered with cinematic restraint. The canvas is dark but not pure black: layered navy-charcoal surfaces create depth without resorting to glossy startup gradients. Bright Cisco Blue is used as a precise signal color rather than a wash across the page. The overall impression is "serious global platform" rather than "friendly SaaS app" — large high-confidence headlines, quiet chrome, and product imagery that emphasizes scale, networking, observability, and resilience.
Typography is disciplined and corporate. Cisco's internal and presentation ecosystem points to `CiscoSansTT` as the preferred brand face, while the web experience remains compatible with modern grotesk fallbacks. Headings should feel concise and engineered. Body copy should read clearly and directly, not editorially. Geometrically, the system prefers soft pills for calls to action, rounded-but-not-playful cards, and glass-dark navigation shells floating over large atmospheric sections.
What makes Cisco distinct is the combination of **deep infrastructure darkness** with a **single electric trust signal**. Use blue for the moment that matters: primary action, focus, active tab, chart highlight, or key data edge. Let the rest of the interface stay disciplined.
**Key Characteristics:**
- Dark navy-charcoal surfaces instead of flat black
- Cisco Blue (`#049fd9`) as the primary signal color
- Restrained neutral system built from grays and pale technical whites
- Enterprise-scale headlines with compact, factual body copy
- Pill CTAs and rounded control shells, but never toy-like UI
- Product and platform imagery should suggest networks, telemetry, and systems at scale
- Motion should feel controlled and infrastructural, not playful
## 2. Color Palette & Roles
### Primary
- **Cisco Blue** (`#049fd9`): High-signal accent, outline CTA, active state, key link.
- **Status Blue** (`#64bbe3`): Focus halo, secondary emphasis, lightweight chart signal.
- **Cisco Indigo** (`#005073`): Filled primary CTA, dense accent, deeper data emphasis.
- **Dark Blue** (`#2b5592`): Secondary brand accent for graphics, charts, and layered blue compositions.
### Neutral / Surface
- **Dark Gray 1** (`#39393b`): Mid-dark container surface, panel base, dense modules.
- **Dark Gray 2** (`#58585b`): Borders, separators, secondary shells.
- **Medium Gray 2** (`#9e9ea2`): Muted labels and low-emphasis metadata.
- **Pale Gray 1** (`#e8ebf1`): Light text support, cool technical background tint, separators on dark.
- **Core White** (`#ffffff`): Primary inverse text, bright UI foreground, light surface content.
### Support
- **Sage Green** (`#abc233`): Positive outcome or infrastructure-health accent.
- **Status Green** (`#6cc04a`): Success state.
- **Status Yellow** (`#ffcc00`): Warning or caution state.
- **Status Orange** (`#ff7300`): Alert or escalation state.
- **Status Red** (`#cf2030`): Error or critical state.
### Recommended Surface Roles
- **Primary canvas**: a blue-black or charcoal blend built around `#0f1720` to `#1b2530` using the Cisco palette as anchor.
- **Elevated card**: Dark Gray 1 (`#39393b`) or a slightly bluer variant.
- **Border / outline**: Dark Gray 2 (`#58585b`) with subtle transparency when needed.
- **Primary text on dark**: Core White (`#ffffff`) or Pale Gray 1 (`#e8ebf1`).
## 3. Typography Rules
### Font Family
- **Primary**: `CiscoSansTT`, fallbacks: `Inter, Arial, Helvetica Neue, Helvetica, sans-serif`
- **Mono / Technical**: `IBM Plex Mono`, `SF Mono`, or `ui-monospace` if a code-supporting mono face is needed for metrics and IDs
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Hero Display | CiscoSansTT | 72px | 500 | 1.05 | -1.6px | Large launch/positioning headline |
| Section Display | CiscoSansTT | 56px | 500 | 1.08 | -1.1px | Major section statement |
| Heading | CiscoSansTT | 32px | 500 | 1.20 | -0.4px | Feature title, card header |
| Subheading | CiscoSansTT | 24px | 500 | 1.30 | -0.2px | Supporting header |
| Body | CiscoSansTT | 16px | 400 | 1.55 | normal | Default body copy |
| Body Small | CiscoSansTT | 14px | 400 | 1.50 | normal | Metadata, nav, helper text |
| Label / Eyebrow | CiscoSansTT | 12px | 700 | 1.30 | 0.24px | Tags, overlines, section labels |
| Button | CiscoSansTT | 16px | 500 | 1.20 | normal | CTA labels |
### Principles
- Keep display typography decisive and compressed, but not ultra-light or editorial.
- Body copy should be practical and highly legible, with no clever type effects.
- Use bold weight mainly for short labels, status tags, and compact emphasis.
- Favor one-family coherence over showy font mixing.
## 4. Component Stylings
### Buttons
**Primary Action Pill**
- Background: Cisco Indigo (`#005073`)
- Text: White (`#ffffff`)
- Radius: full pill
- Padding: generous horizontal padding, medium vertical height
- Hover: Dark Blue (`#2b5592`)
- Active: a darker indigo tone around `#00364d`
- Focus ring: 2px outer halo in Status Blue (`#64bbe3`) with a 1px white inner keyline on dark surfaces
- Use case: high-priority submit, deploy, or "learn more" action on dark Cisco surfaces
**Signal Outline Pill**
- Background: transparent
- Text: Cisco Blue (`#049fd9`) on dark surfaces, Cisco Indigo (`#005073`) on light surfaces
- Border: 1.5px Cisco Blue (`#049fd9`)
- Radius: full pill
- Hover: blue-tinted surface fill with the text color preserved
- Focus ring: same visible halo pairing as the primary button
- Use case: brand-forward secondary action that keeps Cisco Blue prominent without sacrificing contrast
**Secondary Dark Pill**
- Background: transparent or dark surface
- Text: White or Pale Gray 1
- Border: Dark Gray 2 (`#58585b`)
- Radius: full pill
- Purpose: low-noise secondary CTA
### Cards & Containers
- Background: layered dark surface based on `#39393b` or a cooler navy-charcoal adaptation
- Border: 1px subtle border using `#58585b`
- Radius: 16px to 20px
- Shadow: minimal; depth should come mostly from surface contrast and spacing
### Navigation
- Dark glass-like masthead or shell over a dark hero
- Text: White / Pale Gray 1
- Active state: Cisco Blue underline, chip, or glow
- Navigation should feel like product chrome, not marketing candy
### Data / Product Modules
- Charts and diagrams should use Cisco Blue as primary highlight and keep supporting colors minimal
- Use green/yellow/red only for actual operational meaning
- Dense technical blocks should still preserve breathing room and hierarchy
### Brand-Specific Recipes
**Network Telemetry Card**
- Anatomy: eyebrow label, large metric, delta chip, 12-24h sparkline, quiet footer metadata
- Density: compact but not cramped; 16px-24px padding with clear alignment to chart axes
- States: normal, selected, degraded, critical, loading skeleton
- Brand behavior: use Cisco Blue for the selected edge or sparkline, and semantic colors only for health state
**Topology / Product Diagram Module**
- Anatomy: title, system canvas, node chips, connection lines, side legend
- Visual rule: dark field first, blue path highlight second, all other nodes muted until active
- States: idle overview, hovered path, selected node, degraded route
**Dense Control Panel**
- Anatomy: left nav rail, filter bar, split metric region, log/event table, contextual right rail
- Control sizing: compact 36px inputs are acceptable on desktop, but action buttons remain 44px minimum height
- States: quiet default, blue active filter, clear warning/error escalation
## 5. Layout Principles
### Spacing & Grid
- Base rhythm: 8px
- Common scale: 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px
- Prefer wide desktop containers and large sectional spacing
- 12-column desktop layout with generous gutters works well for the brand
- Breakpoints: mobile up to 767px, tablet 768px-1199px, desktop 1200px and above
### Composition
- Alternate expansive hero/outcome sections with denser information bands
- Use asymmetry where it serves product imagery or system diagrams
- Large dark fields with one blue focal point are more on-brand than many small colorful fragments
- On tablet, reduce wide split layouts to 2-column modules and keep telemetry cards in pairs
- On mobile, collapse hero side-by-sides to a single column, stack data panels vertically, and convert dense control rows into progressive disclosure panels
- Navigation should collapse from a full masthead to a compact menu button plus one primary CTA on tablet/mobile
### Accessibility & Responsiveness
- Minimum touch target: 44px by 44px for any tappable control
- Keyboard focus must remain visible on every interactive element via the blue outer halo plus white inner keyline pairing
- Do not rely on hover-only disclosure; show essential state and actions on focus and touch
- Preserve readable line lengths on desktop and avoid more than 3 cards per row on tablet or 1 card per row on small phones
## 6. Motion & Interaction
- Motion should be controlled, smooth, and systems-like
- Use fade, rise, subtle slide, and restrained glow
- Interaction timing: roughly 160ms–260ms for control response, 320ms–500ms for larger section reveals
- Avoid bouncy springs, elastic easing, or playful overshoot
- Respect `prefers-reduced-motion`: remove parallax and staged reveals, keep only instant state swaps or short opacity transitions under 120ms
## 7. Voice & Brand
- Voice is confident, technical, and outcome-oriented
- Headlines should sound like platform positioning or systems value, not consumer lifestyle copy
- Use language that suggests trust, resilience, infrastructure, AI readiness, and operational scale
- The brand should feel global, mission-critical, and composed under pressure
## 8. Anti-patterns
- Do not turn Cisco into a generic gradient startup site
- Do not flood the page with many equally loud accent colors
- Do not use pastel palettes or lifestyle-illustration aesthetics
- Do not use overly rounded, bubbly controls
- Do not rely on pure black alone; use layered charcoals and deep blue-blacks instead
- Do not make body copy feel whimsical, editorial, or ironic
## 9. Agent Prompt Guide
### Quick Color Reference
- Primary signal: Cisco Blue (`#049fd9`)
- Hover / secondary signal: Status Blue (`#64bbe3`)
- Deep accent: Cisco Indigo (`#005073`)
- Mid-dark surface: Dark Gray 1 (`#39393b`)
- Border: Dark Gray 2 (`#58585b`)
- Inverse text: White (`#ffffff`) or Pale Gray 1 (`#e8ebf1`)
### Example Component Prompts
- "Create a Cisco-style dark enterprise landing page with layered navy-charcoal surfaces, a bright Cisco Blue primary CTA, and a 72px high-confidence hero headline."
- "Design a technical dashboard card on a dark surface with a subtle gray border, white text, and Cisco Blue chart highlights."
- "Build a dark glass navigation bar with restrained white labels and one Cisco Blue active indicator."

207
design-systems/webex/DESIGN.md Normal file
View file

@ -0,0 +1,207 @@
# 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
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|------|------|------|--------|-------------|----------------|-------|
| Hero Display | Momentum | 64px | 500 | 1.10 | -1px | Marketing hero headline |
| Section Display | Momentum | 40px | 500 | 1.20 | -0.5px | Section lead |
| Heading | Momentum | 24px | 500 | 1.33 | normal | Card title, feature title |
| Body | Momentum | 16px | 400 | 1.50 | normal | Default product/marketing body |
| Body Small | Momentum | 14px | 400 | 1.43 | normal | Metadata, nav, helper text |
| Label | Momentum | 12px | 500 | 1.33 | normal | Chips, tags, presence labels |
| Button | Momentum | 16px | 500 | 1.25 | normal | CTA label |
### 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."