Miro

source

---
name: Miro
description:
  Collaboration-tool aesthetic with white canvas, pastel accent pairs, geometric
  display font with negative tracking, and ring-shadow borders on soft-rounded
  surfaces.
originalFonts:
  primary: "Roobert PRO Medium"
colors:
  near-black: "#1c1c1e"
  white: "#ffffff"
  blue-450: "#5b76fe"
  actionable-pressed: "#2a41b6"
  coral-light: "#ffc6c6"
  coral-dark: "#600000"
  rose-light: "#ffd8f4"
  teal-light: "#c3faf5"
  teal-dark: "#187574"
  orange-light: "#ffe6cd"
  yellow-dark: "#746019"
  moss-dark: "#187574"
  pink: "#fde0f0"
  red-light: "#fbd4d4"
  red-dark: "#e3c5c5"
  success: "#00b473"
  slate: "#555a6a"
  input-placeholder: "#a5a8b5"
  border-gray: "#c7cad5"
  ring-gray: "rgb(224,226,232)"
  background: "#ffffff"
  surface: "#ffffff"
  ink: "#1c1c1e"
  ink-muted: "#555a6a"
  accent: "#5b76fe"
  accent-alt: "#00b473"
  border: "#c7cad5"
  link: "#5b76fe"
typography:
  h1:
    family: "Inter"
    size: "3.5rem"
    weight: 500
    lineHeight: 1.15
    letterSpacing: "-1.68px"
  h2:
    family: "Inter"
    size: "3rem"
    weight: 500
    lineHeight: 1.15
    letterSpacing: "-1.44px"
  h3:
    family: "Inter"
    size: "1.5rem"
    weight: 500
    lineHeight: 1.15
    letterSpacing: "-0.72px"
  body:
    family: "Noto Sans"
    size: "1rem"
    weight: 400
    lineHeight: 1.5
    letterSpacing: "-0.16px"
  button:
    family: "Inter"
    size: "1.0625rem"
    weight: 700
    lineHeight: 1.29
    letterSpacing: "0.175px"
  code:
    family: "JetBrains Mono"
spacing:
  xs: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "40px"
rounded:
  sm: "8px"
  md: "12px"
  lg: "24px"
  xl: "50px"
shadows:
  sm: "rgb(224,226,232) 0px 0px 0px 1px"
  md: "rgba(0,0,0,0.06) 0px 4px 12px"
components:
  button-primary:
    background: "{colors.blue-450}"
    color: "{colors.white}"
    border: "none"
    radius: "{rounded.sm}"
    padding: "7px 12px"
  button-secondary:
    background: "transparent"
    color: "{colors.near-black}"
    border: "1px solid {colors.border-gray}"
    radius: "{rounded.sm}"
    padding: "7px 12px"
  card:
    background: "{colors.white}"
    border: "1px solid #e9eaef"
    radius: "{rounded.md}"
    padding: "1.5rem"
  input:
    background: "{colors.white}"
    border: "1px solid #e9eaef"
    radius: "{rounded.sm}"
    padding: "16px"
---

<!-- source: VoltAgent/awesome-design-md @ 80bbbc2 (MIT) — see ATTRIBUTION.md -->

# Design System Inspiration of Miro

## 1. Visual Theme & Atmosphere

Miro's website is a clean, collaborative-tool-forward platform that communicates
"visual thinking" through generous whitespace, pastel accent colors, and a
confident geometric font. The design uses a predominantly white canvas with
near-black text (`#1c1c1e`) and a distinctive pastel color palette — coral,
rose, teal, orange, yellow, moss — each representing different collaboration
contexts.

The typography uses Roobert PRO Medium as the primary display font with OpenType
character variants (`"blwf", "cv03", "cv04", "cv09", "cv11"`) and negative
letter-spacing (-1.68px at 56px). Noto Sans handles body text with its own
stylistic set (`"liga" 0, "ss01", "ss04", "ss05"`). The design is built with
Framer, giving it smooth animations and modern component patterns.

**Key Characteristics:**

- White canvas with near-black (`#1c1c1e`) text
- Roobert PRO Medium with multiple OpenType character variants
- Pastel accent palette: coral, rose, teal, orange, yellow, moss (light + dark
  pairs)
- Blue 450 (`#5b76fe`) as primary interactive color
- Success green (`#00b473`) for positive states
- Generous border-radius: 8px–50px range
- Framer-built with smooth motion patterns
- Ring shadow border: `rgb(224,226,232) 0px 0px 0px 1px`

## 2. Color Palette & Roles

### Primary

- **Near Black** (`#1c1c1e`): Primary text
- **White** (`#ffffff`): `--tw-color-white`, primary surface
- **Blue 450** (`#5b76fe`): `--tw-color-blue-450`, primary interactive
- **Actionable Pressed** (`#2a41b6`): `--tw-color-actionable-pressed`

### Pastel Accents (Light/Dark pairs)

- **Coral**: Light `#ffc6c6` / Dark `#600000`
- **Rose**: Light `#ffd8f4` / Dark (implied)
- **Teal**: Light `#c3faf5` / Dark `#187574`
- **Orange**: Light `#ffe6cd`
- **Yellow**: Dark `#746019`
- **Moss**: Dark `#187574`
- **Pink** (`#fde0f0`): Soft pink surface
- **Red** (`#fbd4d4`): Light red surface
- **Dark Red** (`#e3c5c5`): Muted red

### Semantic

- **Success** (`#00b473`): `--tw-color-success-accent`

### Neutral

- **Slate** (`#555a6a`): Secondary text
- **Input Placeholder** (`#a5a8b5`): `--tw-color-input-placeholder`
- **Border** (`#c7cad5`): Button borders
- **Ring** (`rgb(224,226,232)`): Shadow-as-border

## 3. Typography Rules

### Font Families

- **Display**: `Roobert PRO Medium`, fallback: Placeholder —
  `"blwf", "cv03", "cv04", "cv09", "cv11"`
- **Display Variants**: `Roobert PRO SemiBold`, `Roobert PRO SemiBold Italic`,
  `Roobert PRO`
- **Body**: `Noto Sans` — `"liga" 0, "ss01", "ss04", "ss05"`

### Hierarchy

| Role            | Font               | Size   | Weight  | Line Height | Letter Spacing |
| --------------- | ------------------ | ------ | ------- | ----------- | -------------- |
| Display Hero    | Roobert PRO Medium | 56px   | 400     | 1.15        | -1.68px        |
| Section Heading | Roobert PRO Medium | 48px   | 400     | 1.15        | -1.44px        |
| Card Title      | Roobert PRO Medium | 24px   | 400     | 1.15        | -0.72px        |
| Sub-heading     | Noto Sans          | 22px   | 400     | 1.35        | -0.44px        |
| Feature         | Roobert PRO Medium | 18px   | 600     | 1.35        | normal         |
| Body            | Noto Sans          | 18px   | 400     | 1.45        | normal         |
| Body Standard   | Noto Sans          | 16px   | 400–600 | 1.50        | -0.16px        |
| Button          | Roobert PRO Medium | 17.5px | 700     | 1.29        | 0.175px        |
| Caption         | Roobert PRO Medium | 14px   | 400     | 1.71        | normal         |
| Small           | Roobert PRO Medium | 12px   | 400     | 1.15        | -0.36px        |
| Micro Uppercase | Roobert PRO        | 10.5px | 400     | 0.90        | uppercase      |

## 4. Component Stylings

### Buttons

- Outlined: transparent bg, `1px solid #c7cad5`, 8px radius, 7px 12px padding
- White circle: 50% radius, white bg with shadow
- Blue primary (implied from interactive color)

### Cards: 12px–24px radius, pastel backgrounds

### Inputs: white bg, `1px solid #e9eaef`, 8px radius, 16px padding

## 5. Layout Principles

- Spacing: 1–24px base scale
- Radius: 8px (buttons), 10px–12px (cards), 20px–24px (panels), 40px–50px (large
  containers)
- Ring shadow: `rgb(224,226,232) 0px 0px 0px 1px`

## 6. Depth & Elevation

Minimal — ring shadow + pastel surface contrast

## 7. Do's and Don'ts

### Do

- Use pastel light/dark pairs for feature sections
- Apply Roobert PRO with OpenType character variants
- Use Blue 450 (#5b76fe) for interactive elements

### Don't

- Don't use heavy shadows
- Don't mix more than 2 pastel accents per section

## 8. Responsive Behavior

Breakpoints: 425px, 576px, 768px, 896px, 1024px, 1200px, 1280px, 1366px, 1700px,
1920px

## 9. Agent Prompt Guide

### Quick Color Reference

- Text: Near Black (`#1c1c1e`)
- Background: White (`#ffffff`)
- Interactive: Blue 450 (`#5b76fe`)
- Success: `#00b473`
- Border: `#c7cad5`

### Example Component Prompts

- "Create hero: white background. Roobert PRO Medium 56px, line-height 1.15,
  letter-spacing -1.68px. Blue CTA (#5b76fe). Outlined secondary (1px solid
  #c7cad5, 8px radius)."