Miro

Overview

Miro positions itself as the AI-powered visual workspace through a confident, slightly playful brand voice. The homepage opens with a stark white canvas anchored by a small canary-yellow Miro wordmark in the top-left, a black-pill primary CTA "Get started free" and a secondary "Book a demo" outline pill — then dramatic real-Miro-board mockup imagery (sticky notes, kanban, mind maps) carries the visual weight. Across deeper surfaces, the system breaks open: pastel feature cards (rose, teal, coral, yellow) echo the actual sticky-note color palette of the live whiteboard product, and customer story cards reuse those tints to differentiate brand vignettes.

Roobert PRO — Miro's custom display face — anchors every typographic surface, from the 80px hero display down to 11px micro labels. The face's slightly rounded, geometric character pairs naturally with the playful product photography and the friendly product positioning. Black-pill primary buttons (`{rounded.full}`) dominate marketing CTAs; the brand color, signature canary yellow ({colors.brand-yellow}), is reserved for the wordmark, top promo banners, and "yellow tag" feature pills — never as a primary CTA. The 4-tier pricing comparison (Free / Starter / Business / Enterprise) leads into the densest surface in the system: a feature comparison table that runs ~80 rows deep across multiple section dividers.

**Key Characteristics:**

• Stark white canvas + Miro wordmark in canary yellow ({colors.brand-yellow}) as the recognizable opening signature
• Black-pill primary CTAs ({colors.primary} + `{rounded.full}`) as the dominant interactive element
• Pastel feature cards (yellow, rose, coral, teal, mint) that echo the actual sticky-note palette
• Roobert PRO across every UI surface; geometric, slightly rounded character
• Real Miro-board mockup imagery used as feature illustrations
• 4-tier pricing card grid + dense feature comparison table
• Massive dark footer ({colors.footer-bg}) with multi-column links + app-store badges

Colors

> Source pages: miro.com/ (homepage), /pricing/ (4-tier comparison), /products/ai-workflows/ (AI product), /agile/ (vertical landing), /customers/ (story directory). Token coverage was identical across all five pages.

Brand & Accent

• **Miro Yellow** ({colors.brand-yellow}): The brand's recognizable canary yellow — wordmark color, top promo banner, "yellow tag" pills
• **Yellow Deep** ({colors.brand-yellow-deep}): Darker variant for hover states and emphasis
• **Yellow Light** ({colors.yellow-light}): Pale yellow background tint for tag chips
• **Yellow Dark** ({colors.yellow-dark}): Yellow-tag text color (dark olive) for chip foreground
• **Brand Blue** ({colors.brand-blue}): Action blue for inline links and featured-pricing-tier border
• **Blue Pressed** ({colors.blue-pressed}): Pressed-state blue
• **Brand Coral** ({colors.brand-coral}): Coral accent for warm callouts
• **Coral Light** ({colors.coral-light}): Pale coral for feature card backgrounds
• **Coral Dark** ({colors.coral-dark}): Coral-tag text color (deep wine)
• **Brand Rose** ({colors.brand-rose}): Soft rose-pink for feature card variants
• **Brand Teal** ({colors.brand-teal}): Brand teal
• **Teal Light** ({colors.teal-light}): Pale teal for feature card backgrounds
• **Moss Dark** ({colors.moss-dark}): Deep teal-green text color
• **Brand Pink** ({colors.brand-pink}): Pale pink for soft callouts
• **Brand Orange Light** ({colors.brand-orange-light}): Soft orange for feature card backgrounds

Surface

• **Canvas White** ({colors.canvas}): Page background and primary card surface
• **Surface** ({colors.surface}): Subtle section backgrounds, search-pill rest
• **Surface Soft** ({colors.surface-soft}): Quieter section divisions
• **Surface Yellow** ({colors.surface-yellow}): Pale yellow-tinted surface for tag chip
• **Surface Pricing Featured** ({colors.surface-pricing-featured}): Pale lavender for featured pricing tier
• **Hairline** ({colors.hairline}): 1px borders and primary dividers
• **Hairline Soft** ({colors.hairline-soft}): Quieter table-row dividers
• **Hairline Strong** ({colors.hairline-strong}): Stronger 1px border for inputs

Text

• **Ink Deep** ({colors.ink-deep}): Headlines on lighter feature cards
• **Ink** ({colors.ink}): Primary headlines and body text
• **Charcoal** ({colors.charcoal}): Body emphasis text
• **Slate** ({colors.slate}): Secondary text, metadata
• **Steel** ({colors.steel}): Tertiary text, footer links
• **Stone** ({colors.stone}): Captions, muted labels
• **Muted** ({colors.muted}): Disabled labels, input placeholders
• **On Dark** ({colors.on-dark}): White text on dark surfaces
• **On Dark Muted** ({colors.on-dark-muted}): Reduced-opacity white on dark

Semantic

• **Success Accent** ({colors.success-accent}): Confirmation/success indicator green
• **Brand Red** ({colors.brand-red}): Soft red for error backgrounds
• **Brand Red Dark** ({colors.brand-red-dark}): Stronger red for error borders

Typography

Font Family

**Roobert PRO** (primary): Miro's custom geometric sans-serif typeface. Used across every UI surface from oversized 80px hero displays to 11px micro labels. The face has a slightly rounded, friendly character that matches the brand's playful product positioning. Fallbacks: Noto Sans, -apple-system, BlinkMacSystemFont, sans-serif.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |

|---|---|---|---|---|---|

| `{typography.hero-display}` | 80px | 500 | 1.05 | -2px | Marketing hero ("See how teams get great done with Miro") |

| `{typography.display-lg}` | 60px | 500 | 1.10 | -1.5px | Major section openers |

| `{typography.heading-1}` | 48px | 500 | 1.15 | -1px | Page-level headlines |

| `{typography.heading-2}` | 36px | 500 | 1.20 | -0.5px | Subsection headlines |

| `{typography.heading-3}` | 28px | 500 | 1.25 | 0 | Card titles |

| `{typography.heading-4}` | 22px | 500 | 1.30 | 0 | Feature tile titles |

| `{typography.heading-5}` | 18px | 500 | 1.40 | 0 | FAQ questions, smaller cards |

| `{typography.subtitle}` | 18px | 400 | 1.50 | 0 | Hero subtitle |

| `{typography.body-md}` | 16px | 400 | 1.50 | 0 | Primary body text |

| `{typography.body-md-medium}` | 16px | 500 | 1.50 | 0 | Logo wall labels |

| `{typography.body-sm}` | 14px | 400 | 1.50 | 0 | Secondary body, table cells |

| `{typography.body-sm-medium}` | 14px | 500 | 1.50 | 0 | Filter dropdowns, button labels |

| `{typography.caption}` | 13px | 400 | 1.40 | 0 | Helper text |

| `{typography.caption-bold}` | 13px | 600 | 1.40 | 0 | Badge labels, tag chips |

| `{typography.micro}` | 12px | 500 | 1.40 | 0 | Footer microcopy |

| `{typography.micro-uppercase}` | 11px | 600 | 1.40 | 0.5px | Section dividers in tables |

| `{typography.button-md}` | 14px | 500 | 1.30 | 0 | Pill button labels |

| `{typography.stat-display}` | 64px | 500 | 1.10 | -1.5px | "100M+ users" stat callouts |

Principles

• **Tight hero leading** (1.05) creates magazine-grade display headlines on the 80px hero
• **Negative letter-spacing progression** — display sizes use -2px to -1.5px; smaller headings relax to 0
• **Stat-display token** (64px / 500) for marketing stat callouts
• **Single weight scale** — 400 (body), 500 (medium emphasis + headings), 600 (badges and uppercase). Roobert PRO does not use 700 in this system.

Layout

Spacing System

• **Base unit**: 4px (8px primary increment)
• **Tokens**: `{spacing.xxs}` (4px) · `{spacing.xs}` (8px) · `{spacing.sm}` (12px) · `{spacing.md}` (16px) · `{spacing.lg}` (20px) · `{spacing.xl}` (24px) · `{spacing.xxl}` (32px) · `{spacing.xxxl}` (40px) · `{spacing.section-sm}` (48px) · `{spacing.section}` (64px) · `{spacing.section-lg}` (96px) · `{spacing.hero}` (120px)
• **Section rhythm**: Marketing pages use `{spacing.section-lg}` (96px); pricing comparison tightens to `{spacing.section}` (64px); customer story stack uses `{spacing.xxl}` (32px)
• **Card internal padding**: `{spacing.xl}` (24px) for compact cards; `{spacing.xxl}` (32px) for feature panels

Grid & Container

• Marketing pages use 1280px max-width with 32px gutters
• Pricing page renders 4-tier card row at desktop (Free / Starter / Business / Enterprise)
• Customer stories page uses 2-column grid with filter dropdowns
• AI Workflows page uses 2-column hero, then 3-up feature grid

Whitespace Philosophy

Marketing surfaces give content generous breathing room — `{spacing.hero}` (120px) hero padding gives the small wordmark room to breathe. Pricing surfaces tighten dramatically.

Elevation & Depth

The system runs predominantly flat with strategic depth on hero mockups.

| Level | Treatment | Use |

|---|---|---|

| 0 (flat) | No shadow; `{colors.hairline-soft}` border | Default cards, table rows, form inputs |

| 1 (subtle) | `rgba(5, 0, 56, 0.04) 0px 1px 2px 0px` | Subtle hover-elevated tiles |

| 2 (card) | `rgba(5, 0, 56, 0.06) 0px 4px 12px 0px` | Standard feature cards |

| 3 (mockup) | `rgba(5, 0, 56, 0.08) 0px 12px 32px -4px` | Hero whiteboard mockup framing |

| 4 (modal) | `rgba(5, 0, 56, 0.12) 0px 16px 48px -8px` | Modals, dropdowns |

Decorative Depth

• The atmospheric depth on Miro's hero comes from the live-product-board mockup illustrations — sticky notes layered at z-offsets, color-block tints behind whiteboard frames
• Pastel feature cards carry their own visual weight via saturated background color
• Customer-story cards layer dark photographic content with overlay scrims

Shapes

Border Radius Scale

| Token | Value | Use |

|---|---|---|

| `{rounded.xs}` | 4px | Small chips, micro-controls |

| `{rounded.sm}` | 6px | Discount badges |

| `{rounded.md}` | 8px | Inputs, search-pill |

| `{rounded.lg}` | 12px | Standard cards, table containers |

| `{rounded.xl}` | 16px | Pricing cards, feature panels |

| `{rounded.xxl}` | 20px | Larger feature cards |

| `{rounded.xxxl}` | 28px | Pastel feature cards (yellow, rose, coral, teal) |

| `{rounded.feature}` | 32px | Hero CTA banner cards |

| `{rounded.full}` | 9999px | All buttons, pill tabs, badges |

Photography Geometry

• Real Miro board mockups render with `{rounded.xl}` (16px) corners and a subtle drop shadow
• Customer story cards use `{rounded.xxxl}` (28px) corners with full-bleed photography
• Template card thumbnails use `{rounded.xl}` (16px) with photographic content
• Customer logos wall presents wordmarks inline at consistent 100px height

Components

> Per the no-hover policy, hover states are NOT documented. Default and pressed/active states only.

Buttons

**`button-primary`** — Black pill primary CTA, the dominant action ("Get started free").

• Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.button-md}`, padding `12px 24px`, rounded `{rounded.full}`.
• Pressed state `button-primary-pressed` lifts to `{colors.charcoal}`.
• Disabled state `button-primary-disabled` uses `{colors.hairline}` background and `{colors.muted}` text.

**`button-yellow`** — Brand-yellow pill for moments of brand emphasis.

• Background `{colors.brand-yellow}`, text `{colors.primary}`, typography `{typography.button-md}`, padding `12px 24px`, rounded `{rounded.full}`.

**`button-blue`** — Brand-blue pill for inline action callouts.

• Background `{colors.brand-blue}`, text `{colors.on-primary}`, typography `{typography.button-md}`, padding `12px 24px`, rounded `{rounded.full}`.

**`button-secondary`** — Outlined pill for secondary actions ("Book a demo").

• Background transparent, text `{colors.ink}`, border `1px solid {colors.hairline-strong}`, typography `{typography.button-md}`, padding `12px 24px`, rounded `{rounded.full}`.

**`button-on-dark`** — White pill for dark CTA banners.

• Background `{colors.on-dark}`, text `{colors.primary}`, typography `{typography.button-md}`, padding `12px 24px`, rounded `{rounded.full}`.

**`button-ghost`** — Quieter rectangular ghost button.

• Background transparent, text `{colors.ink}`, typography `{typography.button-md}`, padding `8px 12px`, rounded `{rounded.md}`.

**`button-link`** — Inline text link.

• Background transparent, text `{colors.brand-blue}`, typography `{typography.body-sm-medium}`, padding `0`.

**`button-icon-circular`** — 36×36px circular utility button.

• Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline}`, rounded `{rounded.full}`.

Cards & Containers

**`card-base`** — Standard content card.

• Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xl}`, border `1px solid {colors.hairline-soft}`.

**`card-feature`** — White feature card with larger 28px corners.

• Background `{colors.canvas}`, rounded `{rounded.xxxl}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline-soft}`.

**`card-feature-yellow`** — Pastel-yellow feature card.

• Background `{colors.brand-yellow}`, text `{colors.primary}`, rounded `{rounded.xxxl}`, padding `{spacing.xxl}`.

**`card-feature-coral`** — Pastel-coral feature card variant.

• Background `{colors.coral-light}`, text `{colors.primary}`, rounded `{rounded.xxxl}`, padding `{spacing.xxl}`.

**`card-feature-teal`** — Pastel-teal feature card variant.

• Background `{colors.teal-light}`, text `{colors.primary}`, rounded `{rounded.xxxl}`, padding `{spacing.xxl}`.

**`card-feature-rose`** — Pastel-rose feature card variant.

• Background `{colors.rose-light}`, text `{colors.primary}`, rounded `{rounded.xxxl}`, padding `{spacing.xxl}`.

**`card-customer-story`** — Customer story card.

• Background `{colors.canvas}`, rounded `{rounded.xxxl}`, padding `0` (image fills the card), border `1px solid {colors.hairline-soft}`.

**`card-stat`** — Stat-row cell for "100M+ users".

• Background transparent, text `{colors.ink}`, typography `{typography.stat-display}`, padding `{spacing.lg}`.

**`pricing-card`** — Standard pricing tier card.

• Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xxl}`, border `1px solid {colors.hairline}`.

**`pricing-card-featured`** — Featured pricing tier (Business — lavender background + blue border).

• Background `{colors.surface-pricing-featured}`, rounded `{rounded.xl}`, padding `{spacing.xxl}`, border `2px solid {colors.brand-blue}`.

**`pricing-card-enterprise`** — Dark-canvas enterprise tier card.

• Background `{colors.primary}`, text `{colors.on-primary}`, rounded `{rounded.xl}`, padding `{spacing.xxl}`.

Inputs & Forms

**`text-input`** — Standard text field.

• Background `{colors.canvas}`, text `{colors.ink}`, border `1px solid {colors.hairline-strong}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`, height 44px.

**`text-input-focused`** — Activated state.

• Border switches to `2px solid {colors.brand-blue}`.

**`search-pill`** — Search bar.

• Background `{colors.surface}`, text `{colors.steel}`, typography `{typography.body-sm}`, rounded `{rounded.md}`, height 40px, border `1px solid {colors.hairline}`.

**`filter-dropdown`** — Pill-shaped filter dropdown ("Company use" / "Industry" / "Use case").

• Background `{colors.canvas}`, text `{colors.ink}`, typography `{typography.body-sm-medium}`, rounded `{rounded.full}`, padding `{spacing.xs} {spacing.md}`, border `1px solid {colors.hairline-strong}`.

Tabs

**`pill-tab`** + **`pill-tab-active`** — Pill-style tab nav.

• Inactive: background `{colors.canvas}`, text `{colors.steel}`, border `1px solid {colors.hairline}`, padding `{spacing.xs} {spacing.md}`, rounded `{rounded.full}`.
• Active: background `{colors.primary}`, text `{colors.on-primary}`.

**`toggle-monthly-yearly`** — Two-state pill toggle (Monthly / Annual on pricing).

• Background `{colors.surface}`, rounded `{rounded.full}`, padding `4px`.

Badges & Status

**`badge-promo`** — Yellow promo banner badge.

• Background `{colors.brand-yellow}`, text `{colors.primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.

**`badge-tag-yellow`** — Soft-yellow feature tag chip ("Yellow" tag on AI Workflows page).

• Background `{colors.surface-yellow}`, text `{colors.yellow-dark}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.

**`badge-tag-purple`** — Lavender feature tag chip ("AI agent" tag).

• Background `{colors.surface-pricing-featured}`, text `{colors.brand-blue}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.

**`badge-tag-coral`** — Coral feature tag chip variant.

• Background `{colors.coral-light}`, text `{colors.coral-dark}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.

**`badge-success`** — Green success indicator.

• Background `{colors.success-accent}`, text `{colors.on-primary}`, typography `{typography.caption-bold}`, rounded `{rounded.full}`, padding `4px 10px`.

**`badge-discount`** — Yellow rectangular discount pill ("Save 15%").

• Background `{colors.brand-yellow}`, text `{colors.primary}`, typography `{typography.caption-bold}`, rounded `{rounded.sm}`, padding `2px 6px`.

**`promo-banner`** — Sticky black promo strip ABOVE the top nav.

• Background `{colors.primary}`, text `{colors.on-primary}`, typography `{typography.body-sm-medium}`, padding `{spacing.sm} {spacing.md}`. Carries inline yellow "GET YOUR SPOT" pill.

Tables

**`comparison-table`** — Pricing feature comparison table.

• Background `{colors.canvas}`, text `{colors.ink}`, typography `{typography.body-sm}`, rounded `{rounded.md}`, border `1px solid {colors.hairline}`.

**`comparison-row`** — Individual feature row.

• Background `{colors.canvas}`, text `{colors.ink}`, padding `{spacing.md} {spacing.lg}`, bottom border `1px solid {colors.hairline-soft}`.

Documentation Components

**`whiteboard-mockup`** — Real Miro-board UI rendered as feature illustration.

• Background `{colors.canvas}`, rounded `{rounded.xl}`, border `1px solid {colors.hairline-soft}`, shadow `rgba(5, 0, 56, 0.08) 0px 12px 32px -4px`.

**`template-card`** — Template thumbnail card.

• Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.md}`, border `1px solid {colors.hairline}`.

**`industry-tile`** — Industry-vertical tile.

• Background `{colors.canvas}`, rounded `{rounded.xl}`, padding `{spacing.xl}`, border `1px solid {colors.hairline-soft}`.

**`faq-accordion-item`** — FAQ panel item.

• Background `{colors.canvas}`, rounded `{rounded.md}`, padding `{spacing.xl}`, bottom border `1px solid {colors.hairline}`.

**`logo-wall-item`** — Customer logo wordmark cell.

• Background transparent, text `{colors.steel}`, typography `{typography.body-md-medium}`, padding `{spacing.lg}`.

**`capterra-badge`** — Review/rating badge in the footer.

• Background `{colors.canvas}`, text `{colors.ink}`, typography `{typography.caption}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`, border `1px solid {colors.hairline}`.

**`app-store-badge`** — App store / Google Play download pill.

• Background `{colors.canvas}`, text `{colors.primary}`, typography `{typography.caption-bold}`, rounded `{rounded.md}`, padding `{spacing.sm} {spacing.md}`.

Navigation

**Top Navigation (Marketing)** — Sticky white bar with yellow Miro wordmark + horizontal links + right-side CTAs.

• Background `{colors.canvas}`, height ~64px.
• Left: Yellow square Miro wordmark + horizontal link list (Product, Solutions, Resources).
• Right: "Login / Pricing / Contact sales" links + black-pill "Get started free".

Signature Components

**`hero-band-marketing`** — Marketing hero band.

• Background `{colors.canvas}`, padding `{spacing.hero}`.
• Layout: centered headline in `{typography.hero-display}`, centered subtitle, centered button row, then whiteboard mockup illustration below.

**`cta-banner-dark`** — Dark CTA banner at the bottom of feature pages.

• Background `{colors.primary}`, text `{colors.on-primary}`, rounded `{rounded.feature}`, padding `{spacing.section}`. Centered headline + subtitle + `button-on-dark` "Get started free".

**`footer-region`** — Massive multi-column dark footer.

• Background `{colors.footer-bg}`, padding `{spacing.section} {spacing.xxl}`.
• 6-column link grid (Product / Solutions / Tools / Resources / Company / Plans & Pricing).
• Section headings in `{typography.body-md-medium}` `{colors.on-dark}`.

**`footer-link`** — Individual link in the footer.

• Background transparent, text `{colors.on-dark-muted}`, typography `{typography.body-sm}`, padding `{spacing.xxs} 0`.

Do's and Don'ts

Do

• Reserve `{colors.brand-yellow}` for the wordmark, top promo banner, and "yellow tag" chips
• Use `{colors.primary}` (black) as the dominant CTA on all surfaces
• Pair pastel feature cards (yellow, rose, coral, teal) with white feature cards in the same viewport
• Apply `{rounded.full}` to every button, every pill tab, every status badge
• Apply `{rounded.xxxl}` (28px) to pastel feature cards
• Use real Miro-board mockups as feature illustrations
• Maintain Roobert PRO across every UI surface

Don't

• Don't use `{colors.brand-yellow}` on standard CTAs or large background surfaces
• Don't introduce additional accent colors beyond yellow + brand pastels
• Don't soften corners on buttons; the pill is a brand signature
• Don't reduce hero leading below 1.05
• Don't apply heavy shadows on flat documentation cards; reserve elevation for whiteboard mockups
• Don't use stock photography — show the live product board UI

Responsive Behavior

Breakpoints

| Name | Width | Key Changes |

|---|---|---|

| Mobile (small) | < 480px | Single column. Hero scales to 36px. Pill nav collapses to hamburger. Pricing tiers stack 1-up. |

| Mobile (large) | 480 – 767px | Feature tiles 2-up. Hero scales to 48px. |

| Tablet | 768 – 1023px | 2-column feature grids. Pill-tab nav returns. |

| Desktop | 1024 – 1279px | 4-tier pricing card row. Customer story grid 2-up. Hero at 64px. |

| Wide Desktop | ≥ 1280px | Full hero presentation, 80px hero display. |

Touch Targets

• Pill buttons render at 40–44px effective height — at WCAG AAA floor
• Circular icon buttons: 36×36px desktop → 44×44px mobile
• Form inputs render at 44px height
• Filter dropdowns render at ~36px tall — bumps to 44px on mobile

Collapsing Strategy

• **Promo banner** stays full-width; truncates at < 480px
• **Top nav** below 1024px collapses to hamburger
• **Hero band**: 2-column hero collapses to stacked at < 1024px
• **Pricing comparison**: 4-column tiers → 2-column tablet → 1-column mobile; comparison table becomes horizontal-scroll
• **Customer story grid**: 2-up → 1-up at < 768px
• **Hero typography**: 80px → 60px tablet → 48px mobile-large → 36px mobile-small
• **Footer**: 6-column desktop → 3-column tablet → 2-column mobile → accordion at small mobile

Image Behavior

• Whiteboard mockups maintain aspect ratio; lazy-loaded below the fold
• Customer story photography uses 16:9 ratio with full-bleed scaling
• Logo wall presents wordmarks at consistent 100px height

Iteration Guide

1. Focus on ONE component at a time

2. Reference component names and tokens directly

3. Run `npx @google/design.md lint DESIGN.md` after edits

4. Add new variants as separate `components:` entries

5. Default to `{typography.body-md}` for body and `{typography.subtitle}` for emphasis

6. Keep `{colors.brand-yellow}` confined to wordmark, promo banner, and yellow-tag chips

7. Pill-shaped buttons (`{rounded.full}`) always

8. When showing the product, use a real Miro-board mockup with sticky-note color tints

Known Gaps

• Specific dark-mode token values not surfaced
• Animation/transition timings not extracted; recommend 150–200ms ease
• Form validation success state not explicitly captured beyond defaults
• Sticky note color tints inside the actual whiteboard product are richer than what marketing surfaces capture

개요

Miro는 자신감 있고 약간 유쾌한 브랜드 목소리를 통해 AI 기반의 시각적 작업 공간으로 자리매김했습니다. 홈페이지는 왼쪽 상단에 작은 카나리아 노란색 Miro 워드마크가 고정된 새하얀 캔버스, 검은색 알약 기본 CTA "무료로 시작하기" 및 보조 "데모 예약" 개요 알약으로 열립니다. 그런 다음 드라마틱한 실제 Miro 보드 모형 이미지(스티커 메모, 칸반, 마인드 맵)가 시각적 무게를 전달합니다. 더 깊은 표면에 걸쳐 시스템이 열립니다. 파스텔 기능 카드(장미색, 청록색, 산호색, 노란색)는 라이브 화이트보드 제품의 실제 스티커 메모 색상 팔레트를 반영하고 고객 스토리 카드는 이러한 색조를 재사용하여 브랜드 비네팅을 차별화합니다.

Roobert PRO(Miro의 사용자 정의 디스플레이 페이스)는 80px 히어로 디스플레이부터 11px 마이크로 라벨까지 모든 인쇄 표면을 고정합니다. 얼굴의 약간 둥글고 기하학적인 문자는 장난기 있는 제품 사진 및 친근한 제품 포지셔닝과 자연스럽게 조화를 이룹니다. 검은 알약 기본 버튼(`{rounded.full}`)이 마케팅 CTA를 지배합니다. 브랜드 색상인 시그니처 카나리아 노란색({colors.brand-yellow})은 워드마크, 상단 프로모션 배너 및 "노란색 태그" 기능 알약용으로 예약되어 있으며 기본 CTA로는 사용되지 않습니다. 4계층 가격 비교(무료/스타터/비즈니스/엔터프라이즈)는 시스템에서 가장 조밀한 표면으로 이어집니다. 즉, 여러 섹션 구분선에 걸쳐 최대 80행 깊이로 실행되는 기능 비교 테이블입니다.

**주요 특징:**

• 뚜렷한 흰색 캔버스 + 눈에 띄는 오프닝 시그니처인 카나리아 노란색({colors.brand-yellow})의 Miro 워드마크
• 주요 대화형 요소인 블랙필 기본 CTA({colors.primary} + `{rounded.full}`)
• 실제 스티커 메모 팔레트를 반영하는 파스텔 기능 카드(노란색, 장미색, 산호색, 청록색, 민트색)
• 모든 UI 표면에 걸친 Roobert PRO; 기하학적이고 약간 둥근 문자
• 피처 일러스트레이션으로 사용된 실제 미로보드 모형 이미지
• 4계층 가격표 그리드 + 밀집된 기능 비교표
• 다중 열 링크 + 앱 스토어 배지가 포함된 대규모 어두운 바닥글({colors.footer-bg})

색상

> 소스 페이지: miro.com/(홈페이지), /pricing/(4계층 비교), /products/ai-workflows/(AI 제품), /agile/(수직 랜딩), /customers/(스토리 디렉터리). 토큰 적용 범위는 5개 페이지 모두에서 동일했습니다.

브랜드 및 액센트

• **Miro Yellow** ({colors.brand-yellow}): 브랜드에서 인식할 수 있는 카나리아 노란색 — 워드마크 색상, 상단 프로모션 배너, "노란색 태그" 알약
• **Yellow Deep** ({colors.brand-yellow-deep}): 호버 상태 및 강조를 위한 더 어두운 변형
• **노란색 빛** ({colors.yellow-light}): 태그 칩의 연한 노란색 배경 색조
• **Yellow Dark** ({colors.yellow-dark}): 칩 전경의 노란색 태그 텍스트 색상(짙은 올리브색)
• **브랜드 블루** ({colors.brand-blue}): 인라인 링크 및 추천 가격 계층 테두리를 위한 액션 블루
• **파란색 누름** ({colors.blue-pressed}): 누른 상태의 파란색
• **브랜드 코랄** ({colors.brand-coral}): 따뜻한 콜아웃을 위한 코랄 액센트
• **Coral Light** ({colors.coral-light}): 피처 카드 배경을 위한 옅은 산호색
• **Coral Dark** ({colors.coral-dark}): 산호색 태그 텍스트 색상(딥 와인)
• **브랜드 로즈** ({colors.brand-rose}): 기능 카드 변형을 위한 부드러운 로즈 핑크
• **브랜드 청록색** ({colors.brand-teal}): 브랜드 청록색
• **Teal Light** ({colors.teal-light}): 기능 카드 배경을 위한 옅은 청록색
• **Moss Dark** ({colors.moss-dark}): 진한 청록색 텍스트 색상
• **브랜드 핑크** ({colors.brand-pink}): 부드러운 설명을 위한 연한 핑크
• **Brand Orange Light** ({colors.brand-orange-light}): 기능 카드 배경을 위한 부드러운 주황색

표면

• **캔버스 흰색** ({colors.canvas}): 페이지 배경 및 기본 카드 표면
• **Surface** ({colors.surface}): 미묘한 섹션 배경, 검색 알약 나머지
• **Surface Soft** ({colors.surface-soft}): 더 조용한 섹션 분할
• **Surface Yellow** ({colors.surface-yellow}): 태그 칩용으로 연한 노란색을 띤 표면
• **Surface Pricing Featured**({colors.surface-pricing-featured}): 추천 가격 계층의 옅은 라벤더
• **헤어라인**({colors.hairline}): 1px 테두리 및 기본 구분선
• **Hairline Soft** ({colors.hairline-soft}): 더 조용한 테이블 행 구분선
• **Hairline Strong** ({colors.hairline-strong}): 입력 시 1px 테두리가 더 강해졌습니다.

텍스트

• **Ink Deep** ({colors.ink-deep}): 더 가벼운 기능 카드의 헤드라인
• **잉크**({colors.ink}): 기본 헤드라인 및 본문 텍스트
• **Charcoal** ({colors.charcoal}): 본문 강조 텍스트
• **Slate** ({colors.slate}): 보조 텍스트, 메타데이터
• **Steel** ({colors.steel}): 3차 텍스트, 바닥글 링크
• **Stone** ({colors.stone}): 캡션, 음소거 라벨
• **음소거** ({colors.muted}): 비활성화된 라벨, 입력 자리표시자
• **On Dark** ({colors.on-dark}): 어두운 표면에 흰색 텍스트
• **어둡게 음소거됨** ({colors.on-dark-muted}): 어둠 속에서 불투명도가 감소된 흰색

의미론

• **성공 액센트** ({colors.success-accent}): 확인/성공 표시 녹색
• **브랜드 레드** ({colors.brand-red}): 오류 반환을 위한 부드러운 빨간색

概要

Miro は、自信に満ちた少し遊び心のあるブランド ボイスを通じて、AI を活用したビジュアル ワークスペースとしての地位を確立しています。ホームページは、左上の小さなカナリア黄色の Miro ワードマークで固定された真っ白なキャンバスで開きます。黒い錠剤の主 CTA「無料で始めましょう」と 2 番目の「デモを予約する」概要錠剤が表示されます。その後、劇的な本物の Miro ボードのモックアップ画像 (付箋、カンバン、マインド マップ) が視覚的な重みを持っています。より深い表面では、システムが壊れていきます。パステルのフィーチャー カード (ローズ、ティール、コーラル、イエロー) は、ライブ ホワイトボード製品の実際の付箋のカラー パレットをエコーし​​、顧客ストーリー カードは、それらの色合いを再利用してブランドのビネットを区別します。

Roobert PRO — Miro のカスタム ディスプレイ フェイス — は、80 ピクセルのヒーロー ディスプレイから 11 ピクセルのマイクロ ラベルに至るまで、あらゆる活版面を固定します。やや丸みを帯びた幾何学模様のフェイスが、遊び心のある商品写真やフレンドリーな商品配置と自然にマッチします。黒丸のプライマリ ボタン (`{rounded.full}`) がマーケティング CTA の大半を占めています。ブランドカラーであるシグネチャー カナリア イエロー ({colors.brand- yellow}) は、ワードマーク、トップ プロモーション バナー、および「イエロー タグ」の目玉商品として予約されており、主要な CTA としては使用されません。 4 段階の価格比較 (無料 / スターター / ビジネス / エンタープライズ) は、システム内で最も密度の高い面、つまり複数のセクション分割にまたがる最大 80 行の深さの機能比較表につながります。

**主な特徴:**

• 真っ白なキャンバス + 認識可能な冒頭の署名としてカナリア イエロー ({colors.brand- yellow}) の Miro ワードマーク
• 主要なインタラクティブ要素としてのブラックピル プライマリ CTA ({colors.primary} + `{rounded.full}`)
• 実際の付箋パレットを反映したパステル フィーチャー カード (イエロー、ローズ、コーラル、ティール、ミント)
• すべての UI サーフェスにわたる Roobert PRO;幾何学的で少し丸みを帯びたキャラクター
• 本物の Miro ボードのモックアップ画像をフィーチャー イラストとして使用
• 4 層の価格設定カード グリッド + 高密度機能比較表
• 複数列のリンクとアプリストアのバッジを備えた巨大なダークフッター ({colors.footer-bg})

色

> ソース ページ: miro.com/ (ホームページ)、/pricing/ (4 層比較)、/products/ai-workflows/ (AI 製品)、/agile/ (垂直ランディング)、/customers/ (ストーリー ディレクトリ)。トークンの適用範囲は 5 ページすべてで同一でした。

ブランドとアクセント

• **ミロ イエロー** ({colors.brand- yellow}): ブランドの認識可能なカナリア イエロー — ワードマーク カラー、トップ プロモーション バナー、「イエロー タグ」錠剤
• **Yellow Deep** ({colors.brand- yellow-deep}): ホバー状態と強調のための暗いバージョン
• **イエロー ライト** ({colors. yellow-light}): タグ チップの淡い黄色の背景の色合い
• **イエローダーク** ({colors. yellow-dark}): チップ前景のイエロータグのテキストカラー (ダークオリーブ)
• **ブランド ブルー** ({colors.brand-blue}): インライン リンクと注目の価格帯の境界線はアクション ブルー
• **押された青色** ({colors.blue-pressed}): 押された状態の青色
• **ブランドコーラル** ({colors.brand-coral}): 温かみのあるコールアウト用のコーラルのアクセント
• **コーラル ライト** ({colors.coral-light}): フィーチャー カードの背景用の淡いコーラル
• **コーラル ダーク** ({colors.coral-dark}): コーラルタグのテキストの色 (ディープワイン)
• **ブランド ローズ** ({colors.brand-rose}): フィーチャー カード バリエーションのソフト ローズ ピンク
• **ブランド ティール** ({colors.brand-teal}): ブランド ティール
• **ティール ライト** ({colors.teal-light}): フィーチャー カードの背景用の淡いティール色
• **Moss Dark** ({colors.moss-dark}): 濃い青緑色のテキスト色
• **ブランド ピンク** ({colors.brand-pink}): 柔らかいコールアウト用の淡いピンク
• **ブランド オレンジ ライト** ({colors.brand-orange-light}): フィーチャー カードの背景用の柔らかいオレンジ

表面

• **キャンバス ホワイト** ({colors.canvas}): ページの背景とカードの主表面
• **Surface** ({colors.surface}): 微妙なセクションの背景、検索ピルの残り
• **Surface Soft** ({colors.surface-soft}): より静かなセクション分割
• **表面黄色** ({colors.surface- yellow}): タグチップ用の淡い黄色がかった表面
• **注目のサーフェス価格** ({colors.surface-pricing-featured}): 注目の価格帯の淡いラベンダー
• **ヘアライン** ({colors.hairline}): 1 ピクセルの境界線と主分割線
• **Hairline Soft** ({colors.hairline-soft}): より静かなテーブル行の仕切り
• **強いヘアライン** ({colors.hairline-strong}): 入力の 1 ピクセルの境界線を強化します。

テキスト

• **Ink Deep** ({colors.ink-deep}): 軽い機能カードの見出し
• **インク** ({colors.ink}): 主要な見出しと本文
• **Charcoal** ({colors.charcoal}): 本文強調テキスト
• **スレート** ({colors.slate}): 二次テキスト、メタデータ
• **スチール** ({colors.steel}): 三次テキスト、フッター リンク
• **Stone** ({colors.stone}): キャプション、ミュートされたラベル
• **ミュート** ({colors.muted}): 無効なラベル、入力プレースホルダー
• **オンダーク** ({colors.on-dark}): 暗い表面に白いテキスト
• **オンダークミュート** ({colors.on-dark-muted}): 暗い背景に不透明度を下げた白

セマンティック

• **成功アクセント** ({colors.success-accent}): 確認/成功インジケーター緑色
• **ブランドレッド** ({colors.brand-red}): エラーバック用のソフトレッド