---
name: Miro
description: "Miro exemplifies a professional, high-utility SaaS design that uses minimalism and a single accent color to guide user attention effectively."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#1C1C1E"
  secondary: "#555A6A"
  tertiary: "#4B5BF0"
  neutral: "#C7CAD5"
  bg-soft: "#F0F0F0"
  bg-quiet: "#F5F5F5"
  muted-soft: "#E0E2E8"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-1.5px"
  h1:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.15
    fontWeight: 500
    letterSpacing: "-1px"
  h2:
    fontFamily: humanist-sans
    fontSize: 24px
    lineHeight: 1.2
    fontWeight: 600
    letterSpacing: "-0.5px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

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

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

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#1C1C1E`)** — uses `ink` token
- **Secondary text (`#555A6A`)** — uses `ink-soft` token
- **Accent (`#4B5BF0`)** — uses `accent` token
- **Muted (`#C7CAD5`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** humanist-sans
- **Mono:** monospace

- 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.

## Layout

Standard 12-column grid with a centered main container.

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

## Elevation & Depth

- 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)
- Borders: Subtle 1px borders used sparingly for input fields and cards.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## 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.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
Miro is a collaborative whiteboard SaaS platform. Its visual identity is defined by a clean, light-mode aesthetic (white #FFFFFF and gray #F0F0F0 backgrounds) with high-contrast dark ink (#1C1C1E) for maximum readability. The primary accent color is a vibrant blue (#4B5BF0) used for interactive elements. Typography is humanist-sans with tight letter-spacing for headlines. Critical donts: Never use dark mode as the primary interface. Avoid heavy, complex shadows; keep them subtle. Do not use serif fonts or cluttered, multi-column hero sections. Maintain a clean, centered layout that emphasizes whitespace and clear calls to action.
```