Miro

version alpha

name Miro

description Miro presents itself as the AI-powered visual workspace through a confident, almost playful brand voice — anchored by its signature canary yellow ({colors.brand-yellow}) wordmark over white canvas, broken open by colorful pastel feature tints (rose, teal, coral, orange, mint) that echo the actual sticky-note color palette used on the live whiteboard. Black-pill primary buttons dominate marketing, real Miro-board mockups serve as feature illustrations, and a 4-tier pricing grid leads into a dense comparison table. Roobert PRO carries display headlines; the system supports homepage, pricing, AI Workflows product page, agile vertical, and customer stories surfaces.

colors primary: "#1c1c1e" on-primary: "#ffffff" brand-yellow: "#ffd02f" brand-yellow-deep: "#fcb900" yellow-light: "#fff4c4" yellow-dark: "#746019" brand-blue: "#4262ff" blue-450: "#5b76fe" blue-pressed: "#2a41b6" brand-coral: "#ff9999" coral-light: "#ffc6c6" coral-dark: "#600000" brand-rose: "#ffd8f4" rose-light: "#fde0f0" brand-pink: "#fde0f0" brand-teal: "#0fbcb0" teal-light: "#c3faf5" moss-dark: "#187574" brand-orange-light: "#ffe6cd" brand-red: "#fbd4d4" brand-red-dark: "#e3c5c5" success-accent: "#00b473" canvas: "#ffffff" surface: "#f7f8fa" surface-soft: "#fafbfc" surface-yellow: "#fff8e0" surface-pricing-featured: "#f5f3ff" hairline: "#e0e2e8" hairline-soft: "#eef0f3" hairline-strong: "#c7cad5" ink-deep: "#050038" ink: "#1c1c1e" charcoal: "#2c2c34" slate: "#555a6a" steel: "#6b6f7e" stone: "#8e91a0" muted: "#a5a8b5" on-dark: "#ffffff" on-dark-muted: "#a5a8b5" footer-bg: "#1c1c1e"

typography hero-display: fontFamily: Roobert PRO fontSize: 80px fontWeight: 500 lineHeight: 1.05 letterSpacing: -2px display-lg: fontFamily: Roobert PRO fontSize: 60px fontWeight: 500 lineHeight: 1.10 letterSpacing: -1.5px heading-1: fontFamily: Roobert PRO fontSize: 48px fontWeight: 500 lineHeight: 1.15 letterSpacing: -1px heading-2: fontFamily: Roobert PRO fontSize: 36px fontWeight: 500 lineHeight: 1.20 letterSpacing: -0.5px heading-3: fontFamily: Roobert PRO fontSize: 28px fontWeight: 500 lineHeight: 1.25 heading-4: fontFamily: Roobert PRO fontSize: 22px fontWeight: 500 lineHeight: 1.30 heading-5: fontFamily: Roobert PRO fontSize: 18px fontWeight: 500 lineHeight: 1.40 subtitle: fontFamily: Roobert PRO fontSize: 18px fontWeight: 400 lineHeight: 1.50 body-md: fontFamily: Roobert PRO fontSize: 16px fontWeight: 400 lineHeight: 1.50 body-md-medium: fontFamily: Roobert PRO fontSize: 16px fontWeight: 500 lineHeight: 1.50 body-sm: fontFamily: Roobert PRO fontSize: 14px fontWeight: 400 lineHeight: 1.50 body-sm-medium: fontFamily: Roobert PRO fontSize: 14px fontWeight: 500 lineHeight: 1.50 caption: fontFamily: Roobert PRO fontSize: 13px fontWeight: 400 lineHeight: 1.40 caption-bold: fontFamily: Roobert PRO fontSize: 13px fontWeight: 600 lineHeight: 1.40 micro: fontFamily: Roobert PRO fontSize: 12px fontWeight: 500 lineHeight: 1.40 micro-uppercase: fontFamily: Roobert PRO fontSize: 11px fontWeight: 600 lineHeight: 1.40 letterSpacing: 0.5px button-md: fontFamily: Roobert PRO fontSize: 14px fontWeight: 500 lineHeight: 1.30 stat-display: fontFamily: Roobert PRO fontSize: 64px fontWeight: 500 lineHeight: 1.10 letterSpacing: -1.5px

rounded xs: 4px sm: 6px md: 8px lg: 12px xl: 16px xxl: 20px xxxl: 28px feature: 32px full: 9999px

spacing xxs: 4px xs: 8px sm: 12px md: 16px lg: 20px xl: 24px xxl: 32px xxxl: 40px section-sm: 48px section: 64px section-lg: 96px hero: 120px

components button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "12px 24px" button-primary-pressed: backgroundColor: "{colors.charcoal}" textColor: "{colors.on-primary}" button-primary-disabled: backgroundColor: "{colors.hairline}" textColor: "{colors.muted}" button-yellow: backgroundColor: "{colors.brand-yellow}" textColor: "{colors.primary}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "12px 24px" button-blue: backgroundColor: "{colors.brand-blue}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "12px 24px" button-secondary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "12px 24px" border: "1px solid {colors.hairline-strong}" button-on-dark: backgroundColor: "{colors.on-dark}" textColor: "{colors.primary}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: "12px 24px" button-ghost: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: "8px 12px" button-link: backgroundColor: "transparent" textColor: "{colors.brand-blue}" typography: "{typography.body-sm-medium}" padding: "0" button-icon-circular: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.full}" size: 36px border: "1px solid {colors.hairline}" card-base: backgroundColor: "{colors.canvas}" rounded: "{rounded.xl}" padding: "{spacing.xl}" border: "1px solid {colors.hairline-soft}" card-feature: backgroundColor: "{colors.canvas}" rounded: "{rounded.xxxl}" padding: "{spacing.xxl}" border: "1px solid {colors.hairline-soft}" card-feature-yellow: backgroundColor: "{colors.brand-yellow}" textColor: "{colors.primary}" rounded: "{rounded.xxxl}" padding: "{spacing.xxl}" card-feature-coral: backgroundColor: "{colors.coral-light}" textColor: "{colors.primary}" rounded: "{rounded.xxxl}" padding: "{spacing.xxl}" card-feature-teal: backgroundColor: "{colors.teal-light}" textColor: "{colors.primary}" rounded: "{rounded.xxxl}" padding: "{spacing.xxl}" card-feature-rose: backgroundColor: "{colors.rose-light}" textColor: "{colors.primary}" rounded: "{rounded.xxxl}" padding: "{spacing.xxl}" card-customer-story: backgroundColor: "{colors.canvas}" rounded: "{rounded.xxxl}" padding: "0" border: "1px solid {colors.hairline-soft}" card-stat: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.stat-display}" padding: "{spacing.lg}" pricing-card: backgroundColor: "{colors.canvas}" rounded: "{rounded.xl}" padding: "{spacing.xxl}" border: "1px solid {colors.hairline}" pricing-card-featured: backgroundColor: "{colors.surface-pricing-featured}" rounded: "{rounded.xl}" padding: "{spacing.xxl}" border: "2px solid {colors.brand-blue}" pricing-card-enterprise: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" rounded: "{rounded.xl}" padding: "{spacing.xxl}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: "{spacing.sm} {spacing.md}" border: "1px solid {colors.hairline-strong}" height: 44px text-input-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" border: "2px solid {colors.brand-blue}" search-pill: backgroundColor: "{colors.surface}" textColor: "{colors.steel}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: "{spacing.xs} {spacing.md}" height: 40px border: "1px solid {colors.hairline}" filter-dropdown: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm-medium}" rounded: "{rounded.full}" padding: "{spacing.xs} {spacing.md}" border: "1px solid {colors.hairline-strong}" pill-tab: backgroundColor: "{colors.canvas}" textColor: "{colors.steel}" typography: "{typography.body-sm-medium}" rounded: "{rounded.full}" padding: "{spacing.xs} {spacing.md}" border: "1px solid {colors.hairline}" pill-tab-active: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" rounded: "{rounded.full}" border: "1px solid {colors.primary}" toggle-monthly-yearly: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.full}" padding: "4px" badge-promo: backgroundColor: "{colors.brand-yellow}" textColor: "{colors.primary}" typography: "{typography.caption-bold}" rounded: "{rounded.full}" padding: "4px 10px" badge-tag-yellow: backgroundColor: "{colors.surface-yellow}" textColor: "{colors.yellow-dark}" typography: "{typography.caption-bold}" rounded: "{rounded.full}" padding: "4px 10px" badge-tag-purple: backgroundColor: "{colors.surface-pricing-featured}" textColor: "{colors.brand-blue}" typography: "{typography.caption-bold}" rounded: "{rounded.full}" padding: "4px 10px" badge-tag-coral: backgroundColor: "{colors.coral-light}" textColor: "{colors.coral-dark}" typography: "{typography.caption-bold}" rounded: "{rounded.full}" padding: "4px 10px" badge-success: backgroundColor: "{colors.success-accent}" textColor: "{colors.on-primary}" typography: "{typography.caption-bold}" rounded: "{rounded.full}" padding: "4px 10px" badge-discount: backgroundColor: "{colors.brand-yellow}" textColor: "{colors.primary}" typography: "{typography.caption-bold}" rounded: "{rounded.sm}" padding: "2px 6px" promo-banner: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.body-sm-medium}" padding: "{spacing.sm} {spacing.md}" comparison-table: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.md}" border: "1px solid {colors.hairline}" comparison-row: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" padding: "{spacing.md} {spacing.lg}" border: "0 0 1px {colors.hairline-soft} solid" template-card: backgroundColor: "{colors.canvas}" rounded: "{rounded.xl}" padding: "{spacing.md}" border: "1px solid {colors.hairline}" whiteboard-mockup: backgroundColor: "{colors.canvas}" rounded: "{rounded.xl}" padding: "0" border: "1px solid {colors.hairline-soft}" shadow: "rgba(5, 0, 56, 0.08) 0px 12px 32px -4px" faq-accordion-item: backgroundColor: "{colors.canvas}" rounded: "{rounded.md}" padding: "{spacing.xl}" border: "0 0 1px {colors.hairline} solid" logo-wall-item: backgroundColor: "transparent" textColor: "{colors.steel}" typography: "{typography.body-md-medium}" padding: "{spacing.lg}" hero-band-marketing: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.hero-display}" rounded: "0" padding: "{spacing.hero}" cta-banner-dark: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" rounded: "{rounded.feature}" padding: "{spacing.section}" industry-tile: backgroundColor: "{colors.canvas}" rounded: "{rounded.xl}" padding: "{spacing.xl}" border: "1px solid {colors.hairline-soft}" capterra-badge: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.md}" padding: "{spacing.sm} {spacing.md}" border: "1px solid {colors.hairline}" footer-region: backgroundColor: "{colors.footer-bg}" textColor: "{colors.on-dark}" typography: "{typography.body-sm}" padding: "{spacing.section} {spacing.xxl}" footer-link: backgroundColor: "transparent" textColor: "{colors.on-dark-muted}" typography: "{typography.body-sm}" padding: "{spacing.xxs} 0" app-store-badge: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.caption-bold}" rounded: "{rounded.md}" padding: "{spacing.sm} {spacing.md}"

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