name: miro-design
version: alpha
description: >
  Miro is a light, dotted-grid "infinite canvas" brand: a white-to-soft-grey board
  surface scattered with faint dots, anchored by a single brand voltage — Miro
  yellow (the sticky-note hue) — and an indigo primary button. Display type is a
  bold rounded grotesque; the layout primitive is the board itself, populated with
  cards, sticky notes, and multiplayer presence tags in a rotating set of bright
  collaborator colors. Black is used for the secondary CTA; the energy is playful
  but the chrome stays crisp.
colors:
  # Brand
  primary: '#FFD02F'        # Miro yellow — logo, sticky notes, active tab pill
  on-primary: '#1A1A1A'     # ink on yellow (never white)
  # Action
  action: '#4262FF'         # indigo primary CTA ("Get started free")
  on-action: '#FFFFFF'
  action-secondary: '#1A1A1A' # black secondary CTA pill
  # Surface
  surface: '#FFFFFF'        # cards, panels
  surface-board: '#F0F0F2'  # the dotted board canvas
  surface-secondary: '#F5F5F7'
  # Text
  on-surface: '#0F0F0F'     # headings, primary ink
  on-surface-secondary: '#585A66' # body copy, captions
  on-surface-tertiary: '#9598A6'
  # Hairlines
  hairline: '#E0E0E4'       # card borders, dividers
  dotgrid: '#D6D6DC'        # the faint canvas dots
  # Collaborator presence (rotating multiplayer set)
  collab-green: '#4ECB71'
  collab-orange: '#FF9F43'
  collab-pink: '#FF6FB5'
  collab-red: '#FF6B6B'
  collab-teal: '#5CE0D8'
  collab-purple: '#9B6DFF'
  collab-blue: '#5C5CFF'    # cursor connector lines
  # Sticky note
  sticky: '#FCE94F'
typography:
  display:
    fontFamily: '"miro-display", "Plus Jakarta Sans", "Poppins", system-ui, sans-serif'
    fontSize: 64px # "You lead. Agents act." scale
    fontWeight: 700
    lineHeight: 68px
    letterSpacing: -1px
  headline-lg:
    fontFamily: '"miro-display", "Plus Jakarta Sans", sans-serif'
    fontSize: 44px # "Turn research into a shared direction"
    fontWeight: 700
    lineHeight: 48px
    letterSpacing: -0.5px
  headline-md:
    fontFamily: '"miro-display", "Plus Jakarta Sans", sans-serif'
    fontSize: 28px
    fontWeight: 600
    lineHeight: 34px
    letterSpacing: -0.25px
  stat:
    fontFamily: '"miro-display", "Plus Jakarta Sans", sans-serif'
    fontSize: 48px # "100M+", italic-leaning weight
    fontWeight: 800
    lineHeight: 52px
    letterSpacing: -0.5px
  body-lg:
    fontFamily: '"miro-text", Inter, system-ui, sans-serif'
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: normal
  body-md:
    fontFamily: '"miro-text", Inter, sans-serif'
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: normal
  label:
    fontFamily: '"miro-text", Inter, sans-serif'
    fontSize: 16px
    fontWeight: 600
    lineHeight: 20px
    letterSpacing: normal
  presence-tag:
    fontFamily: '"miro-text", Inter, sans-serif'
    fontSize: 14px
    fontWeight: 500
    lineHeight: 18px
    letterSpacing: normal
rounded:
  sm: 8px    # inputs, small cards
  md: 12px   # cards, sticky notes
  lg: 16px   # board cards / media
  xl: 24px   # large board panels
  full: 9999px # CTA pills, tab pills, presence tags, icon buttons
spacing:
  # base unit = 8px
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  xxxl: 80px
components:
  button-primary:
    background: '{colors.action}'
    textColor: '{colors.on-action}'
    typography: '{typography.label}'
    rounded: '{rounded.sm}'
    padding: '16px 28px'
  button-secondary:
    background: '{colors.action-secondary}'
    textColor: '{colors.on-action}'
    typography: '{typography.label}'
    rounded: '{rounded.sm}'
    padding: '14px 24px'
  tab-pill:
    activeBackground: '{colors.primary}'
    activeTextColor: '{colors.on-primary}'
    inactiveTextColor: '{colors.on-surface}'
    rounded: '{rounded.full}'
    padding: '14px 28px'
    containerBackground: '{colors.surface}'
  board-card:
    background: '{colors.surface}'
    rounded: '{rounded.lg}'
    boxShadow: '0 2px 8px rgba(0,0,0,0.06)'
  sticky-note:
    background: '{colors.sticky}'
    textColor: '{colors.on-primary}'
    rounded: '4px' # sticky notes keep a small radius
    boxShadow: '0 4px 12px rgba(0,0,0,0.08)'
  presence-tag:
    backgroundRule: 'one of {colors.collab-*} per user'
    textColor: '{colors.on-primary}'
    rounded: '{rounded.full}'
    padding: '6px 12px'
  email-input:
    background: '{colors.surface}'
    border: '1px solid {colors.hairline}'
    rounded: '{rounded.sm}'
    padding: '16px'
motion:
  easing-standard: 'cubic-bezier(0.2, 0, 0, 1)'
  easing-spring: 'spring(mass 1, stiffness 200, damping 24)' # cursors/tags drift in
  duration-fast: 150ms
  duration-standard: 250ms
icons:
  library: lucide # outline set; Miro ships its own toolbar glyphs
  style: outline
  stroke: 2px
  sizes: { sm: 16px, md: 20px, lg: 24px }
  colorRule: 'inherit on-surface ink; presence cursors carry collaborator colors'

Miro

Design spec — version alpha. Surfaces studied via Playwright: homepage (logged-out) — full-page screenshots + representative element probes. Brand color hexes reconciled from rendered captures and Miro's known yellow identity.

Overview

Miro presents itself as an infinite collaborative canvas, and the marketing site is literally that: a white-to-soft-grey board ({colors.surface-board} #F0F0F2) scattered with a faint dot grid ({colors.dotgrid}), populated with cards, sticky notes, and live collaborator tags. The single brand voltage is Miro yellow {colors.primary} #FFD02F — the sticky-note hue — which appears in the logo, the active tab pill ("Research"), and the omnipresent sticky notes. Primary actions, however, are carried on an indigo button {colors.action} #4262FF, with a black pill for the secondary action — a deliberate split that keeps yellow joyful rather than functional.

The signature move is multiplayer presence: bright name tags (Andrey green, Brian orange, Michael pink, Aida red, Brie teal) and thin blue cursor connectors drift across the board, selling real-time collaboration. Display type is a bold rounded grotesque (Miro's brand face), carried at 700–800 for big statements like "You lead. Agents act." and italic-leaning stats like "100M+". Shapes are friendly — 8–16px cards, fully-pill tabs and tags, and sticky notes that keep a tiny 4px radius like the real thing.

Colors

Brand. Miro yellow {colors.primary} #FFD02F is the identity, always with ink {colors.on-primary} #1A1A1A on top (never white). It marks the logo, the active tab pill, and sticky notes. Scarcity rule: yellow is for brand/sticky/active-state only — it never becomes a primary button.

Action. Primary CTA is indigo {colors.action} #4262FF (white label); the secondary is a black pill {colors.action-secondary} #1A1A1A. Both are crisp {rounded.sm} or pill shapes.

Surfaces. Cards and panels are white {colors.surface} #FFFFFF; the board canvas is {colors.surface-board} #F0F0F2 carrying the {colors.dotgrid} #D6D6DC dots.

Text. Ink {colors.on-surface} #0F0F0F; body {colors.on-surface-secondary} #585A66; meta {colors.on-surface-tertiary}.

Collaborator presence. A rotating bright set — {colors.collab-green}, {colors.collab-orange}, {colors.collab-pink}, {colors.collab-red}, {colors.collab-teal}, {colors.collab-purple} — assigned one-per-user for name tags and cursors, with {colors.collab-blue} #5C5CFF for the cursor connector lines. These are presence colors, not brand colors: use them only for multiplayer UI.

Typography

Two families: a rounded grotesque display (miro-display; substitute Plus Jakarta Sans or Poppins) for headlines and stats, and a neutral text sans (miro-text; substitute Inter) for body. Weight strategy: 700–800 for display/stats, 600 for labels and headline-md, 400 for body. Tracking is slightly negative on big display, normal on body.

Token	Family	Size	Weight	Tracking	Usage
display	miro-display	64px	700	-1px	Hero ("You lead. Agents act.")
headline-lg	miro-display	44px	700	-0.5px	Section headers
headline-md	miro-display	28px	600	-0.25px	Sub-sections, card titles
stat	miro-display	48px	800	-0.5px	Big numbers ("100M+", "250+")
body-lg	miro-text	20px	400	normal	Lead paragraphs
body-md	miro-text	16px	400	normal	Default body
label	miro-text	16px	600	normal	Buttons, nav
presence-tag	miro-text	14px	500	normal	Multiplayer name tags

Layout

Base unit 8px with xxxl 80px section rhythm. Content centers in a wide container; feature areas alternate a headline + body + CTA column against a board mock-up (dotted canvas with cards, sticky notes, presence tags). Tabs ("Research / Roadmaps / Diagrams / Workshops") sit in a white pill container with the active tab filled yellow. Stat rows go 3-up. The board metaphor — dotted background, draggable cards — recurs throughout.

Elevation & Depth

Soft and layered, befitting a canvas. Board cards float on the grey board with a gentle 0 2px 8px rgba(0,0,0,0.06) shadow; sticky notes get a slightly stronger 0 4px 12px rgba(0,0,0,0.08) lift. The dotted board itself reads as the lowest layer. No hard borders on board cards; hairlines appear on inputs and structural dividers.

Shapes

Radius vocabulary: {rounded.sm} 8px (inputs, CTAs), {rounded.md} 12px (cards/sticky), {rounded.lg} 16px (board cards), {rounded.xl} 24px (large panels), {rounded.full} (tab pills, presence tags, icon buttons). Note the sticky note keeps a deliberately small 4px radius to feel like paper. Overall: rounded and playful, but controls stay crisp.

Components

• button-primary — indigo #4262FF, white 600 label, 8px radius ("Get started free").
• button-secondary — black #1A1A1A pill/rounded, white label ("Contact sales", "Explore research").
• tab-pill — white container; active tab filled Miro yellow with ink text.
• board-card — white, 16px radius, soft shadow, sits on the dotted board.
• sticky-note — yellow #FCE94F, ink text, tiny 4px radius, soft lift.
• presence-tag — pill in one collaborator color with ink text, paired with a matching cursor.
• email-input — white, 1px hairline, 8px radius.

Motion

Confident and slightly springy: {motion.duration-fast} 150ms hovers, {motion.duration-standard} 250ms transitions, and spring physics for cursors and presence tags drifting onto the board (the multiplayer "someone just joined" feel). Easing is cubic-bezier(0.2, 0, 0, 1). No parallax; motion sells collaboration, not spectacle.

Iconography

Outline glyphs (Lucide as substitute for Miro's toolbar set), 2px stroke, 16/20/24px, inheriting {colors.on-surface} ink. The exception is presence cursors, which carry their collaborator color.

Do's and Don'ts

• Do keep the canvas light with a faint dot grid — it's the brand's "infinite board."
• Do reserve Miro yellow for the logo, active tab, and sticky notes; always pair it with ink, never white.
• Do carry primary actions on indigo #4262FF and secondary on black — not on yellow.
• Do use the collaborator color set only for multiplayer presence (tags + cursors).
• Do keep sticky notes at a tiny 4px radius so they read as paper.
• Don't make yellow a button or a large fill.
• Don't drop the dot grid from board mock-ups — it's a core motif.
• Don't over-tint icons; chrome icons are ink.

Known Gaps

• The dotted board, Miro yellow brand/sticky, indigo primary + black secondary CTAs, multiplayer presence tags, and the bold rounded display type were observed directly from full-page captures. Exact hexes (#FFD02F, #4262FF, the collaborator set) are reconciled from rendered screenshots and Miro's known identity — verify against brand tokens.
• The font names miro-display / miro-text are placeholders for Miro's proprietary faces; Plus Jakarta Sans/Inter are the closest open-source substitutes.
• The authenticated board app (toolbar, frames, templates) was not probed; tokens describe the marketing site and its board mock-ups.