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

**주요 특성:**

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

색상

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

브랜드 및 액센트

• **미로 옐로우**({colors.brand-yellow}): 브랜드를 인식할 수 있는 카나리아 옐로우 — 워드마크 색상, 상단 프로모션 배너, "노란색 태그" 알약
• **노란색 깊은**({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}): 기능 카드 배경을 위한 옅은 청록색
• **모스 다크**({colors.moss-dark}): 진한 청록색 텍스트 색상
• **브랜드 핑크**({colors.brand-pink}): 부드러운 설명선을 위한 연한 핑크
• **브랜드 주황색 빛**({colors.brand-orange-light}): 기능 카드 배경용 부드러운 주황색

표면

• **캔버스 흰색**({colors.canvas}): 페이지 배경 및 기본 카드 표면
• **표면**({colors.surface}): 미묘한 섹션 배경, 검색 알약 받침대
• **부드러운 표면**({colors.surface-soft}): 더 조용한 섹션 분할
• **노란색 표면**({colors.surface-yellow}): 태그 칩용 연한 노란색 색조 표면
• **표면 가격 추천**({colors.surface-pricing-featured}): 추천 가격 등급의 연한 라벤더
• **가는 선** ({colors.hairline}): 1px 테두리 및 기본 구분선
• **헤어라인 소프트**({colors.hairline-soft}): 더 조용한 테이블 행 구분선
• **가는 선 강력** ({colors.hairline-strong}): 입력에 대한 1px 테두리가 더 강력함

텍스트

• **잉크 깊이**({colors.ink-deep}): 더 가벼운 기능 카드의 헤드라인
• **잉크**({colors.ink}): 기본 헤드라인 및 본문 텍스트
• **차콜**({colors.charcoal}): 본문 강조 텍스트
• **슬레이트**({colors.slate}): 보조 텍스트, 메타데이터
• **스틸**({colors.steel}): 3차 텍스트, 바닥글 링크
• **스톤** ({colors.stone}): 캡션, 음소거 라벨
• **음소거됨**({colors.muted}): 비활성화된 라벨, 입력 자리 표시자
• **어두운 곳**({colors.on-dark}): 어두운 표면의 흰색 텍스트
• **어두운 음소거**({colors.on-dark-muted}): 어두운 바탕에 불투명도가 낮은 흰색

의미

• **성공 악센트**({colors.success-accent}): 확인/성공 표시기 녹색
• **브랜드 레드**({colors.brand-red}): 오류 배경용 소프트 레드
• **브랜드 빨간색 어두운**({colors.brand-red-dark}): 오류 테두리에 더 강한 빨간색

타이포그래피

글꼴군

**Roobert PRO**(기본): Miro의 맞춤형 기하학적 산세리프 서체입니다. 대형 80px 히어로 디스플레이부터 11px 마이크로 라벨까지 모든 UI 표면에서 사용됩니다. 얼굴은 브랜드의 장난스러운 제품 포지셔닝과 일치하는 약간 둥글고 친근한 캐릭터를 가지고 있습니다. 대체: Noto Sans, -apple-system, BlinkMacSystemFont, sans-serif.

계층

| 토큰 | 사이즈 | 무게 | 라인 높이 | 문자 간격 | |

사용

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

| _`` | 80px | 500 | 1.05 | -2px | 마케팅 영웅("Miro를 통해 팀이 어떻게 성과를 거두는지 확인하세요") |

| _`` | 60px | 500 | 1.10 | -1.5px | 주요 섹션 오프너 |

| _`` | 48px | 500 | 1.15 | -1픽셀 | 페이지 수준 헤드라인 |

| _`` | 36px | 500 | 1.20 | -0.5px | 하위 섹션 헤드라인 |

| _`` | 28px | 500 | 1.25 | 0 | 카드 제목 |

| _`` | 22px | 500 | 1.30 | 0 | 기능 타일 제목 |

| _`` | 18px | 500 | 1.40 | 0 | FAQ 질문, 작은 카드 |

| _`` | 18px | 400 | 1.50 | 0 | 영웅 부제 |

| _`` | 16px | 400 | 1.50 | 0 | 기본 본문 텍스트 |

| _`` | 16px | 500 | 1.50 | 0 | 로고 벽 라벨 |

| _`` | 14px | 400 | 1.50 | 0 | 보조 본문, 표 셀 |

| _`` | 14px | 500 | 1.50 | 0 | 필터 드롭다운, 버튼 라벨 |

| _`` | 13px | 400 | 1.40 | 0 | 도우미 텍스트 |

| _`` | 13px | 600 | 1.40 | 0 | 배지 라벨, 태그 칩 |

| _`` | 12px | 500 | 1.40 | 0 | 바닥글 마이크로카피 |

| _`` | 11px | 600 | 1.40 | 0.5픽셀 | 테이블의 섹션 구분선 |

| _`` | 14px | 500 | 1.30 | 0 | 알약 버튼 라벨 |

| _`` | 64px | 500 | 1.10 | -1.5px | "1억 명 이상의 사용자" 통계 콜아웃 |

원칙

• **단단한 영웅 선도**(1.05)는 80px 영웅에 잡지급 디스플레이 헤드라인을 생성합니다
• **음수 문자 간격 진행** — 디스플레이 크기는 -2px에서 -1.5px를 사용합니다. 작은 제목은 0
로 완화됩니다.
• **마케팅 통계 콜아웃용 통계 표시 토큰**(64px / 500)
• **단일 체중계** — 400(본문), 500(중간 강조 + 제목), 600(배지 및 대문자). Roobert PRO는 이 시스템에서 700을 사용하지 않습니다.

레이아웃

간격 시스템

• **기본 단위**: 4px(8px 기본 증분)
• **토큰**: ``(4px) · ``(8px) · ``(12px) · ``(16px) · ``(20px) · ``(24px) · ``(32px) · ``(40px) · ``(48px) · ``(64px) · ``(96px) · `` (120px)
• **섹션 리듬**: 마케팅 페이지에서는 ``(96px)을 사용합니다. 가격 비교가 ``(64px)으로 강화되었습니다. 고객 스토리 스택은 ``(32px)
을 사용합니다.
• **카드 내부 패딩**: 컴팩트 카드의 경우 ``(24px); 기능 패널의 경우 _``(32px)

그리드 및 컨테이너

• 마케팅 페이지는 32px 여백과 함께 1280px 최대 너비를 사용합니다
• 가격 페이지는 데스크톱에서 4계층 카드 행을 렌더링합니다(무료/스타터/비즈니스/엔터프라이즈)
• 고객 사례 페이지는 필터 드롭다운이 있는 2열 그리드를 사용합니다
• AI 워크플로 페이지는 2열 히어로와 3업 피처 그리드를 사용합니다

공백 철학

마케팅 표면은 콘텐츠에 넉넉한 호흡 공간을 제공합니다. — ``(120px) 영웅 패딩은 작은 워드마크에 호흡할 공간을 제공합니다. 가격 표면이 극적으로 강화되었습니다.

고도 및 깊이

시스템은 영웅 모형에 대한 전략적 깊이와 함께 주로 평면적으로 실행됩니다.

| 레벨 | 치료 | |

사용

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

| 0(플랫) | 그림자가 없습니다. _`` 테두리 | 기본 카드, 테이블 행, 양식 입력 |

| 1(미묘함) | _`rgba(5, 0, 56, 0.04) 0px 1px 2px 0px` | 미묘한 마우스 오버 타일 |

| 2 (카드) | _`rgba(5, 0, 56, 0.06) 0px 4px 12px 0px` | 표준 기능 카드 |

| 3 (모형) | _`rgba(5, 0, 56, 0.08) 0px 12px 32px -4px` | 영웅 화이트보드 모형 프레이밍 |

| 4(모달) | _`rgba(5, 0, 56, 0.12) 0px 16px 48px -8px` | 모달, 드롭다운 |

장식적 깊이

• Miro 영웅의 분위기 있는 깊이는 실제 제품 보드 모형 일러스트레이션에서 비롯됩니다. Z 오프셋으로 겹쳐진 스티커 메모, 화이트보드 프레임 뒤의 컬러 블록 색조
• 파스텔 기능 카드는 포화된 배경 색상을 통해 고유한 시각적 무게를 전달합니다
• 고객 스토리 카드는 오버레이 스크림을 사용하여 어두운 사진 콘텐츠 레이어

도형

테두리 반경 배율

| 토큰 | 가치 | |

사용

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

| _`` | 4픽셀 | 작은 칩, 마이크로 컨트롤 |

| _`` | 6픽셀 | 할인 배지 |

| _`` | 8픽셀 | 입력, 검색 알약 |

| _`` | 12px | 표준 카드, 테이블 컨테이너 |

| _`` | 16px | 가격 카드, 기능 패널 |

| _`` | 20픽셀 | 더 큰 기능 카드 |

| _`` | 28px | 파스텔 기능 카드(노란색, 장미색, 산호색, 청록색) |

| _`` | 32px | 히어로 CTA 배너 카드 |

| _`` | 9999px | 모든 버튼, 알약 탭, 배지 |

사진 기하학

• 실제 Miro 보드 모형은 ``(16px) 모서리와 미묘한 그림자
로 렌더링됩니다.
• 고객 스토리 카드는 풀 블리드 사진이 포함된 ``(28px) 모서리를 사용합니다
• 템플릿 카드 축소판은 사진 콘텐츠에 ``(16px)을 사용합니다
• 고객 로고 벽에는 일관된 100픽셀 높이로 워드마크가 인라인으로 표시됩니다

구성요소

> 마우스오버 금지 정책에 따라 마우스오버 상태는 문서화되지 않습니다. 기본 및 누름/활성 상태만 해당됩니다.

버튼

**`button-primary`** — 검은 알약 기본 CTA, 지배적인 작업("무료로 시작하기").

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 패딩 `12px 24px`, 반올림 ``.
• 누른 상태 `button-primary-pressed` 리프트를 ``.
• 비활성화 상태 `button-primary-disabled`은 `` 배경과 `` 텍스트를 사용합니다.

**`button-yellow`** — 브랜드를 강조하는 순간을 위한 노란색 알약.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 패딩 `12px 24px`, 반올림 ``.

**`button-blue`** — 인라인 작업 콜아웃을 위한 파란색 알약입니다.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 패딩 `12px 24px`, 반올림 ``.

**`button-secondary`** — 보조 작업에 대한 설명된 알약("데모 예약").

• 배경 투명, 텍스트 ``, 테두리 `1px solid `, 타이포그래피 ``, 패딩 `12px 24px`, 둥근 ``.

**`button-on-dark`** — 어두운 CTA 배너용 흰색 알약.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 패딩 `12px 24px`, 반올림 ``.

**`button-ghost`** — 더 조용해진 직사각형 고스트 버튼.

• 배경 투명, 텍스트 ``, 타이포그래피 ``, 패딩 `8px 12px`, 반올림 ``.

**`button-link`** — 인라인 텍스트 링크.

• 배경 투명, 텍스트 ``, 타이포그래피 ``, 패딩 `0`.

**`button-icon-circular`** — 36×36px 원형 유틸리티 버튼.

• 배경 ``, 텍스트 ``, 테두리 `1px solid `, 반올림 ``.

카드 및 용기

**`card-base`** — 표준 콘텐츠 카드.

• 배경 ``, 둥근 ``, 패딩 ``, 테두리 `1px solid `.

**`card-feature`** — 28px 모서리가 더 큰 흰색 기능 카드.

• 배경 ``, 둥근 ``, 패딩 ``, 테두리 `1px solid `.

**`card-feature-yellow`** — 파스텔 노란색 기능 카드.

• 배경 ``, 텍스트 ``, 반올림 ``, 패딩 ``.

**`card-feature-coral`** — 파스텔 산호색 기능 카드 변형.

• 배경 ``, 텍스트 ``, 반올림 ``, 패딩 ``.

**`card-feature-teal`** — 파스텔 청록색 기능 카드 변형.

• 배경 ``, 텍스트 ``, 반올림 ``, 패딩 ``.

**`card-feature-rose`** — 파스텔 로즈 기능 카드 변형.

• 배경 ``, 텍스트 ``, 반올림 ``, 패딩 ``.

**`card-customer-story`** — 고객 스토리 카드.

• 배경 ``, 반올림 ``, 패딩 `0`(이미지가 카드를 채움), 테두리 `1px solid `.

**___CODEBCK_11 36___** — "1억 명 이상의 사용자"에 대한 통계 행 셀.

• 배경 투명, 텍스트 ``, 타이포그래피 ``, 패딩 ``.

**`pricing-card`** — 표준 가격 등급 카드.

• 배경 ``, 둥근 ``, 패딩 ``, 테두리 `1px solid `.

**`pricing-card-featured`** — 주요 가격 책정 계층(비즈니스 — 라벤더 배경 + 파란색 테두리).

• 배경 ``, 둥근 ``, 패딩 ``, 테두리 `2px solid `.

**`pricing-card-enterprise`** — 다크 캔버스 엔터프라이즈 등급 카드.

• 배경 ``, 텍스트 ``, 반올림 ``, 패딩 ``.

입력 및 양식

**`text-input`** — 표준 텍스트 필드.

• 배경 ``, 텍스트 ``, 테두리 `1px solid `, 둥근 ``, 패딩 ` `, 높이 44px.

**`text-input-focused`** — 활성화된 상태.

• 경계가 `2px solid `.
(으)로 전환됩니다.

**`search-pill`** — 검색창.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 높이 40px, 테두리 `1px solid `.

**`filter-dropdown`** — 알약 모양의 필터 드롭다운("회사 용도" / "산업" / "사용 사례").

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 ` `, 테두리 `1px solid `.

탭

**`pill-tab`** + **`pill-tab-active`** — 알약 스타일 탭 탐색

• 비활성: 배경 ``, 텍스트 ``, 테두리 `1px solid `, 패딩 ` `, 반올림 ``.
• 활성: 배경 ``, 텍스트 ``.

**`toggle-monthly-yearly`** — 2가지 상태 알약 토글(월별/연간 가격 책정).

• 배경 ``, 둥근 ``, 패딩 `4px`.

배지 및 상태

**`badge-promo`** — 노란색 프로모션 배너 배지.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `4px 10px`.

**`badge-tag-yellow`** — 부드러운 노란색 기능 태그 칩(AI 워크플로 페이지의 "노란색" 태그).

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `4px 10px`.

**`badge-tag-purple`** — 라벤더 기능 태그 칩("AI 에이전트" 태그).

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `4px 10px`.

**`badge-tag-coral`** — 산호 기능 태그 칩 변형.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `4px 10px`.

**`badge-success`** — 녹색 성공 표시기.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `4px 10px`.

**`badge-discount`** — 노란색 직사각형 할인 알약("15% 할인").

• 배경 ___CODEBCK_1220_ __, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 `2px 6px`.

**`promo-banner`** — 상단 탐색 메뉴 위에 끈적끈적한 검정색 프로모션 스트립

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 패딩 ` `. 노란색 인라인 "GET YOUR SPOT" 알약을 가지고 있습니다.

테이블

**`comparison-table`** — 가격 기능 비교표.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 테두리 `1px solid `.

**`comparison-row`** — 개별 기능 행.

• 배경 ``, 텍스트 ``, 패딩 ` `, 하단 테두리 `1px solid `.

문서 구성요소

**`whiteboard-mockup`** — 기능 일러스트레이션으로 렌더링된 실제 Miro-board UI.

• 배경 ``, 둥근 ``, 테두리 `1px solid `, 그림자 `rgba(5, 0, 56, 0.08) 0px 12px 32px -4px`.

**`template-card`** — 템플릿 썸네일 카드.

• 배경 ``, 둥근 ``, 패딩 ``, 테두리 `1px solid `.

**`industry-tile`** — 산업 수직 타일.

• 배경 ``, 둥근 ``, 패딩 ``, 테두리 `1px solid `.

**`faq-accordion-item`** — FAQ 패널 항목.

• 배경 ``, 둥근 ``, 패딩 ``, 아래쪽 테두리 `1px solid `.

**`logo-wall-item`** — 고객 로고 워드마크 셀.

• 배경 투명, 텍스트 ``, 타이포그래피 ``, 패딩 ``.

**`capterra-badge`** — 바닥글에 리뷰/평가 배지가 있습니다.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 ` `, 테두리 `1px solid `.

**`app-store-badge`** — 앱 스토어/Google Play 다운로드 알약.

• 배경 ``, 텍스트 ``, 타이포그래피 ``, 반올림 ``, 패딩 ` `.

탐색

**상단 탐색(마케팅)** — 노란색 Miro 워드마크 + 가로 링크 + 오른쪽 CTA가 있는 흰색 고정 막대.

• 배경 ``, 높이 ~64px.
• 왼쪽: 노란색 사각형 Miro 워드마크 + 가로 링크 목록(제품, 솔루션, 리소스).
• 오른쪽: "로그인 / 가격 / 영업팀에 문의" 링크 + 검은색 알약 "무료로 시작하기".

서명 구성요소

**`hero-band-marketing`** — 마케팅 히어로 밴드.

• 배경 ``, 패딩 ``.
• 레이아웃: ``의 중앙 헤드라인, 중앙 정렬 부제, 중앙 정렬 버튼 행, 아래 화이트보드 모형 그림.

_**`cta-banner-dark`** — 기능 페이지 하단의 어두운 CTA 배너.

• 배경 ``, 텍스트 ``, 반올림 ``, 패딩 ``. 중앙 정렬 헤드라인 + 부제 + `button-on-dark` "무료로 시작하세요".

**`footer-region`** — 대규모 다중 열 어두운 바닥글.

• 배경 ``, 패딩 ` `.
• 6열 링크 그리드(제품/솔루션/도구/리소스/회사/계획 및 가격).
• `` ``.
의 섹션 제목

**`footer-link`** — 바닥글의 개별 링크.

• 배경 투명, 텍스트 ``, 타이포그래피 ``, 패딩 ` 0`.

해야 할 일과 하지 말아야 할 일

하라

• 워드마크, 상단 프로모션 배너 및 "노란색 태그" 칩을 위해 ``을 예약하세요
• 모든 표면에서 ``(검은색)을 주요 CTA로 사용합니다
• 동일한 뷰포트에서 파스텔 기능 카드(노란색, 장미색, 산호색, 청록색)를 흰색 기능 카드와 페어링합니다.
• 모든 버튼, 모든 알약 탭, 모든 상태 배지에 `` 적용
• 파스텔 기능 카드에 ``(28px) 적용
• 실제 미로보드 모형을 특집 일러스트레이션으로 사용__HTMLTAG_889___
• 모든 UI 표면에서 Roobert PRO 유지관리

하지 마세요

• 표준 CTA 또는 큰 배경 화면에는 ``을 사용하지 마세요
• 노란색 + 브랜드 파스텔 이외의 추가 강조 색상을 도입하지 마세요
• 버튼 모서리를 부드럽게 하지 마세요. 알약은 브랜드 시그니처입니다__HTMLTAG_901___
• 1.05
아래로 이어지는 영웅을 줄이지 마세요.
• 평평한 문서 카드에 무거운 그림자를 적용하지 마십시오. 화이트보드 모형을 위한 예비 고도
• 스톡 사진을 사용하지 마세요. 실시간 제품 보드를 보여주세요. UI

반응적 행동

중단점

| 이름 | 폭 | 주요 변경 사항 |

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

| 모바일(소형) | _< 480px | Single column. Hero scales to 36px. Pill nav collapses to hamburger. Pricing tiers stack 1-up. |

| 모바일(대형) | 480 – 767px | 기능 타일 2업. 영웅의 크기는 48px로 조정됩니다. |

| 태블릿 | 768 – 1023px | 2열 특성 그리드. 알약 탭 탐색이 반환됩니다. |

| 데스크탑 | 1024 – 1279px | 4계층 가격 카드 행. 고객 스토리 그리드 2-up. 64px의 영웅. |

| 와이드 데스크탑 | ≥ 1280px | 전체 영웅 프리젠테이션, 80px 영웅 디스플레이. |

터치 대상

• 알약 버튼은 WCAG AAA 층에서 40~44px 유효 높이로 렌더링됩니다
• 원형 아이콘 버튼: 데스크톱 36×36픽셀 → 모바일 44×44픽셀
• 양식 입력은 44px 높이로 렌더링됩니다
• 필터 드롭다운은 높이가 ~36px로 렌더링되며 모바일에서는 44px로 늘어납니다

축소 전략

• **프로모션 배너**는 전체 너비로 유지됩니다. < 480px
에서 잘립니다.
• **1024px 미만의 상단 탐색**은 햄버거로 접힙니다.
• **영웅 밴드**: 2열 영웅이 접혀서 < 1024px
에 쌓임
• **가격 비교**: 4열 계층 → 2열 태블릿 → 1열 모바일; 비교표가 가로 스크롤이 됩니다
• **고객 스토리 그리드**: < 768px
에서 2업 → 1업
• **히어로 타이포그래피**: 80px → 60px 태블릿 → 48px 모바일-대형 → 36px 모바일-소형
• **바닥글**: 6열 데스크톱 → 3열 태블릿 → 2열 모바일 → 소형 모바일의 아코디언

이미지 동작

• _화이트보드 모형은 가로 세로 비율을 유지합니다. 스크롤 없이 볼 수 있는 부분에 지연 로드
• 고객 스토리 사진은 풀 블리드 배율로 16:9 비율을 사용합니다
• 로고 벽은 일관된 100픽셀 높이의 워드마크를 표시합니다

반복 가이드

1. 한 번에 하나의 구성요소에만 집중하세요

2. 구성 요소 이름 및 토큰을 직접 참조

3. 편집 후 _`npx @google/design.md lint DESIGN.md` 실행

4. 새 변형을 별도의 `components:` 항목

으로 추가합니다.

5. 본문의 경우 기본값은 ``, 강조의 경우 ``

입니다.

6. _``을 워드마크, 프로모션 배너 및 노란색 태그 칩으로 제한하세요

7. 알약 모양의 버튼(``) 항상

8. 제품을 보여줄 때 포스트잇 컬러 틴트가 적용된 실제 미로보드 모형을 사용하세요

알려진 격차

• 특정 다크 모드 토큰 값이 표시되지 않음
• 애니메이션/전환 타이밍이 추출되지 않았습니다. 150~200ms 용이성을 권장합니다
• 기본값 이상으로 명시적으로 캡처되지 않은 양식 유효성 검사 성공 상태
• 실제 화이트보드 제품 내부의 스티커 메모 색상 색조는 마케팅 표면에서 포착한 것보다 더 풍부합니다

概要

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

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

**主な特徴:**

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

色

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

ブランドとアクセント_

• **ミロ イエロー** ({colors.brand-yellow}): ブランドの認識可能なカナリア イエロー — ワードマーク カラー、トップ プロモーション バナー、「イエロー タグ」錠剤
• **イエローディープ** ({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}): フィーチャー カードの背景用の淡いティール
• **モス ダーク** ({colors.moss-dark}): 濃い青緑色のテキスト色
• **ブランド ピンク** ({colors.brand-pink}): ソフトコールアウト用の淡いピンク
• **ブランド オレンジ ライト** ({colors.brand-orange-light}): フィーチャー カードの背景用のソフト オレンジ

表面

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

テキスト

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

セマンティック

• **成功アクセント** ({colors.success-accent}): 確認/成功インジケーター 緑色
• **ブランドレッド** ({colors.brand-red}): エラー背景用の柔らかい赤
• **ブランドレッドダーク** ({colors.brand-red-dark}): エラー境界線の濃い赤

タイポグラフィ

フォント ファミリー

**Roobert PRO** (プライマリ): Miro のカスタムの幾何学的なサンセリフ書体。特大の 80 ピクセルのヒーロー ディスプレイから 11 ピクセルのマイクロ ラベルまで、あらゆる UI サーフェスにわたって使用されます。ブランドの遊び心のあるプロダクトポジショニングに合わせ、少し丸みを帯びた親しみやすいフェイスに仕上げました。 フォールバック: Noto Sans、-apple-system、BlinkMacSystemFont、sans-serif。

階層

|トークン |サイズ |重量 |行の高さ |文字間隔 | |

を使用します

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

| `` | 80ピクセル | 500 | 1.05 | -2ピクセル |マーケティング ヒーロー (「Miro を使用してチームがどのように成果を上げるかをご覧ください」) |

| `` | 60ピクセル | 500 | 1.10 | -1.5ピクセル |主要セクションのオープナー |

| `` | 48ピクセル | 500 | 1.15 | -1ピクセル |ページレベルの見出し |

| `` | 36ピクセル | 500 | 1.20 | -0.5ピクセル |サブセクションの見出し |

| `` | 28ピクセル | 500 | 1.25 | 0 |カードのタイトル |

| `` | 22ピクセル | 500 | 1.30 | 0 |特集タイルのタイトル |

| `` | 18ピクセル | 500 | 1.40 | 0 | FAQ の質問、小さいカード |

| `` | 18ピクセル | 400 | 1.50 | 0 |ヒーローのサブタイトル |

| `` | 16ピクセル | 400 | 1.50 | 0 |主要な本文テキスト |

| `` | 16ピクセル | 500 | 1.50 | 0 |ロゴウォールラベル |

| `` | 14ピクセル | 400 | 1.50 | 0 |二次本文、表のセル |

| `` | 14ピクセル | 500 | 1.50 | 0 |フィルター ドロップダウン、ボタン ラベル |

| `` | 13ピクセル | 400 | 1.40 | 0 |ヘルパー テキスト |

| `` | 13ピクセル | 600 | 1.40 | 0 |バッジ ラベル、タグ チップ |

| `` | 12ピクセル | 500 | 1.40 | 0 |フッターのマイクロコピー |

| `` | 11ピクセル | 600 | 1.40 | 0.5ピクセル |テーブル内のセクション区切り |

| `` | 14ピクセル | 500 | 1.30 | 0 |ピル ボタンのラベル |

| `` | 64ピクセル | 500 | 1.10 | -1.5ピクセル | 「1 億人以上のユーザー」統計コールアウト |

原則

• **タイトなヒーロー リーディング** (1.05) は、80 ピクセルのヒーローに雑誌グレードの表示見出しを作成します
• **負の文字間隔の進行** — 表示サイズは -2px から -1.5px を使用します。小さい見出しは 0
に緩和されます
• **マーケティング統計コールアウト用の統計表示トークン** (64px / 500)
• **単一体重計** — 400 (本文)、500 (中程度の強調 + 見出し)、600 (バッジおよび大文字)。 Roobert PRO は、このシステムでは 700 を使用しません。

レイアウト

間隔システム

• **基本単位**: 4px (主増分 8px)
• **トークン**: `` (4px) · `` (8px) · `` (12px) · `` (16px) · `` (20px) · `` (24 ピクセル) · `` (32 ピクセル) · `` (40 ピクセル) · `` (48 ピクセル) · `` (64 ピクセル) · `` (96 ピクセル) · `` (120px)
• **セクションのリズム**: マーケティング ページでは `` (96 ピクセル) を使用します。価格比較は__CODEBCK_1030___ (64ピクセル)にまで厳しくなります。カスタマー ストーリー スタックは `` (32px)
を使用します
• **カード内部パディング**: コンパクト カードの場合は `` (24 ピクセル)。 `` (32 ピクセル) 機能パネル用

グリッドとコンテナ

• マーケティング ページは最大幅 1280 ピクセル、余白 32 ピクセルを使用します
• 価格設定ページでは、デスクトップに 4 層のカード行が表示されます (無料 / スターター / ビジネス / エンタープライズ)
• _カスタマー ストーリー ページでは、フィルター ドロップダウンを備えた 2 列グリッドが使用されています
• AI ワークフロー ページでは 2 列のヒーローを使用し、次に 3 列の機能グリッドを使用します

ホワイトスペースの哲学

マーケティング サーフェスによりコンテンツに十分な余裕が与えられます — `` (120px) ヒーロー パディングにより、小さなワードマークに余裕が与えられます。 価格設定面は劇的に厳しくなっています。

標高と深さ

システムは主にフラットに動作しますが、ヒーローのモックアップには戦略的な深みがあります。

|レベル |治療 | |

を使用します

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

| 0 (フラット) |影はありません。 `` 境界線 |デフォルトのカード、テーブル行、フォーム入力 |

| 1 (微妙) | `rgba(5, 0, 56, 0.04) 0px 1px 2px 0px` |ホバーで微妙に盛り上がったタイル |

| 2 (カード) | `rgba(5, 0, 56, 0.06) 0px 4px 12px 0px` |標準機能カード |

| 3 (モックアップ) | `rgba(5, 0, 56, 0.08) 0px 12px 32px -4px` |ヒーロー ホワイトボード モックアップ フレーム |

| 4 (モーダル) | `rgba(5, 0, 56, 0.12) 0px 16px 48px -8px` |モーダル、ドロップダウン |

装飾の深さ_

• ミロのヒーローの雰囲気の深さは、実際の製品ボードのモックアップのイラストから来ています。Z オフセットで重ねられた付箋、ホワイトボード フレームの後ろのカラーブロックの色合い
• パステルのフィーチャ カードは、飽和した背景色によって独自の視覚的な重みを持ちます
• カスタマー ストーリー カードは、オーバーレイ スクリムを使用して暗い写真コンテンツを重ねます

図形

境界線の半径スケール

|トークン |値 | |

を使用します

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

| `` | 4ピクセル |小型チップ、マイクロコントロール |

| `` | 6ピクセル |割引バッジ |

| `` | 8ピクセル |入力、検索ピル |

| `` | 12ピクセル |標準カード、テーブル コンテナ |

| `` | 16ピクセル |価格カード、機能パネル |

| `` | 20ピクセル |大きな機能カード |

| `` | 28ピクセル |パステル フィーチャー カード (イエロー、ローズ、コーラル、ティール) |

| `` | 32ピクセル |ヒーロー CTA バナー カード |

| `` | 9999ピクセル |すべてのボタン、薬タブ、バッジ |

写真の幾何学

• 実際の Miro ボード モックアップは `` (16 ピクセル) のコーナーと微妙なドロップ シャドウでレンダリング
• カスタマー ストーリー カードは__CODEBCK_1050___ (28 ピクセル) コーナーをフルブリード写真で使用
• テンプレート カードのサムネイルでは、__CODEBCK_1051___ (16 ピクセル) と写真コンテンツ
を使用します
• 顧客のロゴの壁には、一貫した 100 ピクセルの高さでワードマークがインラインで表示されます

コンポーネント

> ホバー禁止ポリシーに従って、ホバー状態は文書化されません。 デフォルトおよび押下/アクティブ状態のみ。

ボタン

**`button-primary`** — ブラック ピルのプライマリ CTA、主要なアクション (「無料で始めましょう」)。

• 背景__CODEBCK_1053___、テキスト__CODEBCK_1054___、タイポグラフィ__CODEBCK_1055___、パディング__CODEBCK_1056___、丸め__CODEBCK_1057___.
• 押された状態__CODEBCK_1058___は__CODEBCK_1059___に上昇します。
• 無効状態__CODEBCK_1060___は__CODEBCK_1061___背景と__CODEBCK_1062___テキストを使用します。

**`button-yellow`** — ブランドを強調するためのブランドイエローの錠剤。

• 背景__CODEBCK_1064___、テキスト__CODEBCK_1065___、タイポグラフィ__CODEBCK_1066___、パディング__CODEBCK_1067___、丸め__CODEBCK_1068___.

**`button-blue`** — インライン アクション コールアウト用のブランドブルーの錠剤。

• 背景__CODEBCK_1070___、テキスト__CODEBCK_1071___、タイポグラフィ__CODEBCK_1072___、パディング__CODEBCK_1073___、丸め__CODEBCK_1074___.

_**`button-secondary`** — 二次アクション (「デモを予約する」) の概要を示します。

• 背景透明、テキスト__CODEBCK_1076___、境界線__CODEBCK_1077___、タイポグラフィ__CODEBCK_1078___、パディング__CODEBCK_1079___、丸め__CODEBCK_1080___.

**`button-on-dark`** — 暗い CTA バナー用の白い錠剤。

• 背景__CODEBCK_1082___、テキスト__CODEBCK_1083___、タイポグラフィ__CODEBCK_1084___、パディング__CODEBCK_1085___、丸め__CODEBCK_1086___.

**`button-ghost`** — 静かな長方形のゴースト ボタン。

• 背景透明、テキスト__CODEBCK_1088___、タイポグラフィ__CODEBCK_1089___、パディング__CODEBCK_1090___、角丸__CODEBCK_1091___.

**`button-link`** — インライン テキスト リンク。

• 背景透明、テキスト__CODEBCK_1093___、タイポグラフィ__CODEBCK_1094___、パディング__CODEBCK_1095___.

**`button-icon-circular`** — 36×36 ピクセルの円形ユーティリティ ボタン。

• 背景__CODEBCK_1097___、テキスト__CODEBCK_1098___、境界線__CODEBCK_1099___、角丸__CODEBCK_1100___.

カードとコンテナ

**`card-base`** — 標準コンテンツ カード。

• 背景__CODEBCK_1102___、角丸__CODEBCK_1103___、パディング__CODEBCK_1104___、境界線__CODEBCK_1105___.

**`card-feature`** — 28 ピクセルの角が大きい白いフィーチャー カード。

• 背景__CODEBCK_1107___、角丸__CODEBCK_1108___、パディング__CODEBCK_1109___、境界線__CODEBCK_1110___.

**`card-feature-yellow`** — パステルイエローのフィーチャーカード。

• 背景__CODEBCK_1112___、テキスト__CODEBCK_1113___、丸め__CODEBCK_1114___、パディング__CODEBCK_1115___.

_**`card-feature-coral`** — パステルコーラルのフィーチャーカードのバリエーション。

• 背景__CODEBCK_1117___、テキスト__CODEBCK_1118___、丸め__CODEBCK_1119___、パディング__CODEBCK_1120___.

**`card-feature-teal`** — パステル ティールのフィーチャー カードのバリアント。

• 背景__CODEBCK_1122___、テキスト__CODEBCK_1123___、丸め__CODEBCK_1124___、パディング__CODEBCK_1125___.

_**`card-feature-rose`** — パステルローズのフィーチャー カードのバリエーション。

• 背景__CODEBCK_1127___、テキスト__CODEBCK_1128___、丸め__CODEBCK_1129___、パディング__CODEBCK_1130___.

**`card-customer-story`** — 顧客ストーリー カード。

• 背景__CODEBCK_1132___、角丸__CODEBCK_1133___、パディング__CODEBCK_1134___ (画像がカード全体に表示されます)、境界線__CODEBCK_1135___.

**___CODEBCK_11 36___** — 「1 億以上のユーザー」の統計行セル。

• 背景透明、テキスト__CODEBCK_1137___、タイポグラフィ__CODEBCK_1138___、パディング__CODEBCK_1139___.

**`pricing-card`** — 標準価格帯カード。

• 背景__CODEBCK_1141___、角丸__CODEBCK_1142___、パディング__CODEBCK_1143___、境界線__CODEBCK_1144___.

_**`pricing-card-featured`** — 注目の価格帯 (ビジネス — ラベンダー色の背景 + 青色の境界線)。

• 背景__CODEBCK_1146___、角丸__CODEBCK_1147___、パディング__CODEBCK_1148___、境界線__CODEBCK_1149___.

**`pricing-card-enterprise`** — ダークキャンバスのエンタープライズ層カード。

• 背景__CODEBCK_1151___、テキスト__CODEBCK_1152___、丸め__CODEBCK_1153___、パディング__CODEBCK_1154___.

入力とフォーム

**`text-input`** — 標準のテキスト フィールド。

• 背景__CODEBCK_1156___、テキスト__CODEBCK_1157___、境界線__CODEBCK_1158___、角丸__CODEBCK_1159___、パディング__CODEBCK_1160___、高さ44ピクセル

**`text-input-focused`** — アクティブ化された状態。

• 境界線が__CODEBCK_1162___に切り替わります。

**`search-pill`** — 検索バー。

• 背景__CODEBCK_1164___、テキスト__CODEBCK_1165___、タイポグラフィ__CODEBCK_1166___、角丸__CODEBCK_1167___、高さ40ピクセル、境界線__CODEBCK_1168___.

**`filter-dropdown`** — 錠剤型フィルター ドロップダウン (「企業使用」/「業界」/「ユースケース」)。

• 背景__CODEBCK_1170___、テキスト__CODEBCK_1171___、タイポグラフィ__CODEBCK_1172___、角丸__CODEBCK_1173___、パディング__CODEBCK_1174___、境界線__CODEBCK_1175___.

タブ

**`pill-tab`** + **`pill-tab-active`** — ピルスタイルのタブ ナビゲーション

• 非アクティブ: 背景__CODEBCK_1178___、テキスト__CODEBCK_1179___、境界線__CODEBCK_1180___、パディング__CODEBCK_1181___、丸め__CODEBCK_1182___.
• アクティブ: 背景__CODEBCK_1183___、テキスト__CODEBCK_1184___.

**`toggle-monthly-yearly`** — 2 つの状態のピルの切り替え (価格設定に基づいて月次/年次)。

• 背景__CODEBCK_1186___、丸め__CODEBCK_1187___、パディング__CODEBCK_1188___.

バッジとステータス

**`badge-promo`** — 黄色のプロモーション バナー バッジ。

• 背景__CODEBCK_1190___、テキスト__CODEBCK_1191___、タイポグラフィ__CODEBCK_1192___、角丸__CODEBCK_1193___、パディング__CODEBCK_1194___.

**`badge-tag-yellow`** — 柔らかい黄色の機能タグ チップ (AI ワークフロー ページの「黄色」タグ)。

• 背景__CODEBCK_1196___、テキスト__CODEBCK_1197___、タイポグラフィ__CODEBCK_1198___、角丸__CODEBCK_1199___、パディング__CODEBCK_1200___.

**`badge-tag-purple`** — ラベンダー機能タグ チップ (「AI エージェント」タグ)。

• 背景__CODEBCK_1202___、テキスト__CODEBCK_1203___、タイポグラフィ__CODEBCK_1204___、角丸__CODEBCK_1205___、パディング__CODEBCK_1206___.

**`badge-tag-coral`** — Coral 機能タグ チップのバリアント。

• 背景__CODEBCK_1208___、テキスト__CODEBCK_1209___、タイポグラフィ__CODEBCK_1210___、角丸__CODEBCK_1211___、パディング__CODEBCK_1212___.

**`badge-success`** — 緑色の成功インジケーター。

• 背景__CODEBCK_1214___、テキスト__CODEBCK_1215___、タイポグラフィ__CODEBCK_1216___、角丸__CODEBCK_1217___、パディング__CODEBCK_1218___.

**`badge-discount`** — 黄色の長方形の割引錠剤 (「15% 割引」)。

• 背景 ___CODEBCK_1220_ __、テキスト ``、タイポグラフィ ``、丸め ``、パディング `2px 6px`.

**`promo-banner`** — 上部ナビゲーションの上の粘着性のある黒いプロモーション ストリップ

• 背景__CODEBCK_1226___、テキスト__CODEBCK_1227___、タイポグラフィ__CODEBCK_1228___、パディング__CODEBCK_1229___。 インラインの黄色の「GET YOUR SPOT」錠剤を運びます。

テーブル

**`comparison-table`** — 価格機能の比較表。

• 背景__CODEBCK_1231___、テキスト__CODEBCK_1232___、タイポグラフィ__CODEBCK_1233___、角丸__CODEBCK_1234___、境界線__CODEBCK_1235___.

**`comparison-row`** — 個別の機能行。

• 背景__CODEBCK_1237___、テキスト__CODEBCK_1238___、パディング__CODEBCK_1239___、下枠__CODEBCK_1240___.

ドキュメント コンポーネント

**`whiteboard-mockup`** — 機能の図としてレンダリングされた実際の Miro ボード UI。

• 背景__CODEBCK_1242___、角丸__CODEBCK_1243___、境界線__CODEBCK_1244___、影__CODEBCK_1245___.

**`template-card`** — テンプレート サムネイル カード。

• 背景__CODEBCK_1247___、角丸__CODEBCK_1248___、パディング__CODEBCK_1249___、境界線__CODEBCK_1250___.

**`industry-tile`** — 業界に特化したタイル。

• 背景__CODEBCK_1252___、角丸__CODEBCK_1253___、パディング__CODEBCK_1254___、境界線__CODEBCK_1255___.

**`faq-accordion-item`** — FAQ パネル項目。

• 背景__CODEBCK_1257___、角丸__CODEBCK_1258___、パディング__CODEBCK_1259___、下枠__CODEBCK_1260___.

**`logo-wall-item`** — 顧客ロゴのワードマーク セル。

• 背景透明、テキスト__CODEBCK_1262___、タイポグラフィ__CODEBCK_1263___、パディング__CODEBCK_1264___.

_**`capterra-badge`** — フッターのレビュー/評価バッジ。

• 背景__CODEBCK_1266___、テキスト__CODEBCK_1267___、タイポグラフィ__CODEBCK_1268___、角丸__CODEBCK_1269___、パディング__CODEBCK_1270___、境界線__CODEBCK_1271___.

**`app-store-badge`** — App Store / Google Play のダウンロード錠剤。

• 背景__CODEBCK_1273___、テキスト__CODEBCK_1274___、タイポグラフィ__CODEBCK_1275___、角丸__CODEBCK_1276___、パディング__CODEBCK_1277___.

ナビゲーション

**トップ ナビゲーション (マーケティング)** — 黄色の Miro ワードマークが付いた白い粘着バー + 水平リンク + 右側の CTA。

• 背景 ``、高さ ~64px.
• 左: 黄色の四角い Miro ワードマーク + 水平リンク リスト (製品、ソリューション、リソース)。
• 右: 「ログイン / 価格設定 / 販売へのお問い合わせ」リンク + 黒丸薬「無料で始めましょう」。

署名コンポーネント

**`hero-band-marketing`** — マーケティング ヒーロー バンド。

• 背景__CODEBCK_1280___、パディング__CODEBCK_1281___.
• レイアウト:__CODEBCK_1282___ の中央に見出し、中央にサブタイトル、中央にボタンの行、そして下のホワイトボードのモックアップ図。

**`cta-banner-dark`** — 特集ページの下部にある暗い CTA バナー。

• 背景__CODEBCK_1284___、テキスト__CODEBCK_1285___、丸め__CODEBCK_1286___、パディング__CODEBCK_1287___。 中央揃えの見出し + サブタイトル + `button-on-dark` 「無料で始めましょう」.

**`footer-region`** — 巨大な複数列の暗いフッター。

• 背景__CODEBCK_1290___、パディング__CODEBCK_1291___.
• 6 列のリンク グリッド (製品 / ソリューション / ツール / リソース / 会社 / プランと価格)。
• __CODEBCK_1292___ のセクション見出し ``.

**`footer-link`** — フッター内の個別のリンク。

• 背景透明、テキスト__CODEBCK_1295___、タイポグラフィ__CODEBCK_1296___、パディング__CODEBCK_1297___.

推奨事項と禁止事項

実行

• ワードマーク、トップ プロモーション バナー、「イエロー タグ」チップ用に__CODEBCK_1298___を予約
• すべてのサーフェスで主要な CTA として__CODEBCK_1299___ (黒) を使用します
• 同じビューポートでパステルのフィーチャ カード (黄色、ローズ、コーラル、ティール) と白のフィーチャ カードをペアにする
• __CODEBCK_1300___ をすべてのボタン、すべての錠剤タブ、すべてのステータス バッジに適用
• __CODEBCK_1301___ (28 ピクセル) をパステル フィーチャ カードに適用
• 実際の Miro ボードのモックアップをフィーチャー イラストとして使用
• すべての UI サーフェスで Roobert PRO を維持

しないでください

• 標準の CTA または大きな背景面では `` を使用しないでください
• 黄色 + ブランド パステル以外の追加のアクセント カラーを導入しないでください
• ボタンの角を柔らかくしないでください。錠剤はブランドのシグネチャー
• ヒーローのリードを 1.05 未満に減らさないでください
• _平らなドキュメント カードには濃い影を適用しないでください。ホワイトボードのモックアップ用に標高を確保
• ストック写真は使用しないでください。ライブの製品ボード UI を表示してください

応答動作

ブレークポイント_

|名前 |幅 |主な変更点 |

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

|モバイル（小） | < 480px | Single column. Hero scales to 36px. Pill nav collapses to hamburger. Pricing tiers stack 1-up. |

|モバイル（大） | 480 – 767ピクセル |フィーチャー タイルは 2 アップです。ヒーローは 48 ピクセルにスケールします。 |

|タブレット | 768 – 1023ピクセル | 2 列のフィーチャ グリッド。ピルタブナビが戻ります。 |

|デスクトップ | 1024 – 1279ピクセル | 4 層の価格カードの行。顧客ストーリーグリッド 2 アップ。 64pxのヒーロー。 |

|ワイドデスクトップ | ≥ 1280 ピクセル |完全なヒーロー プレゼンテーション、80 ピクセルのヒーロー ディスプレイ。 |

タッチターゲット

• ピル ボタンは有効高さ 40 ～ 44 ピクセルでレンダリングされます — WCAG AAA フロア
• 円形アイコン ボタン: デスクトップ 36×36 ピクセル → モバイル 44×44 ピクセル
• フォーム入力は高さ 44 ピクセルでレンダリング
• フィルター ドロップダウンは高さ約 36 ピクセルでレンダリングされますが、モバイルでは最大 44 ピクセル

戦略の崩壊

• **プロモーション バナー** は全幅のままです。 < 480px
で切り捨てられます
• **1024 ピクセル未満のトップ ナビゲーション** はハンバーガーに折りたたまれます
• **ヒーロー バンド**: 2 列のヒーローが折りたたまれて < 1024px
に積み上げられます
• **価格比較**: 4 列階層 → 2 列タブレット → 1 列モバイル。比較表は横スクロールになります
• **カスタマー ストーリー グリッド**: < 768px
で 2 アップ → 1 アップ
• **ヒーロー タイポグラフィ**: 80 ピクセル → 60 ピクセル タブレット → 48 ピクセル モバイル (大) → 36 ピクセル モバイル (小)
• **フッター**: 6 列デスクトップ → 3 列タブレット → 2 列モバイル → 小型モバイルのアコーディオン

画像の動作

• ホワイトボードのモックアップはアスペクト比を維持します。スクロールせずに見える部分に遅延読み込み
• カスタマー ストーリーの写真では、フルブリード スケーリングで 16:9 の比率が使用されています
• ロゴ ウォールにはワードマークが一貫した 100 ピクセルの高さで表示されます

反復ガイド

1。 一度に 1 つのコンポーネントに集中する

2.コンポーネント名とトークンを直接参照

3.

を編集した後に `npx @google/design.md lint DESIGN.md` を実行します

4.新しいバリアントを個別の `components:` エントリ

として追加します

5.デフォルトは本文の場合は__CODEBCK_1305___、強調の場合は__CODEBCK_1306___

です。

6. `` はワードマーク、プロモーション バナー、イエロータグ チップ

に限定してください

7.錠剤型ボタン (``) 常に

8。製品を展示するときは、付箋の色合いを付けた本物の Miro ボード モックアップを使用してください

既知のギャップ

• 特定のダークモード トークン値は表示されません
• アニメーション/遷移のタイミングは抽出されません。 150 ～ 200 ミリ秒を推奨します
• フォーム検証の成功状態がデフォルトを超えて明示的に取得されない
• 実際のホワイトボード製品内の付箋の色合いは、マーケティング画面でキャプチャされるものよりも豊かです

Accessibility Considerations

Miro's color system, anchored by #0a0a0a, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

Accessibility Considerations

Miro's color system, anchored by #0a0a0a, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

Accessibility Considerations

Miro's color system, anchored by #0a0a0a, must balance brand identity with sufficient contrast for readability. The documented palette suggests an awareness of accessibility needs — with dedicated neutral tones for body text and UI elements. When implementing design tokens from this system, designers should verify contrast ratios for all text-on-color combinations, particularly for the brand color used as a button or link background. WCAG 2.1 AA compliance (4.5:1 for normal text, 3:1 for large text) should guide any production implementation.

Related Design Systems

Explore similar design languages from the same category:

• Airtable Design System
• Cal Design System
• Airbnb Design System
• Zapier Design System