Cisco
Identity
Backend & Data
Bundled OpenDesign package for Cisco, derived from curated DESIGN.md, tokens.css, and components.html fixtures.
Typography
Ag
Ag
Ag
--text-4xl · 72pxThe quick brown fox--text-3xl · 56pxThe quick brown fox--text-2xl · 32pxThe quick brown fox--text-xl · 24pxThe quick brown fox--text-lg · 18pxThe quick brown fox--text-base · 16pxThe quick brown fox--text-sm · 14pxThe quick brown fox--text-xs · 12pxThe quick brown foxPalette
#0f1720Page background — defines the brand canvas.#1b2530Card / lifted container background.#243447Tertiary surface tier (kami warm-sand).#ffffffPrimary text color.#e8ebf1Secondary text tier (kami dark-warm).#9e9ea2Subtext / captions.#64bbe3Tertiary FG / metadata tier (kami stone).#58585bDefault border / card edge.rgba(232, 235, 241, 0.14)Inner row separator that should not visually compete.#049fd9Brand accent. ≤2 visible uses per screen (lint enforced).#001923FG when --accent is the bg.#6cc04aSuccess state.#ffcc00Warning state.#cf2030Danger state.Also named in DESIGN.md
#005073Filled primary CTA, dense accent, deeper data emphasis.#2b5592Secondary brand accent for graphics, charts, and layered blue compositions.#39393bMid-dark container surface, panel base, dense modules.#abc233Positive outcome or infrastructure-health accent.Imagery & layout
Radius
12px20px28px9999pxSpacing
--space-1 · 4px--space-2 · 8px--space-3 · 12px--space-4 · 16px--space-5 · 20px--space-6 · 24px--space-8 · 32px--space-12 · 48pxElevation
--elev-raisedLayout
Layout rules
- 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
- Alternate expansive hero/outcome sections with denser information bands