Meraki Design System Deep Dive

1. Brand Overview

Meraki, under Cisco’s umbrella, has an interesting design philosophy — it’s enterprise tech, but it doesn’t look like enterprise tech from ten years ago. The site feels modern, approachable, and clean, but still carries that corporate confidence. This isn’t a playful consumer brand; it’s aimed at IT professionals, network admins, and decision-makers in organizations who expect precision but welcome clarity.

The vibe: controlled minimalism with bursts of warmth. Instead of drowning the user in gradients and over-the-top visuals, Meraki’s site uses strong typography and disciplined spacing. Color is used with intent — mostly neutrals, with a single punchy orange (#e9662e) for calls-to-action. That orange is not just decoration; it’s the “do something” color. You’ll see it in buttons, link highlights, and interactive prompts.

The design system is built for scale. It’s clearly responsive-first — the breakpoints cover a huge range, from sub-100px to massive 3400px screens. This suggests the site is optimized for every device from mobile to ultra-wide displays in conference rooms.

Typography tells another story: multiple weights, sizes, and families, all mapped to specific contexts. Sharp Sans dominates headings, Inter fills in body and UI text, and there’s still some CiscoSansTT legacy in certain components — a hint at the brand’s evolution.

Meraki’s design language is confident, but not flashy. Rounded pill buttons (32px radius) soften the tone, while thin borders and occasional shadows give structure without clutter. This is the kind of system that works well in high-density dashboards but still feels readable in marketing contexts.

If you’re designing for Meraki, think: clarity over decoration, structured layouts, and color only where it drives an action. The philosophy is “functional elegance” — the UI should look good but never get in the way of understanding the product.

2. Color System

2.1 Primary Colors

The primary brand color is Orange (#e9662e — RGB 233,102,46). It’s warm, confident, and slightly unconventional for enterprise tech, which often leans blue. This choice sets Meraki apart from competitors like Aruba (yellow) or Juniper (blue). Orange conveys energy and action — perfect for CTAs like “Start Trial” or “Learn More.”

The secondary color is actually the same orange (#e9662e), reinforcing the idea that orange is the hero. No separate secondary brand color — this is a single-color brand accent strategy.

Orange here isn’t a soft pastel; it’s vivid enough to stand out against white (#ffffff) and dark grey tones. It works well because the rest of the palette is restrained — mostly neutrals, a few accent blues and greens.

2.2 Complete Palette

2.3 Color Relationships

• Contrast: Orange (#e9662e) on white is high enough for WCAG AA in large text, borderline for small text — better to use bold weights for small CTA labels.
• Accessibility: The dark greys (#555555, #636363, #404241) provide strong contrast on white backgrounds. Blue (#5576d1) is readable against white but could fail against light grey backgrounds — needs testing for AA compliance.
• Dark Mode: No explicit dark mode palette here. Most colors are tuned for light backgrounds. If adapting, deep green (#025546) and burnt orange (#b54718) could work as accents on dark.

2.4 Usage Guide

Works well together:

• White (#ffffff) + Orange (#e9662e) — high energy CTA.
• Dark Grey (#636363) + Light Grey (#f2f2f2) — subtle text sections.
• Deep Green (#025546) + White — strong, trust-building CTA.

Avoid:

• Orange (#e9662e) on Light Grey (#f2f2f2) — low contrast.
• Blue (#5576d1) on Orange — clash, kills readability.
• Burnt Orange (#b54718) next to Primary Orange (#e9662e) — too close in tone, looks like a mistake.

3. Typography

3.1 Font Families

• Sharp Sans (Semi Bold, Bold) — Headings, large UI labels.
• Inter (Regular, Medium, Bold, Semi Bold) — Body text, links, buttons.
• CiscoSansTT — Legacy, appears in captions/buttons.
• Fallbacks: Arial in CiscoSansTT contexts.
• No Google Fonts or Adobe Fonts declared — likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

They use size jumps of roughly 1.25x between heading levels. Sharp Sans gives headings a distinct, geometric look — perfect for tech branding. Inter handles all the utilitarian text — clean, neutral, works at small sizes.

Hierarchy is clear: giant hero titles at 72px, then a strong drop to 48px for secondary sections, down to 32px for tertiary headings. Body text at 16px is readable, captions at 14px keep density high without sacrificing legibility.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px — but they use odd values too (13px, 27px). This suggests fine-tuning for visual alignment.

4.2 Layout

Breakpoints are exhaustive — they cover nearly every device width you can imagine: mobile (320px), tablet (~768px), desktop (~1024px), and huge displays (2000px+). This is a flexible grid, likely Bootstrap’s container + row + col system combined with Vuetify components.

5. Visual Elements

Border Radius

They’re not shy about rounded corners:

• 32px — pill buttons, primary CTAs.
• 25px — modals, images.
• 10px — cards.
• 6px — links.
• 2px — small inputs/buttons.
• Mixed radii (e.g., 0px 12px 12px 0px) for asymmetrical shapes.

Shadows

Used sparingly:

• rgba(0,0,0,0.15) 0px 6px 12px — subtle lift.
• rgba(0,0,0,0.2) 0px 0px 18px — stronger depth.
• Often replaced by borders in flat sections.

Borders

Thin, mostly 1px or 2px. Orange borders for primary buttons, blue borders for links, greys for dividers.

6. Components

6.1 Buttons

Primary Green Button (.btn-primary-green):

• Default: bg #025546, white text, 32px radius, 2px border same green.
• Hover: white bg, orange border, blue text.
• Active: dark green bg, white text, subtle box-shadow.
• Focus: bg blue (rgb(30,174,219)), white text, outline black.

Outline Orange Button:

• Default: transparent bg, orange text/border.
• Same hover/focus/active patterns as above.

Solid Orange Button:

• Default: orange bg/border, white text.
• Hover: white bg, orange border, blue text.

White Button:

• Default: white bg/border, green text.
• Same hover/focus/active as others.

6.2 Links

Colors vary by context:

• White links in dark sections.
• Grey links (#636363) in light areas.
• Orange links for CTAs.
• Blue links (#5576d1) for quicklinks. Hover: almost always blue (#1883fd) — consistent interactive signal.

6.3 Forms

No detailed input styles extracted — likely minimal borders, consistent with 2px radius and grey tones.

6.4 Cards

Cards have 10px radius, light grey backgrounds, occasional subtle shadow. Padding ~24px.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-dark-grey: #636363;
  --color-burnt-orange: #b54718;
  --color-black: #000000;
  --color-medium-grey: #898b8e;
  --color-orange-primary: #e9662e;
  --color-charcoal: #404241;
  --color-mid-grey: #555555;
  --color-blue-accent: #5576d1;
  --color-light-grey: #f2f2f2;
  --color-deep-green: #025546;

  /* Typography */
  --font-sharp-sans: "Sharp Sans", "Inter Regular", sans-serif;
  --font-inter: "Inter", sans-serif;
  --font-ciscosanstt: "CiscoSansTT", Arial, sans-serif;

  /* Spacing (px) */
  --space-1: 1px;
  --space-2: 2px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-16: 16px;
  --space-22: 22px;
  --space-24: 24px;
  --space-30: 30px;
  --space-40: 40px;
  --space-60: 60px;
  --space-120: 120px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 25px;
  --radius-pill: 32px;

  /* Shadows */
  --shadow-sm: rgba(0,0,0,0.15) 0px 6px 12px 0px;
  --shadow-md: rgba(0,0,0,0.2) 0px 0px 18px 0px;
}

8. AI Coding Assistant Prompt

# Meraki Design System Specification

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

## Brand Context
Meraki’s design language is functional elegance. Minimal decoration, clear hierarchy, and color only where it drives action. Rounded corners soften the corporate tone, while bold typography keeps it confident.

## Color Palette
- Primary Orange: #e9662e — CTAs, buttons, key actions
- Burnt Orange: #b54718 — Secondary CTAs
- White: #ffffff — Backgrounds, text on dark
- Dark Grey: #636363 — Body text
- Medium Grey: #898b8e — Headers, nav bars
- Charcoal: #404241 — Neutral UI backgrounds
- Mid Grey: #555555 — UI controls, icons
- Blue Accent: #5576d1 — Quicklinks
- Light Grey: #f2f2f2 — Surfaces, header backgrounds
- Deep Green: #025546 — Primary-green buttons
- Black: #000000 — Headlines, outlines

## Typography
- Headings: "Sharp Sans", sans-serif
- Body: "Inter", sans-serif
- Legacy: "CiscoSansTT", Arial

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1    | 72px | 600    | 1.00        | Hero titles |
| H2    | 48px | 700    | 1.08        | Section titles |
| H3    | 32px | 700    | 1.25        | Smaller headings |
| Body  | 16px | 400    | 1.50        | Paragraphs |
| Caption | 14px | 400  | 1.21        | Labels |

## Spacing & Grid
Base: 8px grid.
Scale: 1px, 2px, 6px, 8px, 10px, 12px, 13px, 16px, 22px, 24px, 30px, 40px, 60px, 120px.
Map: 
- Buttons: 10px vertical, ~20px horizontal
- Cards: 24px padding
- Sections: 40px or 60px

## Border Radius
- None: 0px — tables
- Sm: 2px — small inputs
- Md: 6px — links
- Lg: 10px — cards
- Xl: 25px — modals
- Pill: 32px — buttons

## Shadows & Depth
- Small: rgba(0,0,0,0.15) 0px 6px 12px
- Medium: rgba(0,0,0,0.2) 0px 0px 18px

## Components

### Primary Green Button
Default: bg #025546, white text, 32px radius, border 2px solid #025546.
Hover: white bg, border 1px solid #e9662e, text #1883fd.
Active: bg rgb(44,100,21), white text.
Focus: bg #1eaedb, white text, border 1px solid black.

### Outline Orange Button
Default: transparent bg, orange text/border.
Hover: white bg, orange border, blue text.

### Solid Orange Button
Default: orange bg/border, white text.
Hover: white bg, orange border, blue text.

### White Button
Default: white bg/border, green text.
Hover: white bg, orange border, blue text.

### Navigation Links
Default: context color (white, grey, orange, blue).
Hover: always blue.

### Inputs
Border: 1px solid grey, radius 2px.

### Cards
Bg: light grey, radius 10px, padding 24px.

## Layout & Responsive Rules
Breakpoints: 320px, 768px, 1024px, 1440px, up to 3400px.
Use Bootstrap grid containers.

## Interaction Rules
Transitions: 150ms ease for hover/focus changes.
Focus: solid outline, color per component state.

## DO
- Use only palette colors.
- Maintain 8px grid.
- Keep button radius at 32px.
- Use Sharp Sans for headings.
- Make hover states obvious.

## DON'T
- Invent new colors.
- Mix sharp and rounded corners in same component.
- Use shadows excessively.
- Put orange text on light grey backgrounds.

## Code Examples

Primary Button:
```css
.btn-primary-green {
  background: #025546;
  color: #ffffff;
  padding: 10px 21px;
  border-radius: 32px;
  border: 2px solid #025546;
  font-weight: 500;
  font-size: 14px;
}
.btn-primary-green:hover {
  background: #ffffff;
  border: 1px solid #e9662e;
  color: #1883fd;
}

Card:

.card {
  background: #f2f2f2;
  border-radius: 10px;
  padding: 24px;
}

Input:

.input {
  border: 1px solid #636363;
  border-radius: 2px;
  padding: 12px;
}

---

## 9. Summary

**TL;DR** — Meraki’s design system is restrained but confident. Minimal color palette anchored by a single bright orange, strong geometric typography, and generous rounded corners make it approachable without losing enterprise credibility.

**Brand Keywords**:
- functional-elegance
- warm-minimalist
- tech-confident
- grid-disciplined