Miro — design system & UI screens
Innovation-workspace landing; an email-capture hero over a BPMN process-diagram board with AI agents. Top keynote promo banner, yellow and violet accents on white.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/miro.
Decoded design system
Miro's decoded design system: background #F0F0F0, text #0A0A0B, accent #3859FF, link #0000EE, primary #3859FF; type scale h1 56px / h2 48px / body 16px; 4px spacing base; 8px base radius. The single interactive/action color is #3859FF — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #F0F0F0 |
| surface | #E2E2E2 |
| border | #CDCDCD |
| text | #0A0A0B |
| text_muted | #616162 |
| primary | #3859FF |
| accent | #3859FF |
| link | #0000EE |
| secondary | #FDE050 |
| button_bg | #3859FF |
| button_text | #FFFFFF |
Using these colors
- Action color
#3859FF— the single interactive color; only on things you click or must notice, never large fills. primary,accent,button_bgare all#3859FF— one role, not several (the action color).- accent
#3859FF— THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed. - link
#0000EE— inline text links and link-styled controls. - secondary
#FDE050— optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.
Typography
- Heading: Roobert PRO Medium
- Body: Roobert PRO
- h1: 56px
- h2: 48px
- body: 16px
Spacing
- base unit: 4px
- scale: 4px, 6px, 7px, 8px, 9px, 12px, 16px, 20px, 24px, 28px
Radii
- base: 8px
- button: 8px
Shadows (elevation)
- subtle:
rgba(0, 0, 0, 0.18) 0px 0.602187px 0.602187px -1.25px, rgba(0, 0, 0, 0.16) 0px 2.28853px 2.28853px -2.5px, rgba(0, 0, 0, 0.06) 0px 10px 10px -3.75px - card:
rgba(0, 0, 0, 0.06) 0px 1px 8px 0px
Motion
Micro-interactions run at 150ms (dominant) with ease.
- durations: 150ms · 200ms · 250ms
- easings:
ease·cubic-bezier(0.4, 0, 0.2, 1) - animated properties: transform, background, color, background-color
Native design tokens
| Token | Value |
|---|---|
--background | lab(100% 0 0) |
--foreground | lab(2.75381% 0 0) |
--card | lab(100% 0 0) |
--card-foreground | lab(2.75381% 0 0) |
--popover | lab(100% 0 0) |
--popover-foreground | lab(2.75381% 0 0) |
--primary-foreground | lab(98.26% -.0000298023 0) |
--secondary-foreground | lab(7.78201% -.0000149012 0) |
--muted | lab(96.52% -.0000298023 0) |
--muted-foreground | lab(48.496% 0 0) |
…and 27 more measured on the page.
Button states (measured)
- primary hover: background
#314CD9 - primary focus: box-shadow
rgb(56, 89, 255) 0px 0px 0px 1px, rgb(233, 234, 239) 0px 0px 0px 2px, rgb(56, 89, 255) 0px 0px 0px 5px, rgb(233, 234, 239) 0px 0px 0px 9px
Layout (measured)
- container max-width:
1170px - nav: 1px absolute
- common grid: 2 columns
Motion choreography (measured)
Load order: div.otFlat
Scroll reveal: 6 elements rest at opacity 0, translateY(40px), animate in over 600ms.
Overlay recipe (measured)
dialog panel: lab(100 0 0) · radius 0px · enter 500ms linear
Input (measured)
height 48px · radius 8px · focus ring 1px auto rgb(16, 16, 16)
Responsive (measured)
- breakpoints: 576px · 768px · 1024px · 1280px · 1366px · 1920px
- mobile (390px): hero 32px · nav inline
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →