CURATED · OPEN · FREE

Miro

Miro is the collaboration layer where teams and AI agents think, plan, and build together.

01

Identity DNA

A digital whiteboard that serves as the central nervous system for team ideation and AI agent collaboration.

02

Color

Clean white canvases with high-contrast dark text for readability, using a singular vibrant blue for primary actions and soft grays for structure.

03

Typography

humanist-sans · monospace

• display56px · 500
• h148px · 500
• h224px · 600
• body16px · 400
• small12px · 400

Use font-weight 500 for display headlines to maintain a friendly but professional feel. · Apply negative letter-spacing (tracking) to larger headlines to tighten the visual rhythm. · Body text remains at a neutral 400 weight with generous line-height for readability.

04

Spacing

Base-4 grid with consistent 8px and 16px intervals for internal padding and component gaps.

05

Surfaces

Subtle 1px borders used sparingly for input fields and cards.

0px 1px 3px rgba(0,0,0,0.1) · 0px 10px 10px -3.75px rgba(0,0,0,0.06) · 0px 2.28px 2.28px -2.5px rgba(0,0,0,0.16)

06

Layout

Standard 12-column grid with a centered main container.

07

Motion & Interaction

Smooth hover transitions on buttons and interactive elements. · Background-color and transform animations for interactive states.

Subtle background-color shift or border-color change. · Scale or transform micro-animation.

08

Components

• button Solid black 'Get started free' and 'Learn more' buttons with pill or rounded-rect shapes; blue primary 'Get started free' in the hero.
• card Light gray background cards with rounded corners, containing headlines, icons, and descriptive text.
• chip Small pill-shaped elements for user cursors or labels.
• input Simple rounded-rect input fields with subtle borders.
• hero Centered text-based hero with a prominent input field and CTA button.

09

Voice & Don'ts

• Tone Empowering, professional, and forward-looking.
• Headlines Short, punchy, and benefit-driven statements about collaboration and AI.
• CTAs Direct and action-oriented (e.g., 'Get started free', 'Go to the dashboard').

• Don't use serif fonts — screenshot shows clean humanist sans-serif typography.
• Don't use a dark mode theme — screenshot shows a predominantly white/light gray background.
• Don't use heavy decorative shadows — screenshot shows subtle, soft shadows.
• Don't use a chaotic multi-color palette — screenshot shows a restrained palette of white, black, gray, and a single blue accent.
• Don't use rigid, sharp corners everywhere — screenshot shows a mix of rounded-rects (12px, 20px) and pill shapes.
• Don't use dense, small text for headlines — screenshot shows large, airy headlines with tight letter-spacing.
• Avoid: Overly technical jargon or dense paragraphs in the hero.
• Avoid: Aggressive or salesy language.
• Avoid: Cluttered layouts that distract from the core message.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko