Miro Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

24tokens

13type steps

8radius steps

2pxspacing base

Miro, in one page

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

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

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Miro design language. Follow the measured tokens below — do not substitute your own palette.

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

Type:
- families: Roobert PRO
- scale: 11, 12, 13, 14, 16, 18, 22, 28, 36
- weights: 400, 500, 600

Shape:
- radius: 4, 6, 8, 12, 16, 20, 28, 32
- elevation: "rgba(5, 0, 56, 0.08) 0px 12px 32px -4px"

Spacing: 2, 4, 8, 12, 16, 20, 24, 32, 40, 48

Rules:
- 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

Avoid:
- 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

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

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

Type scaleRead the full spec

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.

Components and layoutRead the full spec

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

Responsive behaviourRead the full spec

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

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-miro {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #1c1c1e;
  --heading-color: #1c1c1e;
  --link-color: #1c1c1e;
  --link-hover-color: #030304;
  --border-color: #d6d6d7;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(28,28,30,0.06);
  --card-hover-shadow: 0 6px 18px rgba(28,28,30,0.12);
  --header-bg: #1c1c1e;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #6b6b6d;
  --button-bg: #1c1c1e;
  --button-text-color: #ffffff;
  --button-hover-bg: #030304;
  --button-border: none;
  --button-border-radius: 16px;
  --button-secondary-bg: #f1f1f2;
  --button-secondary-text-color: #1c1c1e;
  --button-secondary-hover-bg: #e4e4e4;
  --button-secondary-border: 1px solid #d6d6d7;
  --prompt-bg: #f4f4f4;
  --prompt-text-color: #1c1c1e;
  --base-font: var(--font-sans);
  --heading-font: var(--font-sans);
  --card-border-radius: 16px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

notion 84.0%
mintlify 78.5%
mongodb 77.3%
resend 77.1%
minimax 76.6%

Where this came from

Source document: volt/design-md/miro/DESIGN.md · 35.5 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.