Miro Design System

---

version: alpha

name: Miro-design-analysis

description: Miro presents itself as the AI-powered visual workspace through a confident, almost playful brand voice — anchored by its signature canary yellow ({colors.brand-yellow}) wordmark over white canvas, broken open by colorful pastel feature tints (rose, teal, coral, orange, mint) that echo the actual sticky-note color palette used on the live whiteboard. Black-pill primary buttons dominate marketing, real Miro-board mockups serve as feature illustrations, and a 4-tier pricing grid leads into a dense comparison table. Roobert PRO carries display headlines; the system supports homepage, pricing, AI Workflows product page, agile vertical, and customer stories surfaces.

colors:

primary: "#1c1c1e"

on-primary: "#ffffff"

brand-yellow: "#ffd02f"

brand-yellow-deep: "#fcb900"

yellow-light: "#fff4c4"

yellow-dark: "#746019"

brand-blue: "#4262ff"

blue-450: "#5b76fe"

blue-pressed: "#2a41b6"

brand-coral: "#ff9999"

coral-light: "#ffc6c6"

coral-dark: "#600000"

brand-rose: "#ffd8f4"

rose-light: "#fde0f0"

brand-pink: "#fde0f0"

brand-teal: "#0fbcb0"

teal-light: "#c3faf5"

moss-dark: "#187574"

brand-orange-light: "#ffe6cd"

brand-red: "#fbd4d4"

brand-red-dark: "#e3c5c5"

success-accent: "#00b473"

canvas: "#ffffff"

surface: "#f7f8fa"

surface-soft: "#fafbfc"

surface-yellow: "#fff8e0"

surface-pricing-featured: "#f5f3ff"

hairline: "#e0e2e8"

hairline-soft: "#eef0f3"

hairline-strong: "#c7cad5"

ink-deep: "#050038"

ink: "#1c1c1e"

charcoal: "#2c2c34"

slate: "#555a6a"

steel: "#6b6f7e"

stone: "#8e91a0"

muted: "#a5a8b5"

on-dark: "#ffffff"

on-dark-muted: "#a5a8b5"

footer-bg: "#1c1c1e"

typography:

hero-display:

fontFamily: Roobert PRO

fontSize: 80px

fontWeight: 500

lineHeight: 1.05

letterSpacing: -2px

display-lg:

fontFamily: Roobert PRO

fontSize: 60px

fontWeight: 500

lineHeight: 1.10

letterSpacing: -1.5px

heading-1:

fontFamily: Roobert PRO

fontSize: 48px

fontWeight: 500

lineHeight: 1.15

letterSpacing: -1px

heading-2:

fontFamily: Roobert PRO

fontSize: 36px

fontWeight: 500

lineHeight: 1.20

letterSpacing: -0.5px

heading-3:

fontFamily: Roobert PRO

fontSize: 28px

fontWeight: 500

lineHeight: 1.25

heading-4:

fontFamily: Roobert PRO

fontSize: 22px

fontWeight: 500

lineHeight: 1.30

heading-5:

fontFamily: Roobert PRO

fontSize: 18px

fontWeight: 500

lineHeight: 1.40

subtitle:

fontFamily: Roobert PRO

fontSize: 18px

fontWeight: 400

lineHeight: 1.50

body-md:

fontFamily: Roobert PRO

fontSize: 16px

fontWeight: 400

lineHeight: 1.50

body-md-medium:

fontFamily: Roobert PRO

fontSize: 16px

fontWeight: 500

lineHeight: 1.50

body-sm:

fontFamily: Roobert PRO

fontSize: 14px

fontWeight: 400

lineHeight: 1.50

body-sm-medium:

fontFamily: Roobert PRO

fontSize: 14px

fontWeight: 500

lineHeight: 1.50

caption:

fontFamily: Roobert PRO

fontSize: 13px

fontWeight: 400

lineHeight: 1.40

caption-bold:

fontFamily: Roobert PRO

fontSize: 13px

fontWeight: 600

lineHeight: 1.40

micro:

fontFamily: Roobert PRO

fontSize: 12px

fontWeight: 500

lineHeight: 1.40

micro-uppercase:

fontFamily: Roobert PRO

fontSize: 11px

fontWeight: 600

lineHeight: 1.40

letterSpacing: 0.5px

button-md:

fontFamily: Roobert PRO

fontSize: 14px

fontWeight: 500

lineHeight: 1.30

stat-display:

fontFamily: Roobert PRO

fontSize: 64px

fontWeight: 500

lineHeight: 1.10

letterSpacing: -1.5px

rounded:

xs: 4px

sm: 6px

md: 8px

lg: 12px

xl: 16px

xxl: 20px

xxxl: 28px

feature: 32px

full: 9999px

spacing:

xxs: 4px

xs: 8px

sm: 12px

md: 16px

lg: 20px

xl: 24px

xxl: 32px

xxxl: 40px

section-sm: 48px

section: 64px

section-lg: 96px

hero: 120px

components:

button-primary:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

padding: "12px 24px"

button-primary-pressed:

backgroundColor: "{colors.charcoal}"

textColor: "{colors.on-primary}"

button-primary-disabled:

backgroundColor: "{colors.hairline}"

textColor: "{colors.muted}"

button-yellow:

backgroundColor: "{colors.brand-yellow}"

textColor: "{colors.primary}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

padding: "12px 24px"

button-blue:

backgroundColor: "{colors.brand-blue}"

textColor: "{colors.on-primary}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

padding: "12px 24px"

button-secondary:

backgroundColor: "transparent"

textColor: "{colors.ink}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

padding: "12px 24px"

border: "1px solid {colors.hairline-strong}"

button-on-dark:

backgroundColor: "{colors.on-dark}"

textColor: "{colors.primary}"

typography: "{typography.button-md}"

rounded: "{rounded.full}"

padding: "12px 24px"

button-ghost:

backgroundColor: "transparent"

textColor: "{colors.ink}"

typography: "{typography.button-md}"

rounded: "{rounded.md}"

padding: "8px 12px"

button-link:

backgroundColor: "transparent"

textColor: "{colors.brand-blue}"

typography: "{typography.body-sm-medium}"

padding: "0"

button-icon-circular:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

rounded: "{rounded.full}"

size: 36px

border: "1px solid {colors.hairline}"

card-base:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.xl}"

padding: "{spacing.xl}"

border: "1px solid {colors.hairline-soft}"

card-feature:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.xxxl}"

padding: "{spacing.xxl}"

border: "1px solid {colors.hairline-soft}"

card-feature-yellow:

backgroundColor: "{colors.brand-yellow}"

textColor: "{colors.primary}"

rounded: "{rounded.xxxl}"

padding: "{spacing.xxl}"

card-feature-coral:

backgroundColor: "{colors.coral-light}"

textColor: "{colors.primary}"

rounded: "{rounded.xxxl}"

padding: "{spacing.xxl}"

card-feature-teal:

backgroundColor: "{colors.teal-light}"

textColor: "{colors.primary}"

rounded: "{rounded.xxxl}"

padding: "{spacing.xxl}"

card-feature-rose:

backgroundColor: "{colors.rose-light}"

textColor: "{colors.primary}"

rounded: "{rounded.xxxl}"

padding: "{spacing.xxl}"

card-customer-story:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.xxxl}"

padding: "0"

border: "1px solid {colors.hairline-soft}"

card-stat:

backgroundColor: "transparent"

textColor: "{colors.ink}"

typography: "{typography.stat-display}"

padding: "{spacing.lg}"

pricing-card:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.xl}"

padding: "{spacing.xxl}"

border: "1px solid {colors.hairline}"

pricing-card-featured:

backgroundColor: "{colors.surface-pricing-featured}"

rounded: "{rounded.xl}"

padding: "{spacing.xxl}"

border: "2px solid {colors.brand-blue}"

pricing-card-enterprise:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

rounded: "{rounded.xl}"

padding: "{spacing.xxl}"

text-input:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-md}"

rounded: "{rounded.md}"

padding: "{spacing.sm} {spacing.md}"

border: "1px solid {colors.hairline-strong}"

height: 44px

text-input-focused:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

border: "2px solid {colors.brand-blue}"

search-pill:

backgroundColor: "{colors.surface}"

textColor: "{colors.steel}"

typography: "{typography.body-sm}"

rounded: "{rounded.md}"

padding: "{spacing.xs} {spacing.md}"

height: 40px

border: "1px solid {colors.hairline}"

filter-dropdown:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-sm-medium}"

rounded: "{rounded.full}"

padding: "{spacing.xs} {spacing.md}"

border: "1px solid {colors.hairline-strong}"

pill-tab:

backgroundColor: "{colors.canvas}"

textColor: "{colors.steel}"

typography: "{typography.body-sm-medium}"

rounded: "{rounded.full}"

padding: "{spacing.xs} {spacing.md}"

border: "1px solid {colors.hairline}"

pill-tab-active:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

rounded: "{rounded.full}"

border: "1px solid {colors.primary}"

toggle-monthly-yearly:

backgroundColor: "{colors.surface}"

textColor: "{colors.ink}"

rounded: "{rounded.full}"

padding: "4px"

badge-promo:

backgroundColor: "{colors.brand-yellow}"

textColor: "{colors.primary}"

typography: "{typography.caption-bold}"

rounded: "{rounded.full}"

padding: "4px 10px"

badge-tag-yellow:

backgroundColor: "{colors.surface-yellow}"

textColor: "{colors.yellow-dark}"

typography: "{typography.caption-bold}"

rounded: "{rounded.full}"

padding: "4px 10px"

badge-tag-purple:

backgroundColor: "{colors.surface-pricing-featured}"

textColor: "{colors.brand-blue}"

typography: "{typography.caption-bold}"

rounded: "{rounded.full}"

padding: "4px 10px"

badge-tag-coral:

backgroundColor: "{colors.coral-light}"

textColor: "{colors.coral-dark}"

typography: "{typography.caption-bold}"

rounded: "{rounded.full}"

padding: "4px 10px"

badge-success:

backgroundColor: "{colors.success-accent}"

textColor: "{colors.on-primary}"

typography: "{typography.caption-bold}"

rounded: "{rounded.full}"

padding: "4px 10px"

badge-discount:

backgroundColor: "{colors.brand-yellow}"

textColor: "{colors.primary}"

typography: "{typography.caption-bold}"

rounded: "{rounded.sm}"

padding: "2px 6px"

promo-banner:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

typography: "{typography.body-sm-medium}"

padding: "{spacing.sm} {spacing.md}"

comparison-table:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.body-sm}"

rounded: "{rounded.md}"

border: "1px solid {colors.hairline}"

comparison-row:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

padding: "{spacing.md} {spacing.lg}"

border: "0 0 1px {colors.hairline-soft} solid"

template-card:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.xl}"

padding: "{spacing.md}"

border: "1px solid {colors.hairline}"

whiteboard-mockup:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.xl}"

padding: "0"

border: "1px solid {colors.hairline-soft}"

shadow: "rgba(5, 0, 56, 0.08) 0px 12px 32px -4px"

faq-accordion-item:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.md}"

padding: "{spacing.xl}"

border: "0 0 1px {colors.hairline} solid"

logo-wall-item:

backgroundColor: "transparent"

textColor: "{colors.steel}"

typography: "{typography.body-md-medium}"

padding: "{spacing.lg}"

hero-band-marketing:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.hero-display}"

rounded: "0"

padding: "{spacing.hero}"

cta-banner-dark:

backgroundColor: "{colors.primary}"

textColor: "{colors.on-primary}"

rounded: "{rounded.feature}"

padding: "{spacing.section}"

industry-tile:

backgroundColor: "{colors.canvas}"

rounded: "{rounded.xl}"

padding: "{spacing.xl}"

border: "1px solid {colors.hairline-soft}"

capterra-badge:

backgroundColor: "{colors.canvas}"

textColor: "{colors.ink}"

typography: "{typography.caption}"

rounded: "{rounded.md}"

padding: "{spacing.sm} {spacing.md}"

border: "1px solid {colors.hairline}"

footer-region:

backgroundColor: "{colors.footer-bg}"

textColor: "{colors.on-dark}"

typography: "{typography.body-sm}"

padding: "{spacing.section} {spacing.xxl}"

footer-link:

backgroundColor: "transparent"

textColor: "{colors.on-dark-muted}"

typography: "{typography.body-sm}"

padding: "{spacing.xxs} 0"

app-store-badge:

backgroundColor: "{colors.canvas}"

textColor: "{colors.primary}"

typography: "{typography.caption-bold}"

rounded: "{rounded.md}"

padding: "{spacing.sm} {spacing.md}"

---

Miro positions itself as the AI-powered visual workspace through a confident, slightly playful brand voice. The homepage opens with a stark white canvas anchored by a small canary-yellow Miro wordmark in the top-left, a black-pill primary CTA "Get started free" and a secondary "Book a demo" outline pill — then dramatic real-Miro-board mockup imagery (sticky notes, kanban, mind maps) carries the visual weight. Across deeper surfaces, the system breaks open: pastel feature cards (rose, teal, coral, yellow) echo the actual sticky-note color palette of the live whiteboard product, and customer story cards reuse those tints to differentiate brand vignettes.

Roobert PRO — Miro's custom display face — anchors every typographic surface, from the 80px hero display down to 11px micro labels. The face's slightly rounded, geometric character pairs naturally with the playful product photography and the friendly product positioning. Black-pill primary buttons (`{rounded.full}`) dominate marketing CTAs; the brand color, signature canary yellow ({colors.brand-yellow}), is reserved for the wordmark, top promo banners, and "yellow tag" feature pills — never as a primary CTA. The 4-tier pricing comparison (Free / Starter / Business / Enterprise) leads into the densest surface in the system: a feature comparison table that runs ~80 rows deep across multiple section dividers.

**Key Characteristics:**

> Source pages: miro.com/ (homepage), /pricing/ (4-tier comparison), /products/ai-workflows/ (AI product), /agile/ (vertical landing), /customers/ (story directory). Token coverage was identical across all five pages.

**Roobert PRO** (primary): Miro's custom geometric sans-serif typeface. Used across every UI surface from oversized 80px hero displays to 11px micro labels. The face has a slightly rounded, friendly character that matches the brand's playful product positioning. Fallbacks: Noto Sans, -apple-system, BlinkMacSystemFont, sans-serif.

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.hero-display}` | 80px | 500 | 1.05 | -2px | Marketing hero ("See how teams get great done with Miro") |

| `{typography.display-lg}` | 60px | 500 | 1.10 | -1.5px | Major section openers |

| `{typography.heading-1}` | 48px | 500 | 1.15 | -1px | Page-level headlines |

| `{typography.heading-2}` | 36px | 500 | 1.20 | -0.5px | Subsection headlines |

| `{typography.heading-3}` | 28px | 500 | 1.25 | 0 | Card titles |

| `{typography.heading-4}` | 22px | 500 | 1.30 | 0 | Feature tile titles |

| `{typography.heading-5}` | 18px | 500 | 1.40 | 0 | FAQ questions, smaller cards |

| `{typography.subtitle}` | 18px | 400 | 1.50 | 0 | Hero subtitle |

| `{typography.body-md}` | 16px | 400 | 1.50 | 0 | Primary body text |

| `{typography.body-md-medium}` | 16px | 500 | 1.50 | 0 | Logo wall labels |

| `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Secondary body, table cells |

| `{typography.body-sm-medium}` | 14px | 500 | 1.50 | 0 | Filter dropdowns, button labels |

| `{typography.caption}` | 13px | 400 | 1.40 | 0 | Helper text |

| `{typography.caption-bold}` | 13px | 600 | 1.40 | 0 | Badge labels, tag chips |

| `{typography.micro}` | 12px | 500 | 1.40 | 0 | Footer microcopy |

| `{typography.micro-uppercase}` | 11px | 600 | 1.40 | 0.5px | Section dividers in tables |

| `{typography.button-md}` | 14px | 500 | 1.30 | 0 | Pill button labels |

| `{typography.stat-display}` | 64px | 500 | 1.10 | -1.5px | "100M+ users" stat callouts |

Marketing surfaces give content generous breathing room — `{spacing.hero}` (120px) hero padding gives the small wordmark room to breathe. Pricing surfaces tighten dramatically.

The system runs predominantly flat with strategic depth on hero mockups.

| Level | Treatment | Use |

|---|---|---|

| 0 (flat) | No shadow; `{colors.hairline-soft}` border | Default cards, table rows, form inputs |

| 1 (subtle) | `rgba(5, 0, 56, 0.04) 0px 1px 2px 0px` | Subtle hover-elevated tiles |

| 2 (card) | `rgba(5, 0, 56, 0.06) 0px 4px 12px 0px` | Standard feature cards |

| 3 (mockup) | `rgba(5, 0, 56, 0.08) 0px 12px 32px -4px` | Hero whiteboard mockup framing |

| 4 (modal) | `rgba(5, 0, 56, 0.12) 0px 16px 48px -8px` | Modals, dropdowns |

| Token | Value | Use |

|---|---|---|

| `{rounded.xs}` | 4px | Small chips, micro-controls |

| `{rounded.sm}` | 6px | Discount badges |

| `{rounded.md}` | 8px | Inputs, search-pill |

| `{rounded.lg}` | 12px | Standard cards, table containers |

| `{rounded.xl}` | 16px | Pricing cards, feature panels |

| `{rounded.xxl}` | 20px | Larger feature cards |

| `{rounded.xxxl}` | 28px | Pastel feature cards (yellow, rose, coral, teal) |

| `{rounded.feature}` | 32px | Hero CTA banner cards |

| `{rounded.full}` | 9999px | All buttons, pill tabs, badges |

> Per the no-hover policy, hover states are NOT documented. Default and pressed/active states only.

**`button-primary`** — Black pill primary CTA, the dominant action ("Get started free").

**`button-yellow`** — Brand-yellow pill for moments of brand emphasis.

**`button-blue`** — Brand-blue pill for inline action callouts.

**`button-secondary`** — Outlined pill for secondary actions ("Book a demo").

**`button-on-dark`** — White pill for dark CTA banners.

**`button-ghost`** — Quieter rectangular ghost button.

**`button-link`** — Inline text link.

**`button-icon-circular`** — 36×36px circular utility button.

**`card-base`** — Standard content card.

**`card-feature`** — White feature card with larger 28px corners.

**`card-feature-yellow`** — Pastel-yellow feature card.

**`card-feature-coral`** — Pastel-coral feature card variant.

**`card-feature-teal`** — Pastel-teal feature card variant.

**`card-feature-rose`** — Pastel-rose feature card variant.

**`card-customer-story`** — Customer story card.

**`card-stat`** — Stat-row cell for "100M+ users".

**`pricing-card`** — Standard pricing tier card.

**`pricing-card-featured`** — Featured pricing tier (Business — lavender background + blue border).

**`pricing-card-enterprise`** — Dark-canvas enterprise tier card.

**`text-input`** — Standard text field.

**`text-input-focused`** — Activated state.

**`search-pill`** — Search bar.

**`filter-dropdown`** — Pill-shaped filter dropdown ("Company use" / "Industry" / "Use case").

**`pill-tab`** + **`pill-tab-active`** — Pill-style tab nav.

**`toggle-monthly-yearly`** — Two-state pill toggle (Monthly / Annual on pricing).

**`badge-promo`** — Yellow promo banner badge.

**`badge-tag-yellow`** — Soft-yellow feature tag chip ("Yellow" tag on AI Workflows page).

**`badge-tag-purple`** — Lavender feature tag chip ("AI agent" tag).

**`badge-tag-coral`** — Coral feature tag chip variant.

**`badge-success`** — Green success indicator.

**`badge-discount`** — Yellow rectangular discount pill ("Save 15%").

**`promo-banner`** — Sticky black promo strip ABOVE the top nav.

**`comparison-table`** — Pricing feature comparison table.

**`comparison-row`** — Individual feature row.

**`whiteboard-mockup`** — Real Miro-board UI rendered as feature illustration.

**`template-card`** — Template thumbnail card.

**`industry-tile`** — Industry-vertical tile.

**`faq-accordion-item`** — FAQ panel item.

**`logo-wall-item`** — Customer logo wordmark cell.

**`capterra-badge`** — Review/rating badge in the footer.

**`app-store-badge`** — App store / Google Play download pill.

**Top Navigation (Marketing)** — Sticky white bar with yellow Miro wordmark + horizontal links + right-side CTAs.

**`hero-band-marketing`** — Marketing hero band.

**`cta-banner-dark`** — Dark CTA banner at the bottom of feature pages.

**`footer-region`** — Massive multi-column dark footer.

**`footer-link`** — Individual link in the footer.

| Name | Width | Key Changes |

|---|---|---|

| Mobile (small) | < 480px | Single column. Hero scales to 36px. Pill nav collapses to hamburger. Pricing tiers stack 1-up. |

| Mobile (large) | 480 – 767px | Feature tiles 2-up. Hero scales to 48px. |

| Tablet | 768 – 1023px | 2-column feature grids. Pill-tab nav returns. |

| Desktop | 1024 – 1279px | 4-tier pricing card row. Customer story grid 2-up. Hero at 64px. |

| Wide Desktop | ≥ 1280px | Full hero presentation, 80px hero display. |

1. Focus on ONE component at a time

2. Reference component names and tokens directly

3. Run `npx @google/design.md lint DESIGN.md` after edits

4. Add new variants as separate `components:` entries

5. Default to `{typography.body-md}` for body and `{typography.subtitle}` for emphasis

6. Keep `{colors.brand-yellow}` confined to wordmark, promo banner, and yellow-tag chips

7. Pill-shaped buttons (`{rounded.full}`) always

8. When showing the product, use a real Miro-board mockup with sticky-note color tints