Convo'25 registration is open. Get up to 70% off on Annual GET YOUR SPOT

# Design System Inspiration of Miro

Miro positions itself as the AI-powered visual workspace through a confident, slightly playful brand voice — anchored by a stark white canvas, signature canary yellow wordmark, black-pill primary CTAs, and pastel feature cards that echo the actual sticky-note palette of the live whiteboard.

## Color Palette

Stark white canvas anchored by black-and-white CTA system, broken open by Miro's recognizable canary yellow wordmark and the pastel sticky-note palette (yellow, rose, coral, teal, orange).

### Brand & Accent

Miro Yellow
#ffd02f
Wordmark, promo banner
Yellow Deep
#fcb900
Pressed yellow state
Yellow Light
#fff4c4
Tag chip background
Brand Blue
#4262ff
Inline links, featured tier border
Blue Pressed
#2a41b6
Pressed-state blue
Brand Coral
#ff9999
Coral accent
Coral Light
#ffc6c6
Pastel feature card bg
Brand Rose
#ffd8f4
Rose accent
Rose Light
#fde0f0
Pastel feature card bg
Brand Teal
#0fbcb0
Teal accent
Teal Light
#c3faf5
Pastel feature card bg
Orange Light
#ffe6cd
Pastel feature card bg

### Surface

Canvas White
#ffffff
Page + card background
Surface
#f7f8fa
Stat row, search rest
Surface Yellow
#fff8e0
Yellow tag chip bg
Surface Pricing Featured
#f5f3ff
Featured tier bg
Hairline
#e0e2e8
Borders
Hairline Strong
#c7cad5
Input borders

### Text

Ink
#1c1c1e
Headlines, body, CTAs
Charcoal
#2c2c34
Body emphasis
Slate
#555a6a
Secondary text
Steel
#6b6f7e
Tertiary, footer links
Stone
#8e91a0
Captions
Muted
#a5a8b5
Disabled, placeholders

## Typography Scale

Roobert PRO across every UI surface — from 80px hero displays to 11px micro labels. Geometric, slightly rounded character.

hero-display80px / 500 / 1.05 / -2px
Get great done
display-lg60px / 500 / 1.10 / -1.5px
Visual workspace
heading-148px / 500 / 1.15 / -1px
Pricing on your terms
heading-236px / 500 / 1.20 / -0.5px
Why choose Miro?
heading-328px / 500 / 1.25
Card title
stat-display64px / 500 / 1.10 / -1.5px
100M+
subtitle18px / 400 / 1.50
Hero subtitle and lead body type
body-md16px / 400 / 1.50
Primary body text used across documentation prose, marketing copy, and feature descriptions.
body-sm14px / 400 / 1.50
Secondary body, table cells, navigation
caption-bold13px / 600 / 1.40
BADGE LABEL / TAG CHIP
button-md14px / 500 / 1.30
PILL BUTTON LABEL

## Button Variants

Pill-shaped everywhere. Black-pill primary dominates marketing CTAs.

button-primaryBlack pill — dominant CTA
button-yellowBrand-yellow pill
button-blueBrand-blue pill
button-secondaryOutlined pill
button-on-darkWhite pill on dark
button-ghostQuieter rect ghost
button-linkInline blue text link
button-icon-circular36×36 utility
button-primary-disabledDisabled state

## Badges & Status

Pill-shaped status indicators alongside small rect tags. Yellow-promo, pastel-tag chips for product features.

Limited time Yellow AI agent Templates Active Save 15%
Convo'25 registration is open. Get up to 70% off on Annual GET YOUR SPOT

promo-banner — sticky black strip with inline yellow pill above the top nav

## Pastel Feature Cards

Cards in the brand's sticky-note palette — yellow, coral, teal, rose, orange. 28px corner softening signals "this is a feature moment."

Yellow

#### AI Workflows

Build out workflows that actually reduce workload — not add to it.

Templates

#### Templates

Get started with thousands of templates ready to use.

Boards

#### Sidebars

Track AI-built tasks with sidebars that consolidate context.

Spaces

#### Spaces

Connect your company knowledge to speed up the work.

Workshops

#### Workshops

Run real-time, inclusive retrospectives and team workshops.

## Customer Story Cards

Brand-tinted photographic cards with full-bleed imagery and white quote overlays. PepsiCo coral, Red Hat dark, WebMD blue.

PepsiCo

"With Miro, we went from project briefing to in-market launch in 10 months. That usually takes 3 years at PepsiCo."

Jordan Henley Hubble
Director of Product at HBR
Red Hat

"I think Miro is a super unique opportunity to suddenly have engineering teams, marketing, creative people all on a single playing field."

Jen Mark Reilly
Distinguished Engineer at Red Hat
WebMD

"Miro has unlocked a suite of AI-native products worldwide, including UltraMix Agent, Hailuo AI."

WebMD Team
Healthcare Leadership

## Stat Row

Stat-row callouts with 64px stat-display token: "100M+ users / 250+ companies / 6,200+".

100M+Users worldwide
250+Templates available
6,200+Enterprise clients

## Cards & Containers

Standard cards, industry tiles, and the dark CTA banner that anchors every feature page bottom.

##### Standard Card

White canvas with hairline border and 16px corners. Used for documentation cards.

📊

##### Project Management

Track progress, share updates, and drive accountability across your team.

🗺

##### Roadmapping

Plan, communicate, and align on a single source of truth.

🔄

##### Process Mapping

Map and document complex workflows with shared visibility.

## Whiteboard Mockup

Real Miro-board UI rendered as feature illustration. Sticky notes in the brand pastel palette layered with subtle drop shadow.

Brainstorm ideas for Q4 launch
User research insights from interviews
Sprint planning · 2 weeks
Design review · Friday 3pm
Action items: prioritize
Risk: timeline overlap
Stakeholder alignment
Customer feedback theme

## Pricing Cards

4-tier comparison: Free / Starter / Business (featured) / Enterprise. Featured tier highlighted with lavender background + blue border. Enterprise card uses dark canvas.

Free
$0/mo

- 3 editable boards
- Basic templates
- Community support

Starter
$8/mo

- Unlimited boards
- Premium templates
- Email support
- Custom branding

Business
$16/mo

- Everything in Starter
- Single sign-on (SSO)
- Advanced security
- Priority support
- Day passes for visitors

Enterprise
Custom

- Custom contracts
- Enterprise security
- Dedicated CSM
- Advanced admin

### Feature Comparison Table

Feature | Free | Starter | Business | Enterprise
--- | --- | --- | --- | ---
CORE
Editable boards | 3 | ∞ | ∞ | ∞
Templates | ✓ | ✓ | ✓ | ✓
Custom branding | — | ✓ | ✓ | ✓
INTEGRATIONS
Slack & Teams | ✓ | ✓ | ✓ | ✓
Jira & Asana | — | ✓ | ✓ | ✓
SECURITY & ADMIN
Single sign-on (SSO) | — | — | ✓ | ✓
SCIM provisioning | — | — | — | ✓
Audit logs | — | — | — | ✓

## Forms & Inputs

44px-tall inputs with 8px rounded corners. Focus shifts to a 2px Brand Blue border. Pill-shaped filter dropdowns.

Email
Workspace name
Team size
search-pill — 40px height, surface bg
filter-dropdown — pill-shaped filters

## Tabs & Navigation

Pill tabs for top-level switching (Pricing / Roadmap on the pricing page).

### Pill Tabs

## Dark CTA Banner

Page-bottom CTA banner with 32px corner softening.

#### Try Miro for free with your team

Join 100M+ users worldwide already using Miro to bring their best work to life.

## Logo Wall

Customer logo grid — wordmark presentation in trust-row sections.

PepsiCo
Walmart
Atlassian
Slalom
vmware
Yamaha

## FAQ Accordion

Frequently-asked-questions panel. Collapsed by default; chevron toggle.

How does Miro pricing work? ⌃
Miro offers a Free tier for individuals, Starter at $8/month, Business at $16/month, and Custom enterprise plans. Annual billing saves 15%.
Can I invite guests to my Miro workspace? ⌄
Yes — Business and Enterprise plans include day passes for visitors and external collaborators.
Is Miro SOC 2 compliant? ⌄
Yes — Miro is SOC 2 Type II certified. Enterprise plans include additional security and compliance features.

## Spacing Scale

4px base unit, 8px primary increment. Section rhythm runs from 48px to 120px.

4xxs
8xs
12sm
16md
20lg
24xl
32xxl
40xxxl
48section-sm
64section
96section-lg
120hero

## Border Radius Scale

Pill buttons (9999px), 28px pastel feature cards, 32px CTA banners. Tightly controlled corner family.

4pxxs
6pxsm
8pxmd
12pxlg
16pxxl
20pxxxl
28pxxxxl
32pxfeature
pillfull

## Elevation & Depth

Predominantly flat. Strategic atmospheric depth on whiteboard mockups.

Level 0 — Flatborder + hairline
Level 1 — Subtlergba(5,0,56,0.04) 0 1px 2px
Level 2 — Cardrgba(5,0,56,0.06) 0 4px 12px
Level 3 — Mockuprgba(5,0,56,0.08) 0 12px 32px -4px
Level 4 — Modalrgba(5,0,56,0.12) 0 16px 48px -8px

## Responsive Behavior

Hero scales from 80px → 36px on mobile. Pricing tiers stack from 4-column to 1-up. Customer story grid collapses to single column.

Breakpoint | Width | Key Changes
--- | --- | ---
Mobile (small) | < 480px | Single column. Hero 36px. Pill nav collapses to hamburger. Pricing tiers stack 1-up.
Mobile (large) | 480 – 767px | Feature tiles 2-up. Hero 48px.
Tablet | 768 – 1023px | 2-column feature grids. Pill-tab nav returns. Hero 60px.
Desktop | 1024 – 1279px | 4-tier pricing card row. Customer story grid 2-up. Hero 64px.
Wide Desktop | ≥ 1280px | Full 80px hero presentation. Stat row at full width.

### Device Ladder

375px
480px
768px
1024px
1280+

### Touch Targets

- Pill buttons render at 40–44px height — at WCAG AAA floor.
- Circular icon buttons: 36×36px desktop → 44×44px mobile.
- Form inputs render at 44px height.
- Filter dropdowns render at ~36px tall — bumps to 44px mobile.

### Collapsing Strategy

- Promo banner stays full-width; truncates at < 480px.
- Top nav below 1024px collapses to hamburger.
- Pricing comparison: 4-column tiers → 2-column tablet → 1-column mobile.
- Customer story grid: 2-up → 1-up at < 768px.
- Hero typography: 80px → 60px → 48px → 36px.
- Footer: 6-column desktop → 3-column tablet → accordion mobile.