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.

Yellow AI agent Templates Active Save 15%

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

Get started with thousands of templates ready to use.

Boards

Sidebars

Track AI-built tasks with sidebars that consolidate context.

Spaces

Connect your company knowledge to speed up the work.

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

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.

Workspace name

Team size

search-pill — 40px height, surface bg

filter-dropdown — pill-shaped filters

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.

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.

Design System Inspiration of Miro

Color Palette

Brand & Accent

Surface

Text

Typography Scale

Button Variants

Badges & Status

Pastel Feature Cards

AI Workflows

Templates

Sidebars

Spaces

Workshops

Customer Story Cards

Stat Row

Cards & Containers

Standard Card

Project Management

Roadmapping

Process Mapping

Whiteboard Mockup

Pricing Cards

Feature Comparison Table

Forms & Inputs

Tabs & Navigation

Pill Tabs

Dark CTA Banner

Try Miro for free with your team

Logo Wall

FAQ Accordion

Spacing Scale

Border Radius Scale

Elevation & Depth

Responsive Behavior

Device Ladder

Touch Targets

Collapsing Strategy