Miro

Overview

Miro is an AI-powered visual collaboration platform that transforms how teams ideate, plan, and build together. The design system embodies 'Collaborative Clarity'—a philosophy that prioritizes accessibility and technical precision while maintaining the energy of human creativity. The interface uses a light, neutral canvas (rgb(240, 240, 240)) anchored by a vibrant primary blue (#3859ff) that signals action and AI-driven intelligence. The brand personality is direct, confident, and inclusive: Miro speaks to teams as peers, not users. The tone avoids corporate jargon, favoring concrete, action-oriented language. Example: 'Start building your workspace in seconds—no credit card required' rather than 'Streamlined onboarding experience.'

Colors

The color system is built on a light, accessible foundation with strategic accent deployment. Primary (#3859ff) is the signature brand blue—used exclusively for CTAs, active states, and AI-related highlights. It appears on the 'Get started free' button (rgb(56, 89, 255)) and conveys trust and technological capability. Secondary (#72dfd5), a soft teal, provides a supporting accent for status indicators and secondary UI elements, while tertiary (#fde050), a warm yellow, highlights key information and calls attention to promotional content. The surface stack ranges from near-white (#fafafc) for the lowest container to light gray (#e8e8e8) for the highest, creating subtle depth without visual noise. On-surface text is a near-black (#1c1c1e) for maximum readability at 16px and above. The outlin

Typography

The type system pairs Roobert PRO (a geometric, humanist sans-serif) for headlines and display text with Noto Sans (a neutral, highly legible sans-serif) for body and UI labels. This pairing creates visual distinction between structural hierarchy (Roobert's warmth and personality) and functional content (Noto's clarity). Display text (56px, 500 weight, -0.02em letter-spacing) is reserved for hero headlines like 'Human collaboration at the speed of AI.' Headline-lg (48px, 500 weight) is used for section titles. Body-md (16px, 400 weight, 24px line-height) is the default for paragraph text and ensures comfortable reading at arm's length on desktop and mobile. Label-md (14px, 600 weight) is applied to button text and form labels, with 0.01em letter-spacing for crisp definition. On small label

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, ensuring content remains readable on ultra-wide displays while maintaining focus. The page rhythm is governed by a semantic spacing scale: lg (40px) separates major sections (hero from features, features from testimonials), md (24px) separates cards and subsections within a section, and sm (12px) provides breathing room between inline elements. The gutter (24px) is applied consistently to left/right margins on mobile and tablet, scaling to 40px on desktop. White space is treated as a first-class design element—sections are not packed; instead, they breathe. The hero section uses centered, single-column layout with max-width 800px for the headline and subheading, drawing focus to the CTA. Input fields and form

Elevation & Depth

Depth is achieved through subtle shadows and layering rather than color shifts. The elevation system defines three levels: Level 1 (sm shadow: 0 1px 2px rgba(26, 27, 30, 0.08)) is applied to standard cards and interactive elements at rest. Level 2 (md shadow: 0 4px 12px rgba(26, 27, 30, 0.12)) is applied on hover to cards and buttons, signaling interactivity. Level 3 (lg shadow: 0 16px 40px rgba(26, 27, 30, 0.16)) is reserved for modals, dropdowns, and floating elements that must appear above all other content. Primary buttons receive a custom shadow (0 2px 8px rgba(56, 89, 255, 0.2)) at rest,

Shapes

The shape philosophy is 'Approachable Precision'—rounded corners are used consistently to soften the interface without sacrificing clarity. Buttons and input fields use lg (1rem / 16px) border-radius, creating a friendly, modern appearance while maintaining clear affordance. Cards and containers use lg (1rem) as the default, with xl (1.5rem / 24px) reserved for hero sections and prominent feature cards to create visual hierarchy. Small UI elements like badges and tags use full (9999px) border-radius for a pill shape, signaling their secondary nature. Modals and overlays use xl (1.5rem) on the

Components

Action Elements Buttons are the primary driver of user intent. The button-primary component uses a solid primary blue (#3859ff) background with white text (Noto Sans, 14px, 600 weight), 12px 24px padding, and lg (1rem) border-radius. The height is fixed at 48px to ensure touch-friendly targets on mobile. On hover, the background shifts to #314cd9 (primary-container) and the shadow escalates from 0 2px 8px to 0 4px 12px rgba(56, 89, 255, 0.3), creating a tactile sense of lift. On active (pressed), the background darkens to #2a41b6 and shadow reduces to 0 2px 4px, signaling the button is being engaged. Button-secondary uses a transparent background with a 1px outline in outline color (#c7cad5), maintaining visual hierarchy while offering an alternative action path. On hover, the backgrou

Do's and Don'ts

**Do**

• Do use primary blue (#3859ff) exclusively for CTAs and active states—it is the brand's signature and should never be diluted or overused on secondary elements.
• Do maintain 24px (md) spacing between major sections and 12px (sm) spacing between inline elements to create visual rhythm and prevent cognitive overload.
• Do apply lg (1rem) border-radius to all primary interactive elements (buttons, inputs, cards) for consistency and approachability.
• Do use Roobert PRO for headlines and Noto Sans for body text—this pairing is non-negotiable and defines the brand's visual voice.
• Do test all color combinations for WCAG AA contrast compliance (4.5:1 for normal text, 3:1 for large text) before shipping.
• Do use the elevation system (sm/md/lg shadows) to create depth hierarchy without relying on color shifts or opacity changes.

**Don't**

• Don't use primary blue for backgrounds or large surface areas—it should appear as an accent, not a canvas. Reserve it for buttons, links, and focus states.
• Don't apply border-radius smaller than lg (1rem) to primary buttons or input fields; it reads as timid and breaks the brand's modern, confident aesthetic.
• Don't mix Roobert PRO and Noto Sans weights arbitrarily; use Roobert at 500 weight for headlines and Noto at 400 weight for body text to maintain clarity.
• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds—use on-surface (#1c1c1e) and surface (#f0f0f0) instead for a softer, more accessible appearance.
• Don't create custom shadows; always reference the elevation system (sm/md/lg) to maintain visual consistency across the product.
• Don't apply more than two accent colors (primary + secondary) in a single view—tertiary (yellow) is reserved for highlights and should be used sparingly.