# Miro — Design System
> Visual collaboration platform for teams to think, plan, and build together.
- **Canonical:** https://uiuxskills.com/library/miro
- **Source:** https://miro.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:11:04.507Z

---

---
version: alpha
name: Miro
description: Visual collaboration platform for teams to think, plan, and build together.
tone: Professional, collaborative, and innovation-focused.
color-scheme: light
colors:
  primary: "#3859FF"
  secondary: "#FDE050"
  surface: "#FFFFFF"
  surface-dim: "#F0F0F0"
  on-surface: "#1C1C1E"
  on-primary: "#FFFFFF"
  outline: "#E9EAEF"
  error: "#FF3B30"
  success: "#34C759"
  focus-ring: "#3859FF"
typography:
  display-lg:
    fontFamily: Roobert PRO Medium
    fontSize: 56px
  display-md:
    fontFamily: Roobert PRO Medium
    fontSize: 48px
  headline-lg:
    fontFamily: Roobert PRO Medium
    fontSize: 32px
  headline-md:
    fontFamily: Roobert PRO Medium
    fontSize: 24px
  body-md:
    fontFamily: Noto Sans
    fontSize: 16px
  label-md:
    fontFamily: Noto Sans
    fontSize: 14px
  label-sm:
    fontFamily: Noto Sans
    fontSize: 12px
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#2A45CC"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.on-surface}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.primary}"
  badge:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card-dim:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px rgba(0,0,0,0.10)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Miro maintains a clean, professional, and highly functional aesthetic that prioritizes clarity and focus. The visual language is built on a minimalist, grid-based foundation, designed to support complex enterprise and creative workflows without distraction.

## Colors

The color strategy focuses on high-contrast utility, using a neutral palette to ground the interface while reserving vibrant tones for interaction and emphasis.

*   Primary (#3859FF): The core brand color, used for primary CTAs and active states.
*   Secondary (#FDE050): Used for accents, highlights, and attention-grabbing badges.
*   Surface (#FFFFFF): The base background for cards, inputs, and content containers.
*   Surface-dim (#F0F0F0): The primary page background color, providing subtle separation from content.
*   On-surface (#1C1C1E): The primary text color, ensuring high readability against light surfaces.
*   On-primary (inferred) (#FFFFFF): The text color for buttons using the primary background.
*   Outline (#E9EAEF): The standard border color for inputs, structural dividers, and containers.
*   Error (inferred) (#FF3B30): Semantic color for errors and destructive actions.
*   Success (inferred) (#34C759): Semantic color for positive feedback and completion states.
*   Focus-ring (inferred) (#3859FF): The indicator for keyboard navigation and focus states.

## Typography

Typography is clean and functional, utilizing a combination of geometric sans-serifs for headers and highly legible humanist sans-serifs for body text.

*   Display-lg: Used exclusively for hero headlines to establish immediate visual hierarchy.
*   Display-md: Used for secondary section headers.
*   Headline-lg (inferred): Used for sub-headers throughout the page.
*   Headline-md (inferred): Used for titles within cards and smaller content modules.
*   Body-md: The standard font for all paragraph and long-form text.
*   Label-md (inferred): Used for button labels and primary UI controls.
*   Label-sm (inferred): Used for small captions, metadata, and secondary labels.

## Layout

Miro employs a centered, grid-based layout strategy built on a 4px base unit, ensuring consistent alignment and spacing. The page follows a logical flow: `nav`, `hero`, `features`, `social-proof`, and `footer`. The hero section is characterized by a centered headline and subhead, paired with a single primary CTA and an email input field. The design is mobile-first, with navigation collapsing into a hamburger menu on smaller viewports.

## Elevation & Depth

Depth is used sparingly to maintain a flat, modern aesthetic. Elevation is applied through subtle, multi-layered shadows to distinguish interactive elements from the background.

*   elevation.sm (inferred): Used for subtle card lift.
*   elevation.md (inferred): Used for dropdowns, popovers, and standard elevated cards.
*   elevation.lg (inferred): Used for modals and drawer overlays.

## Shapes

The brand uses a consistent 8px border-radius (`rounded.md`) for most UI components, including buttons, inputs, and cards. This approach provides a friendly, approachable feel that remains professional and avoids the overly soft look of fully rounded corners.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button Primary
Anatomy includes a primary background with centered text. Use this for the main action on a page or section. It should always feature a hover state that darkens the background to `{button-primary-hover.backgroundColor}`.

### Card
A container with a `{colors.surface}` background and `{rounded.md}` corners. Use these to group related content or features; apply `{elevation.md}` only if the card is intended to be interactive.

### Input Field
Features a `{colors.surface}` background with a `{colors.outline}` border. On focus, the border must transition to `{colors.primary}` to indicate an active state.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Never use an accent color for primary buttons. |
| Apply `{typography.display-lg}` for hero headlines only. | Avoid using `{typography.display-lg}` for body text. |
| Maintain `{rounded.md}` on all input fields. | Never apply `{rounded.full}` to standard input fields. |
| Use `{colors.outline}` for all structural dividers. | Do not use low-contrast text on `{colors.surface-dim}`. |
| Ensure `{typography.body-md}` for all body copy. | Avoid mixing font families outside Roobert PRO and Noto Sans. |
| Use `{colors.secondary}` for highlighting key features. | Do not use shadows on flat cards unless they are interactive. |
| Use `{colors.focus-ring}` for keyboard navigation. | Avoid removing focus states on interactive elements. |
| Use `{typography.label-md}` for button labels. | Do not use oversized typography for secondary labels. |

## Content Style

CTA labels use imperative verbs in sentence case, kept concise (e.g., "Get started free"). This ensures the user understands the action immediately.

Headings are phrased as concrete benefit statements. They should be professional, direct, and avoid unnecessary jargon to maintain the innovation-focused tone.

Copy density is designed for scannability. Use short paragraphs and clear visual hierarchy to ensure the content remains accessible and easy to digest for busy professionals.

## Imagery & Icons

Imagery utilizes a mix of high-quality product screenshots and abstract, soft-gradient background elements to convey a sense of innovation and space. Icons should follow a minimal, clean line-work style that matches the precision of the typography and grid system.