prismdinstrument

EXTRACTED · 10 SECTIONS · 51 COLORS · GRADE B

miro.com

Accent #fde050 · Roobert PRO — every value below measured via getComputedStyle(), not asserted by hand.

colors

faces

shadows

keyframes

DESIGN.md tokens.json

real render · source of truth

miro.com is built on a soft, near-white canvas (rgb(240, 240, 240)). The system uses rgb(28, 28, 30) as a near-neutral accent (low saturation). Moderately rounded CTAs (8px) — modern SaaS standard, neither sharp nor pill alongside Roobert PRO Medium as the primary typeface. Roobert PRO Medium is paired with Noto Sans for secondary roles. A layered elevation system (5 distinct shadows) building a clear front-to-back hierarchy. Motion is a first-class concern — 14 keyframe animations plus transition-driven interactions.

Color — roles, semantics & the full census

51 colors measured · click any swatch to copy

Canvas

#f0f0f0

AAA 16.57:1

Ink

#111111

AAA 16.57:1

Accent

#1c1c1e

AAA 14.93:1

Line

#cdd8ff

Fail 1.24:1

Semantic states

error#f24726success#00b473warning#fde050

3 semantic roles found.

51 colors mined from the live renderexpand

Type — the ladder, in the real face

5 roles · rendered live in the real sans-serif (captured woff2) · lines are editable, click any spec to copy

display xl

display-xl56px · 500

display md

display-md40px · 400 · ×1.40

body

body12px · 400 · ×3.33

button

button16px · 900 · ×0.75

mono

mono16px · 400 · ×1.00

Depth — elevation is extracted, not invented

5 box-shadows measured on the live page · click a tile to copy its raw value

shadow-1

shadow-2

shadow-3

shadow-4

shadow-5

Motion — easings, transitions & live keyframes

3 easing curves · 14 keyframes · hover a tile to preview

Easing & transitions

transition-2cubic-bezier(0.4, 0, 0.2, 1)

transition-4cubic-bezier(0.16, 1, 0.3, 1)

tw-default-transition-timing-functioncubic-bezier(.4,0,.2,1)

14 keyframe animations extracted

pulse

enter

exit

accordion-down

accordion-up

collapsible-down

collapsible-up

float-top-left

float-bottom-left

float-bottom-right

testimonial-card-reveal

ctaPulse

Spacing & radius, made spatial

9 spacing steps · 7 radii · bars are exact px widths

Spacing scale

xxs · 2px

xs · 4px

sm · 8px

md · 12px

base · 16px

lg · 24px

xl · 32px

2xl · 48px

3xl · 54px

Radius

none
0px

xs
8px

sm
12px

md
20px

lg
24px

xl
40px

full
999px

Components — the closed vocabulary

10 component families · 27 variants counted on the live DOM

Component	Variants found
buttons	×10
heading H2	×4
heading H3	×3
footer Links	×2
heading H1	×2
links	×2
inputs	×1
cards	×1
nav Links	×1
pricing Card	×1

Component style specs (§4)expand

Buttons

Ghost

Background: transparent
Text: #1c1c1e {colors.primary}
Padding: 4px
Radius: 8px
Font: 12px weight 400
Use: Subtle action, toolbar, nav button

Primary Brand

Background: #fde050 {colors.semantic-warning}
Text: #1c1c1e {colors.primary}
Padding: 8px 12px
Radius: 8px
Font: 16px weight 900
Use: Primary CTA / brand action

Ghost

Background: transparent
Text: #1c1c1e {colors.primary}
Padding: 8px 4px 8px 8px
Radius: 8px
Font: 16px weight 500
Use: Subtle action, toolbar, nav button

Outline

Background: transparent
Text: #1c1c1e {colors.primary}
Padding: 8px 12px
Radius: 8px
Border: 1px solid rgb(199, 202, 213)
Font: 16px weight 600
Use: Secondary action with border

Secondary

Background: #1c1c1e {colors.primary}
Text: #ffffff {colors.on-primary}
Padding: 8px 12px
Radius: 8px
Font: 16px weight 600
Use: Secondary action

Icon Button

Background: #ffffff {colors.on-primary}
Text: #1c1c1e {colors.primary}
Padding: 12px 12px 12px 9px
Radius: 50%
Shadow: rgba(0, 0, 0, 0.18) 0px 0.602187px 0.602187px -1.25px, rgba(0, 0, 0, 0.16) 0px 2...
Font: 12px weight 400
Use: Toolbar/UI icons

Icon Button

Background: #ffffff {colors.on-primary}
Text: #1c1c1e {colors.primary}
Padding: 12px 9px 12px 12px
Radius: 50%
Shadow: rgba(0, 0, 0, 0.18) 0px 0.602187px 0.602187px -1.25px, rgba(0, 0, 0, 0.16) 0px 2...
Font: 12px weight 400
Use: Toolbar/UI icons

Layout — structure & dimensions

5 layout metrics measured

max Width1200px

header Height72px

sidebar Width0px

gap16px

container Padding24px

Responsive — real breakpoints

26 media-query stops read from the live CSS

400px

425px

426px

460px

476px

530px

550px

576px

600px

767px

768px

769px

809px

810px

890px

896px

897px

1023px

1024px

1199px

1200px

1280px

1365px

1366px

1700px

1920px

Do's & Don'ts

17 enforceable rules pulled verbatim from the spec

Use Off-White (`#f0f0f0`) as the page background — it's intentionally not pure white

Use negative letter-spacing (-1.68px) at display sizes for compressed, editorial headlines

Use the extracted shadow patterns for elevation — they are tuned to match the brand palette

Use full-pill radius (9999px) only for specific elements (avatars, pills, toggles)

Use Primary (`#1c1c1e`) as the primary accent — it's the brand's signature interactive color

Use 8px border-radius on buttons — the standard corner rounding for interactive elements

Style form inputs with a `1px solid rgb(233, 234, 239)` border — use border-based inputs, not floating labels or underline-only

Respect the 4px–32px spacing range — the design uses a wide scale for visual breathing room

Each card includes a top image — imagery is part of the card identity, not optional

Don't

Don't use pure white (`#ffffff`) as a page background — the warm tone is part of the brand identity

Don't increase letter-spacing on headings — the type is designed to run tight at scale

Don't invent new shadow values — use only the extracted shadow levels

Don't apply pill radius on rectangular buttons or cards — it's reserved for specific interactive elements

Don't introduce additional saturated accent colors — the palette is intentionally controlled

Don't remove the input border — the border is the primary affordance indicator for form fields

Don't make the nav sticky — this design lets it scroll away to maximize content focus

Don't put a CTA button in the nav — this design uses links only at the top

Agent guide & export

Paste-ready prompt + the real files behind this page

Build a UI in the miro.com design system. Canvas #f0f0f0 · ink #111111 · accent #1c1c1e. Type: Roobert PRO — respect the size/weight ladder in §3. Radius, spacing, shadow: use only the extracted scales (no magic numbers). Full spec follows — paste the DESIGN.md below into your agent.

Every value above was getComputedStyle-verified.

$ npx prismd add miro

DESIGN.md · narrative spec tokens.json

A · Instrument B · Press