Miro — Design System (Light)

Color Palette

Background Colors

Black

#000000 · ×2343

Dark Gray (Page)

#1C1C1E · ×321

White

#FFFFFF · ×517

White 3 (Near-white)

#FAFAFC

Dark Blue

#27455C

Blue 4 (Brand)

#3859FF

Blue 10

#3860BE

Light Gray

#C7CAD5

Sticky Note / Canvas Colors

Light Yellow

#FFF09A

Light Green

#C3F4D6

Light Cyan

#E1FBF9

White 2 (Cream)

#FFFAE7

Light Green 2

#E3F7EA

Light Orange

#FFE6CD

Light Blue 2

#E5E2FF

Light Pink

#FDE0F0

Brand Blue Gradient Family

Blue (Link)

#0000EE · ×474

Light Blue

#7A90FE · ×4

Blue 6

#5974FF

Blue 7

#395AFF

Blue 8

#322BFE

Blue 9

#6E3CFE

Purple

#A34CFF

Purple 2

#D05DFF

Text Colors

Dark Gray 3

#222428

Dark Gray 2

#555555

Blue 2

#555A6A

Mid Gray

#696969

Blue 5

#655BE6

Green 2

#0AAE3A

Red (Error)

#DB4F4F

Semantic / Extended Colors

Green

#6CC04A

Cyan (Success)

#32AE88

Pink

#FB64B6

Yellow

#FFDD33

Light Pink 2

#F66EFF

Cyan 2

#0E9DCD

Orange

#DB8641

Yellow 3

#D7B029

Typography

BRAND UI · ROOBERT PRO / OPEN SANS

Roobert PRO

The AI-powered innovation workspace. Collaborate, diagram, brainstorm.

Regular · 400 Medium · 500 SemiBold · 600 Bold · 700 Black · 900

CANVAS / BOARD FONT · TIMES (BASE)

Times

Board text, sticky note content, freeform canvas type.

Regular · 400 Italic Bold · 700

9 font families extracted · The family listing reveals Miro's multi-context font strategy: Roobert PRO (Regular, Medium, SemiBold, SemiBold Italic) for all product UI; Times as the base for canvas/board text; Noto Sans for multilingual support; Open Sans for legibility at small sizes; Nanum Pen Script for handwriting-style board annotations.

Miro

Display 48px · Black 900 · line-height: 57.6px · letter-spacing: −1.44px

Collaborate without limits

Heading 40px · Bold 700 · line-height: 46px · letter-spacing: −1.2px

Build your next big idea

Heading 24px · Bold 700 · line-height: 29.7px · letter-spacing: −0.48px

Templates · Diagramming · Whiteboard

Subheading 22px · SemiBold · line-height: 27.6px · letter-spacing: −0.44px

Work together on a boundless canvas. Brainstorm, plan, run workshops, and ship faster.

Body 18px · Regular · line-height: 24px · letter-spacing: −0.36px

Last edited 5 minutes ago · 12 collaborators online · Auto-save enabled

Body Small 14px · Regular · line-height: 20px · letter-spacing: −0.16px

BOARDS · TEAMS · TEMPLATES

Label 12px · SemiBold · uppercase · letter-spacing: +0.45px

Canvas note — sticky content in Times, Miro's base board font

Canvas Body · Times serif · 18px · Italic · line-height: 24px

Line Heights — 13 tokens

Tight

13.8px

Snug

16px

Normal

18px

Relaxed

18.953px

Loose

20px

LH-6

20.8px

LH-7

22.857px

LH-8

24px

LH-9

27.6px

LH-10

29.7px

LH-11

46px

LH-12

55.2px

LH-13

57.6px

Letter Spacing — Mostly Negative (8 of 11 tokens negative)

Display

--letter-spacing-tight

−1.44px · hero text, max condensing

Heading

--letter-spacing-normal

−1.2px · large headings

Body text

--letter-spacing-ls-8

−0.16px · body copy

LABELS

--letter-spacing-ls-11

+0.45px · uppercase labels (positive exception)

Spacing

Spacing Scale

25 tokens — 1px → 330.562px

100

120

171.4

240

330.6

Borders

Border Radii — 19 tokens

sm (right)

0/8/8/0px

md (bottom)

0/0/20/20px

1px

8px · ×64

10px

12px

r10

16px

r11

20px

r12

24px · ×15

r13

40px

r14

50px

r15

50%

r17 (Pill)

999px · ×12

Notable: --radius-sm and --radius-md apply only to specific corners — right-side and bottom — used for panels, modals, and tooltip anchors. Two additional tokens reach 1498.5px and 16.7M px.

Border Widths

--border-width-hairline

1px · ×86

--border-width-thin

2px · ×24 — focus rings, selected borders

--border-width-base

12px · ×4 — thick accent borders, callout blocks

Shadow / Elevation

Shadow Tokens

6 tokens — layered diffuse naturalistic shadows + inset accent + ring

sm — 5-layer diffuse

×6

5-stop layered naturalistic shadow — cards, panels, floating elements

md — Blue inset

×2

Indigo inset top-line — focus state, selected button, active indicator

lg — 3-layer dark

×2

3-stop perceptual shadow — popovers, menus, elevated panels

xl — Classic drop

×1

Simple 1–3px drop shadow — inputs, small cards

shadow-5 — Gray ring

×1

Gray 1px border-ring — disabled states, inactive elements

shadow-6 — Gray diffuse

×1

Gray 10px diffuse — subtle board card lift

Z-Index

Miro defines 16 z-index layers — including 3 INT_MAX values (2147483645–2147483647) for browser-layer elements that must always float on top of everything else.

Layer	Value	Usage
z-1 (Deep Background)	-1000	Canvas background, decorative layers buried far below content
z-2 → z-10 (Fine-grained)	1 → 10	9 sequential positive layers (1–10) for precise stacking within board canvas
z-11 / z-12 / z-13	49 / 50 / 51	Pre/mid/post modal threshold — sidebars, overlays, above-modal elements
z-14 (INT_MAX −2)	2,147,483,645	Browser-level overlays — always on top below system chrome
z-15 (INT_MAX −1)	2,147,483,646	System toasts, critical global alerts
z-16 (INT_MAX)	2,147,483,647	Absolute maximum — cursor followers, drag overlays, screen capture layers

Breakpoints

Miro defines 29 breakpoints — 400px → 1920px — including fractional pairs like 809 / 809.98 / 810 and 1365 / 1365.98 / 1366 for precise max/min-width media query boundaries.

📱

400

📱

SM/MD

425/426

📲

LG/XL

460/476

📲

2XL/3XL

530/550

📲

BP-8/9

576/600

💻

BP-10/11/12

767–769

💻

BP-13/14/15

809–810

💻

BP-16/17/18

890–897

🖥️

BP-19/20

1023/1024

🖥️

BP-21/22/23

1199–1200

🖥️

BP-24

1280

🖥️

BP-25/26/27

1365–1366

📺

BP-28

1700

📺

BP-29 (Max)

1920

Opacity

Opacity Tokens

3 tokens — 0.5 · 0.6 · 0.7 (mid-range, hover/dim focused)

--opacity-50

50% · ×1

--opacity-60

60% · ×1

--opacity-70

70% · ×7

The most minimal opacity set in this series — only 3 tokens, all in the 50–70% range. Used for disabled states, hover dims, and overlay tints on the canvas.

Accessibility

WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1

Text Color	Background Color	Ratio	WCAG Rating
#0000EE (Blue link)	#000000 (Black)	2.23:1	Fail
#0000EE (Blue link)	#FFFFFF (White)	9.4:1	AAA
#0000EE (Blue link)	#1C1C1E (Dark Gray)	1.81:1	Fail
#0000EE (Blue link)	#C7CAD5 (Light Gray)	5.74:1	AA
#0000EE (Blue link)	#27455C (Dark Blue)	1.07:1	Fail
#696969 (Mid Gray)	#000000	3.83:1	AA Large
#696969 (Mid Gray)	#FFFFFF	5.49:1	AA
#696969 (Mid Gray)	#1C1C1E	3.1:1	AA Large
#555555 (Dark Gray 2)	#FFFFFF	7.46:1	AAA
#555A6A (Blue 2)	#FFFFFF	6.87:1	AA
#222428 (Dark Gray 3)	#FFFFFF	15.54:1	AAA
#222428 (Dark Gray 3)	#C7CAD5	9.5:1	AAA

CSS Variables Reference

Background Colors

Black--color-black#000000 · ×2343

Dark Gray (Page)--color-dark-gray#1C1C1E · ×321

White--color-white#FFFFFF · ×517

White 3 (Near-white)--color-white-3#FAFAFC

Dark Blue--color-dark-blue#27455C

Blue 4 (Brand)--color-blue-4#3859FF

Light Gray--color-light-gray#C7CAD5

Light Yellow (sticky)--color-light-yellow#FFF09A

Light Green (sticky)--color-light-green#C3F4D6

Light Blue 2 (sticky)--color-light-blue-2#E5E2FF

Light Orange (sticky)--color-light-orange#FFE6CD

Light Pink (sticky)--color-light-pink#FDE0F0

Brand Blue Family + Gradients

Blue (Link/Base)--color-blue#0000EE · ×474

Light Blue--color-light-blue#7A90FE

Blue 6--color-blue-6#5974FF

Blue 7--color-blue-7#395AFF

Blue 8--color-blue-8#322BFE

Blue 9--color-blue-9#6E3CFE

Purple--color-purple#A34CFF

Purple 2--color-purple-2#D05DFF

Light Pink 2 (Gradient end)--color-light-pink-2#F66EFF

Pink--color-pink#FB64B6

Cyan (Success)--color-cyan#32AE88

Red (Error)--color-red#DB4F4F

Typography

Times (Canvas/Board base)--font-family-baseTimes

Roobert PRO (UI brand)--font-family-4Roobert PRO

Noto Sans (Multilingual)--font-family-3Noto Sans

Open Sans (Legibility)--font-family-6Open Sans

Nanum Pen Script (Board handwriting)--font-family-8Nanum Pen Script

Regular--font-weight-regular400

Medium--font-weight-medium500

Semibold--font-weight-semibold600

Bold--font-weight-bold700

Black--font-weight-black900

xs → sm → base → lg12px → 12.992px → 13.6px → 14px

xl → 2xl → 3xl16px → 17.23px → 18px

4xl → 5xl → 6xl → 48px22px → 24px → 40px → 48px

Display tight--letter-spacing-tight−1.44px

Body subtle--letter-spacing-ls-8−0.16px

Label (positive)--letter-spacing-ls-11+0.45px

Motion, Opacity & Layers

Instant (100ms)--duration-instant0.1s · ×5

Fast (150ms)--duration-fast0.15s · ×9

Normal (200ms)--duration-normal0.2s · ×31

Slow (250ms)--duration-slow0.25s · ×28

Slower (300ms)--duration-slower0.3s · ×1

400ms--duration-duration-60.4s · ×6

600ms (slow transition)--duration-duration-70.6s · ×2

Ease Out--easing-ease-outease-out · ×5

Linear--easing-linearlinear · ×3

Dim (50%)--opacity-500.5 · ×1

Muted (60%)--opacity-600.6 · ×1

Hover Dim (70%)--opacity-700.7 · ×7

Deep Background--z-1−1000

Canvas layers (z-2 → z-10)z-2 … z-101 → 10

Modal threshold--z-11 / z-12 / z-1349 / 50 / 51

INT_MAX −2--z-142,147,483,645

INT_MAX −1--z-152,147,483,646

INT_MAX (absolute top)--z-162,147,483,647

Borders & Spacing (selected)

Hairline--border-width-hairline1px · ×86

Thin--border-width-thin2px · ×24

Base (accent)--border-width-base12px · ×4

r7 (most used)--radius-r78px · ×64

r9--radius-r912px

r11--radius-r1120px

r12--radius-r1224px · ×15

r13--radius-r1340px

r15 (Circle)--radius-r1550%

r17 (Pill)--radius-r17999px · ×12

Space 3--space-34px · ×209

Space 5 (SM)--space-56px · ×94

Space 8--space-88px · ×127

Space 16--space-1612px · ×127

Space 40 (LG)--space-4024px · ×69

Space 80--space-8040px · ×52

Space 192--space-19280px · ×4

Shadcn / :root Semantic Tokens

Background--background#fff

Foreground--foreground#0a0a0a

Destructive--destructive#e40014

Muted--muted#f5f5f5

Muted Foreground--muted-foreground#737373

Border--border#e5e5e5

Ring--ring#a1a1a1

Chart 1--chart-1#f05100

Chart 2--chart-2#009588

Chart 3--chart-3#104e64

Chart 4--chart-4#fcbb00

Chart 5--chart-5#f99c00

Sidebar--sidebar#fafafa

Miro Design System (Light) · Generated 15/04/2026 · 76 color tokens · 50 type tokens · 25 spacing steps · 19 border radii · 3 border widths · 6 shadows · 7 durations · 2 easings · 16 z-index layers · 29 breakpoints · 3 opacity tokens