What is Miro's primary brand color?

Miro's signature color is canary yellow ('#ffd02f'), but it's intentionally restricted. The yellow is used only for the wordmark, the top promo strip ('GET YOUR SPOT' banner), and 'yellow tag' badge chips on feature pages. Primary CTAs are black pills ('#1c1c1e' on rounded-full) across every surface. Inline link actions use brand blue ('#4262ff'). The discipline of keeping yellow off CTAs is what makes the wordmark recognizable — it never competes with an action button on the same surface.

What typography does Miro use?

Miro runs Roobert PRO, a custom geometric sans-serif with a slightly rounded character that pairs naturally with the playful product illustrations. The system covers 18 tokens from an 80px hero-display (weight 500, line-height 1.05, letter-spacing -2px) down to an 11px uppercase micro-label at weight 600. There are only three weights in the entire scale — 400 for body, 500 for medium emphasis and all headings, 600 for badges and uppercase. Roobert PRO does not use weight 700 in this system. Fallbacks walk Noto Sans, -apple-system, BlinkMacSystemFont, sans-serif.

Why does Miro use pastel feature cards?

The pastel tints — rose ('#ffd8f4'), teal-light ('#c3faf5'), coral-light ('#ffc6c6'), and brand yellow itself ('#ffd02f') — echo the actual sticky-note color palette used inside the live Miro whiteboard product. Marketing language and product language reinforce each other: a user sees a coral card on the homepage, then opens the app and finds the same coral on a sticky note. Cards render at 28px corners ('rounded.xxxl') with 32px internal padding to give the saturated background room to breathe.

Does Miro's design system have a dark mode?

The captured surfaces are light-only on the canvas ('#ffffff'), but the system uses dark surfaces strategically: the dark CTA banner at the bottom of feature pages ('cta-banner-dark' with primary '#1c1c1e' fill and 32px corners), the enterprise pricing tier card (dark canvas), the sticky promo strip above the top nav, and the massive multi-column footer region ('footer-bg' at '#1c1c1e'). Specific dark-mode token values for full-page inversion are not surfaced — listed in Known Gaps.

What is Miro's shape language?

Pills and large-radius pastels. Every interactive element — buttons, pill tabs, filter dropdowns, status badges, toggles — uses 'rounded.full' (9999px). Pastel feature cards use 'rounded.xxxl' (28px). Standard cards and pricing tiers use 'rounded.xl' (16px). Inputs and the search bar drop to 'rounded.md' (8px). The hero CTA banner uses 'rounded.feature' (32px). The discipline: pills for everything you touch, large radii for everything you read, no hard corners except the body grid itself.

Can I use this DESIGN.md to build my own React workspace product?

Yes. Feed the file to Claude, Cursor, or any AI tool that reads structured design tokens — the agent will reproduce Miro's specific choices (black pill primary, reserved yellow voltage, pastel sticky-note cards, Roobert PRO across the scale) rather than a generic SaaS theme. You can also paste tokens directly into Tailwind config or CSS variables: every color, type style, radius, and spacing value in the spec is a quoted value ready to copy.

What's missing from this DESIGN.md spec?

A handful of items documented in the Known Gaps section: specific dark-mode token values are not surfaced (the system uses dark accents but a full inverted palette isn't captured), animation and transition timings aren't extracted (recommend 150–200ms ease), form validation success states beyond defaults aren't explicitly captured, and the sticky-note color tints inside the actual whiteboard product are richer than what marketing surfaces capture.

Miro Design System

Miro's design system as a DESIGN.md file.

About Miro DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source miro.com

Productivity & SaaS
Workflow & No-code

Miro's design system frames the AI-powered visual workspace through one of the most confident brand-voltage choices in B2B SaaS: a single canary yellow ("#ffd02f") wordmark perched on a stark white canvas, then refused as a CTA. The dominant action everywhere is a black pill — "#1c1c1e" filled at fully rounded corners — and the live product carries the visual weight through real Miro-board mockup illustrations with sticky notes, kanban columns, and mind maps. Pastel feature cards in rose, teal, coral, and mint echo the actual sticky-note tints from inside the whiteboard, so the marketing language and the product language reinforce one another instead of drifting apart.

This page packages the full token system into a single DESIGN.md file built on the Google Labs spec. Inside: 41 color tokens grouped into brand, surface, text, and semantic families; 18 typography tokens running Roobert PRO from the 80px hero display through 11px uppercase micro labels; 12 spacing values from 4px to a 120px hero band; 9 rounded-corner steps culminating in a 9999px pill; and 42 components covering buttons, pricing cards, comparison tables, whiteboard mockups, FAQ accordions, badges, and the dark multi-column footer.

Feed the file to Claude, Cursor, or GitHub Copilot and the AI will reproduce Miro's specific restraint — black pills not yellow, pastel cards not gradients, real product UI not stock photography — rather than a generic shadcn theme. Reference the tokens directly when wiring Tailwind config or CSS variables. The system is worth studying for one specific discipline: how a brand can own a loud signature color (canary yellow at "#ffd02f") and still keep it out of every primary action, letting black do the work and saving the voltage for the wordmark and the sticky-note tints.

What makes it distinct

Reserved brand voltagecanary yellow #ffd02f confined to the wordmark, promo strip, and yellow-tag chips, never a primary CTA
Black-pill primary CTAs#1c1c1e on rounded.full carries every dominant action across marketing, pricing, and AI Workflows pages
Pastel feature cards at 28px cornersrose #ffd8f4, teal #c3faf5, coral #ffc6c6, yellow #ffd02f echo the live sticky-note palette
Roobert PRO across 18 type tokens80px hero down to 11px micro labels, single-family typography with no 700 weight
Massive 4-tier pricing into 80-row comparison tableFree / Starter / Business (featured lavender #f5f3ff) / Enterprise (dark canvas)

Live at miro.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

miro.com

Explore Miro

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Miro design system FAQ

Common questions about Miro's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Miro homepage

Live reference for the canary-yellow wordmark, black-pill CTAs, and pastel feature card system in production.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Use Miro in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→