Overview
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:
- Stark white canvas + Miro wordmark in canary yellow ({colors.brand-yellow}) as the recognizable opening signature
- Black-pill primary CTAs ({colors.primary} +
{rounded.full}) as the dominant interactive element
- Pastel feature cards (yellow, rose, coral, teal, mint) that echo the actual sticky-note palette
- Roobert PRO across every UI surface; geometric, slightly rounded character
- Real Miro-board mockup imagery used as feature illustrations
- 4-tier pricing card grid + dense feature comparison table
- Massive dark footer ({colors.footer-bg}) with multi-column links + app-store badges
Colors
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.
Brand & Accent
- Miro Yellow ({colors.brand-yellow}): The brand's recognizable canary yellow — wordmark color, top promo banner, "yellow tag" pills
- Yellow Deep ({colors.brand-yellow-deep}): Darker variant for hover states and emphasis
- Yellow Light ({colors.yellow-light}): Pale yellow background tint for tag chips
- Yellow Dark ({colors.yellow-dark}): Yellow-tag text color (dark olive) for chip foreground
- Brand Blue ({colors.brand-blue}): Action blue for inline links and featured-pricing-tier border
- Blue Pressed ({colors.blue-pressed}): Pressed-state blue
- Brand Coral ({colors.brand-coral}): Coral accent for warm callouts
- Coral Light ({colors.coral-light}): Pale coral for feature card backgrounds
- Coral Dark ({colors.coral-dark}): Coral-tag text color (deep wine)
- Brand Rose ({colors.brand-rose}): Soft rose-pink for feature card variants
- Brand Teal ({colors.brand-teal}): Brand teal
- Teal Light ({colors.teal-light}): Pale teal for feature card backgrounds
- Moss Dark ({colors.moss-dark}): Deep teal-green text color
- Brand Pink ({colors.brand-pink}): Pale pink for soft callouts
- Brand Orange Light ({colors.brand-orange-light}): Soft orange for feature card backgrounds
Surface
- Canvas White ({colors.canvas}): Page background and primary card surface
- Surface ({colors.surface}): Subtle section backgrounds, search-pill rest
- Surface Soft ({colors.surface-soft}): Quieter section divisions
- Surface Yellow ({colors.surface-yellow}): Pale yellow-tinted surface for tag chip
- Surface Pricing Featured ({colors.surface-pricing-featured}): Pale lavender for featured pricing tier
- Hairline ({colors.hairline}): 1px borders and primary dividers
- Hairline Soft ({colors.hairline-soft}): Quieter table-row dividers
- Hairline Strong ({colors.hairline-strong}): Stronger 1px border for inputs
Text
- Ink Deep ({colors.ink-deep}): Headlines on lighter feature cards
- Ink ({colors.ink}): Primary headlines and body text
- Charcoal ({colors.charcoal}): Body emphasis text
- Slate ({colors.slate}): Secondary text, metadata
- Steel ({colors.steel}): Tertiary text, footer links
- Stone ({colors.stone}): Captions, muted labels
- Muted ({colors.muted}): Disabled labels, input placeholders
- On Dark ({colors.on-dark}): White text on dark surfaces
- On Dark Muted ({colors.on-dark-muted}): Reduced-opacity white on dark
Semantic
- Success Accent ({colors.success-accent}): Confirmation/success indicator green
- Brand Red ({colors.brand-red}): Soft red for error backgrounds
- Brand Red Dark ({colors.brand-red-dark}): Stronger red for error borders
Typography
Font Family
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.
Hierarchy
| 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 |
Principles
- Tight hero leading (1.05) creates magazine-grade display headlines on the 80px hero
- Negative letter-spacing progression — display sizes use -2px to -1.5px; smaller headings relax to 0
- Stat-display token (64px / 500) for marketing stat callouts
- Single weight scale — 400 (body), 500 (medium emphasis + headings), 600 (badges and uppercase). Roobert PRO does not use 700 in this system.
Layout
Spacing System
- Base unit: 4px (8px primary increment)
- Tokens:
{spacing.xxs} (4px) · {spacing.xs} (8px) · {spacing.sm} (12px) · {spacing.md} (16px) · {spacing.lg} (20px) · {spacing.xl} (24px) · {spacing.xxl} (32px) · {spacing.xxxl} (40px) · {spacing.section-sm} (48px) · {spacing.section} (64px) · {spacing.section-lg} (96px) · {spacing.hero} (120px)
- Section rhythm: Marketing pages use
{spacing.section-lg} (96px); pricing comparison tightens to {spacing.section} (64px); customer story stack uses {spacing.xxl} (32px)
- Card internal padding:
{spacing.xl} (24px) for compact cards; {spacing.xxl} (32px) for feature panels
Grid & Container
- Marketing pages use 1280px max-width with 32px gutters
- Pricing page renders 4-tier card row at desktop (Free / Starter / Business / Enterprise)
- Customer stories page uses 2-column grid with filter dropdowns
- AI Workflows page uses 2-column hero, then 3-up feature grid
Whitespace Philosophy
Marketing surfaces give content generous breathing room — {spacing.hero} (120px) hero padding gives the small wordmark room to breathe. Pricing surfaces tighten dramatically.
Elevation & Depth
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 |
Decorative Depth
- The atmospheric depth on Miro's hero comes from the live-product-board mockup illustrations — sticky notes layered at z-offsets, color-block tints behind whiteboard frames
- Pastel feature cards carry their own visual weight via saturated background color
- Customer-story cards layer dark photographic content with overlay scrims
Shapes
Border Radius Scale
| 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 |
Photography Geometry
- Real Miro board mockups render with
{rounded.xl} (16px) corners and a subtle drop shadow
- Customer story cards use
{rounded.xxxl} (28px) corners with full-bleed photography
- Template card thumbnails use
{rounded.xl} (16px) with photographic content
- Customer logos wall presents wordmarks inline at consistent 100px height
Components
Per the no-hover policy, hover states are NOT documented. Default and pressed/active states only.
Buttons
button-primary — Black pill primary CTA, the dominant action ("Get started free").
- Background
{colors.primary}, text {colors.on-primary}, typography {typography.button-md}, padding 12px 24px, rounded {rounded.full}.
- Pressed state
button-primary-pressed lifts to {colors.charcoal}.
- Disabled state
button-primary-disabled uses {colors.hairline} background and {colors.muted} text.
button-yellow — Brand-yellow pill for moments of brand emphasis.
- Background
{colors.brand-yellow}, text {colors.primary}, typography {typography.button-md}, padding 12px 24px, rounded {rounded.full}.
button-blue — Brand-blue pill for inline action callouts.
- Background
{colors.brand-blue}, text {colors.on-primary}, typography {typography.button-md}, padding 12px 24px, rounded {rounded.full}.
button-secondary — Outlined pill for secondary actions ("Book a demo").
- Background transparent, text
{colors.ink}, border 1px solid {colors.hairline-strong}, typography {typography.button-md}, padding 12px 24px, rounded {rounded.full}.
button-on-dark — White pill for dark CTA banners.
- Background
{colors.on-dark}, text {colors.primary}, typography {typography.button-md}, padding 12px 24px, rounded {rounded.full}.
button-ghost — Quieter rectangular ghost button.
- Background transparent, text
{colors.ink}, typography {typography.button-md}, padding 8px 12px, rounded {rounded.md}.
button-link — Inline text link.
- Background transparent, text
{colors.brand-blue}, typography {typography.body-sm-medium}, padding 0.
button-icon-circular — 36×36px circular utility button.
- Background
{colors.canvas}, text {colors.ink}, border 1px solid {colors.hairline}, rounded {rounded.full}.
Cards & Containers
card-base — Standard content card.
- Background
{colors.canvas}, rounded {rounded.xl}, padding {spacing.xl}, border 1px solid {colors.hairline-soft}.
card-feature — White feature card with larger 28px corners.
- Background
{colors.canvas}, rounded {rounded.xxxl}, padding {spacing.xxl}, border 1px solid {colors.hairline-soft}.
card-feature-yellow — Pastel-yellow feature card.
- Background
{colors.brand-yellow}, text {colors.primary}, rounded {rounded.xxxl}, padding {spacing.xxl}.
card-feature-coral — Pastel-coral feature card variant.
- Background
{colors.coral-light}, text {colors.primary}, rounded {rounded.xxxl}, padding {spacing.xxl}.
card-feature-teal — Pastel-teal feature card variant.
- Background
{colors.teal-light}, text {colors.primary}, rounded {rounded.xxxl}, padding {spacing.xxl}.
card-feature-rose — Pastel-rose feature card variant.
- Background
{colors.rose-light}, text {colors.primary}, rounded {rounded.xxxl}, padding {spacing.xxl}.
card-customer-story — Customer story card.
- Background
{colors.canvas}, rounded {rounded.xxxl}, padding 0 (image fills the card), border 1px solid {colors.hairline-soft}.
card-stat — Stat-row cell for "100M+ users".
- Background transparent, text
{colors.ink}, typography {typography.stat-display}, padding {spacing.lg}.
pricing-card — Standard pricing tier card.
- Background
{colors.canvas}, rounded {rounded.xl}, padding {spacing.xxl}, border 1px solid {colors.hairline}.
pricing-card-featured — Featured pricing tier (Business — lavender background + blue border).
- Background
{colors.surface-pricing-featured}, rounded {rounded.xl}, padding {spacing.xxl}, border 2px solid {colors.brand-blue}.
pricing-card-enterprise — Dark-canvas enterprise tier card.
- Background
{colors.primary}, text {colors.on-primary}, rounded {rounded.xl}, padding {spacing.xxl}.
Inputs & Forms
text-input — Standard text field.
- Background
{colors.canvas}, text {colors.ink}, border 1px solid {colors.hairline-strong}, rounded {rounded.md}, padding {spacing.sm} {spacing.md}, height 44px.
text-input-focused — Activated state.
- Border switches to
2px solid {colors.brand-blue}.
search-pill — Search bar.
- Background
{colors.surface}, text {colors.steel}, typography {typography.body-sm}, rounded {rounded.md}, height 40px, border 1px solid {colors.hairline}.
filter-dropdown — Pill-shaped filter dropdown ("Company use" / "Industry" / "Use case").
- Background
{colors.canvas}, text {colors.ink}, typography {typography.body-sm-medium}, rounded {rounded.full}, padding {spacing.xs} {spacing.md}, border 1px solid {colors.hairline-strong}.
Tabs
pill-tab + pill-tab-active — Pill-style tab nav.
- Inactive: background
{colors.canvas}, text {colors.steel}, border 1px solid {colors.hairline}, padding {spacing.xs} {spacing.md}, rounded {rounded.full}.
- Active: background
{colors.primary}, text {colors.on-primary}.
toggle-monthly-yearly — Two-state pill toggle (Monthly / Annual on pricing).
- Background
{colors.surface}, rounded {rounded.full}, padding 4px.
Badges & Status
badge-promo — Yellow promo banner badge.
- Background
{colors.brand-yellow}, text {colors.primary}, typography {typography.caption-bold}, rounded {rounded.full}, padding 4px 10px.
badge-tag-yellow — Soft-yellow feature tag chip ("Yellow" tag on AI Workflows page).
- Background
{colors.surface-yellow}, text {colors.yellow-dark}, typography {typography.caption-bold}, rounded {rounded.full}, padding 4px 10px.
badge-tag-purple — Lavender feature tag chip ("AI agent" tag).
- Background
{colors.surface-pricing-featured}, text {colors.brand-blue}, typography {typography.caption-bold}, rounded {rounded.full}, padding 4px 10px.
badge-tag-coral — Coral feature tag chip variant.
- Background
{colors.coral-light}, text {colors.coral-dark}, typography {typography.caption-bold}, rounded {rounded.full}, padding 4px 10px.
badge-success — Green success indicator.
- Background
{colors.success-accent}, text {colors.on-primary}, typography {typography.caption-bold}, rounded {rounded.full}, padding 4px 10px.
badge-discount — Yellow rectangular discount pill ("Save 15%").
- Background
{colors.brand-yellow}, text {colors.primary}, typography {typography.caption-bold}, rounded {rounded.sm}, padding 2px 6px.
promo-banner — Sticky black promo strip ABOVE the top nav.
- Background
{colors.primary}, text {colors.on-primary}, typography {typography.body-sm-medium}, padding {spacing.sm} {spacing.md}. Carries inline yellow "GET YOUR SPOT" pill.
Tables
comparison-table — Pricing feature comparison table.
- Background
{colors.canvas}, text {colors.ink}, typography {typography.body-sm}, rounded {rounded.md}, border 1px solid {colors.hairline}.
comparison-row — Individual feature row.
- Background
{colors.canvas}, text {colors.ink}, padding {spacing.md} {spacing.lg}, bottom border 1px solid {colors.hairline-soft}.
Documentation Components
whiteboard-mockup — Real Miro-board UI rendered as feature illustration.
- Background
{colors.canvas}, rounded {rounded.xl}, border 1px solid {colors.hairline-soft}, shadow rgba(5, 0, 56, 0.08) 0px 12px 32px -4px.
template-card — Template thumbnail card.
- Background
{colors.canvas}, rounded {rounded.xl}, padding {spacing.md}, border 1px solid {colors.hairline}.
industry-tile — Industry-vertical tile.
- Background
{colors.canvas}, rounded {rounded.xl}, padding {spacing.xl}, border 1px solid {colors.hairline-soft}.
faq-accordion-item — FAQ panel item.
- Background
{colors.canvas}, rounded {rounded.md}, padding {spacing.xl}, bottom border 1px solid {colors.hairline}.
logo-wall-item — Customer logo wordmark cell.
- Background transparent, text
{colors.steel}, typography {typography.body-md-medium}, padding {spacing.lg}.
capterra-badge — Review/rating badge in the footer.
- Background
{colors.canvas}, text {colors.ink}, typography {typography.caption}, rounded {rounded.md}, padding {spacing.sm} {spacing.md}, border 1px solid {colors.hairline}.
app-store-badge — App store / Google Play download pill.
- Background
{colors.canvas}, text {colors.primary}, typography {typography.caption-bold}, rounded {rounded.md}, padding {spacing.sm} {spacing.md}.
Navigation
Top Navigation (Marketing) — Sticky white bar with yellow Miro wordmark + horizontal links + right-side CTAs.
- Background
{colors.canvas}, height ~64px.
- Left: Yellow square Miro wordmark + horizontal link list (Product, Solutions, Resources).
- Right: "Login / Pricing / Contact sales" links + black-pill "Get started free".
Signature Components
hero-band-marketing — Marketing hero band.
- Background
{colors.canvas}, padding {spacing.hero}.
- Layout: centered headline in
{typography.hero-display}, centered subtitle, centered button row, then whiteboard mockup illustration below.
cta-banner-dark — Dark CTA banner at the bottom of feature pages.
- Background
{colors.primary}, text {colors.on-primary}, rounded {rounded.feature}, padding {spacing.section}. Centered headline + subtitle + button-on-dark "Get started free".
footer-region — Massive multi-column dark footer.
- Background
{colors.footer-bg}, padding {spacing.section} {spacing.xxl}.
- 6-column link grid (Product / Solutions / Tools / Resources / Company / Plans & Pricing).
- Section headings in
{typography.body-md-medium} {colors.on-dark}.
footer-link — Individual link in the footer.
- Background transparent, text
{colors.on-dark-muted}, typography {typography.body-sm}, padding {spacing.xxs} 0.
Do's and Don'ts
Do
- Reserve
{colors.brand-yellow} for the wordmark, top promo banner, and "yellow tag" chips
- Use
{colors.primary} (black) as the dominant CTA on all surfaces
- Pair pastel feature cards (yellow, rose, coral, teal) with white feature cards in the same viewport
- Apply
{rounded.full} to every button, every pill tab, every status badge
- Apply
{rounded.xxxl} (28px) to pastel feature cards
- Use real Miro-board mockups as feature illustrations
- Maintain Roobert PRO across every UI surface
Don't
- Don't use
{colors.brand-yellow} on standard CTAs or large background surfaces
- Don't introduce additional accent colors beyond yellow + brand pastels
- Don't soften corners on buttons; the pill is a brand signature
- Don't reduce hero leading below 1.05
- Don't apply heavy shadows on flat documentation cards; reserve elevation for whiteboard mockups
- Don't use stock photography — show the live product board UI
Responsive Behavior
Breakpoints
| 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. |
Touch Targets
- Pill buttons render at 40–44px effective 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 on mobile
Collapsing Strategy
- Promo banner stays full-width; truncates at < 480px
- Top nav below 1024px collapses to hamburger
- Hero band: 2-column hero collapses to stacked at < 1024px
- Pricing comparison: 4-column tiers → 2-column tablet → 1-column mobile; comparison table becomes horizontal-scroll
- Customer story grid: 2-up → 1-up at < 768px
- Hero typography: 80px → 60px tablet → 48px mobile-large → 36px mobile-small
- Footer: 6-column desktop → 3-column tablet → 2-column mobile → accordion at small mobile
Image Behavior
- Whiteboard mockups maintain aspect ratio; lazy-loaded below the fold
- Customer story photography uses 16:9 ratio with full-bleed scaling
- Logo wall presents wordmarks at consistent 100px height
Iteration Guide
- Focus on ONE component at a time
- Reference component names and tokens directly
- Run
npx @google/design.md lint DESIGN.md after edits
- Add new variants as separate
components: entries
- Default to
{typography.body-md} for body and {typography.subtitle} for emphasis
- Keep
{colors.brand-yellow} confined to wordmark, promo banner, and yellow-tag chips
- Pill-shaped buttons (
{rounded.full}) always
- When showing the product, use a real Miro-board mockup with sticky-note color tints
Known Gaps
- Specific dark-mode token values not surfaced
- Animation/transition timings not extracted; recommend 150–200ms ease
- Form validation success state not explicitly captured beyond defaults
- Sticky note color tints inside the actual whiteboard product are richer than what marketing surfaces capture