Miro

Miro sets large Roobert PRO Medium headlines with tight tracking on a light fog canvas. Indigo (#3859ff) is reserved for actions, on buttons with 8px corners, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 8px, with 20px and 999px on smaller elements.

miro.com ↗

Colors

Indigo

#3859ff

Primary actions and links

Cobalt

#33aaff

Secondary accent and highlights

Fog

#f0f0f0

Page canvas

Void

#000000

Headlines and body copy

Bone White

#ffffff

Surface or divider

Graphite

#1c1c1e

Surface or divider

Deep Indigo

#0000ee

Surface or divider

Deep Bone White

#fafafc

Surface or divider

Ash

#555a6a

Supporting colour

Type scale

DisplayHuman collaboration at the speed of AIRoobert PRO Medium · 56px · 500

HeadingThe only thing more important than moving fast is moving the needleRoobert PRO Medium · 48px · 400

SubheadingTurn research into shared directionRoobert PRO Medium · 40px · 400

BodyWhere your team and AI think, plan, and build together, in a workspace that works the way Noto Sans · 20px · 400

NavIntelligent Canvas™sans-serif · 12px · 400

Buttons

Get started freeExplore researchRead Customer StudyLearn more

Style reference measured from the public page at miro.com on 2026-10-12 for design education. Miro and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.

Connect to your AI ↗

# Miro — Style Reference
> Miro sets large Roobert PRO Medium headlines with tight tracking on a light fog canvas. Indigo (#3859ff) is reserved for actions, on buttons with 8px corners, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 8px, with 20px and 999px on smaller elements.

**Theme:** light · **Source:** https://miro.com (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Indigo | `#3859ff` | `--color-accent` | Primary actions and links |
| Cobalt | `#33aaff` | `--color-secondary` | Secondary accent and highlights |
| Fog | `#f0f0f0` | `--color-canvas` | Page canvas |
| Void | `#000000` | `--color-ink` | Headlines and body copy |
| Bone White | `#ffffff` | `--color-surface-1` | Surface or divider |
| Graphite | `#1c1c1e` | `--color-surface-2` | Surface or divider |
| Deep Indigo | `#0000ee` | `--color-surface-3` | Surface or divider |
| Deep Bone White | `#fafafc` | `--color-surface-4` | Surface or divider |
| Ash | `#555a6a` | `--color-surface-5` | Supporting colour |

## Typography

| Role | Family | Size | Weight | Line height | Tracking |
|------|--------|------|--------|-------------|----------|
| Display | Roobert PRO Medium | 56px | 500 | 1.00 | -0.030em |
| Heading | Roobert PRO Medium | 48px | 400 | 1.15 | -0.030em |
| Subheading | Roobert PRO Medium | 40px | 400 | 1.15 | -0.030em |
| Body | Noto Sans | 20px | 400 | 1.35 | -0.020em |
| Nav | sans-serif | 12px | 400 | normal | 0 |

Font families on the page: sans-serif, Roobert PRO, Noto Sans, Roobert PRO Medium, Inter, Open Sans. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence.

## Shape

- Corner radius, most to least used: 8px, 20px, 999px, 24px, 40px
- Primary button: background `#3859ff`, text `#ffffff`, radius 8px, padding 8px 12px, 16px / 600

More styles from the web

Apple iPhone

Stripe

Linear

Apple

Vercel

Notion

Figma

Framer