# Miro — DESIGN.md

Bright collaborative-canvas marketing with a warm off-white field, bold black type, yellow brand signal, electric-blue actions and colorful AI board visuals.

Independent reference guide from public Incognito captures. Not an official brand guide. Values describe the captured desktop marketing pages; responsive rules below are implementation recommendations.

Captured: 2026-10-01

## Agent task
Build an original interface using this visual language. Inspect the existing stack and conventions first. Use the included screenshots to understand hierarchy, composition and density. Keep your own branding and content.

## Font
Observed family: **modern geometric sans**. A family name is not a bundled font licence. Use an available, licensed pairing or system fallbacks.

## Marketing — Collaborative whiteboard and AI canvas

### Observed palette
- Canvas: #f7f7f9
- Primary text: #1f1f1f
- Muted text: #5a5a63
- Miro yellow: #ffd02f
- Action blue: #4262ff
- Soft AI wash: #f6eefc
- Border: #e6e6eb

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Hero headline | ~48–68px / tight | 500–700 | tight |
| Section / pricing heading | ~36–52px / tight | 500–700 | tight |
| Body / supporting copy | 16–18px / 1.45 | 400 | normal |
| Nav / button label | 13–14px | 500–600 | normal |

### Layout & hierarchy
- The homepage keeps a crisp white navigation above a centered “Human collaboration at the speed of AI” hero, email field and blue CTA, surrounded by workflow cards and connector lines.
- Pricing uses a dotted light canvas, a monthly/yearly segmented control and four rounded plan cards for Free, Starter, Business and Enterprise.
- The public AI overview page centers “The AI platform for teamwork” above Try it now / Book a demo actions and a large board product visual; it is logged-out marketing imagery, not a workspace.

### Components & behavior
- Primary CTA: filled electric-blue rounded button with white label (Get Started Free / Try it now).
- Secondary CTA: white or dark bordered action (Contact sales / Book a demo).
- Collaboration canvas: floating workflow cards, avatars and connector lines around a centered AI prompt.
- Pricing cards: rounded white columns with a blue highlighted Business plan and a monthly/yearly control.

## Scope
This is a marketing-only, logged-out capture (home, pricing and AI overview). The home cookie banner was dismissed with Accept All Cookies in Incognito; no login, SSO, signup, workspace, credentials or payment flow was entered. Final URLs are https://miro.com/, https://miro.com/pricing/ and https://miro.com/ai/ai-overview/.

## Implementation recommendations
- Use your own name, logo, copy and sample data. Recreate the visual principles and page structure.
- Use semantic HTML, visible focus states, labelled controls and accessible contrast.
- Recommended: use a 4px spacing base, keep decorative backgrounds behind content, and let dense plan or product grids stack or scroll on small screens.
- Recommended: give every CTA a real destination and implement hover, focus and disabled states; the capture shows resting states only.
- Use the observed font only when available and appropriately licensed; otherwise use a system fallback.
- Treat desktop measurements as reference values, not a complete responsive specification.

## Page inventory
- Homepage: Miro navigation above a light collaboration canvas with “Human collaboration at the speed of AI”, email field, Get Started Free CTA and connected workflow visuals. Screenshot: captures/miro-marketing-home.jpg.
- Pricing: Dotted light background, “Where teams and AI work as one”, Monthly / Yearly (save 20%) control and Free / Starter / Business / Enterprise cards. Screenshot: captures/miro-marketing-pricing.jpg.
- Feature / AI overview: “The AI platform for teamwork”, Try it now / Book a demo actions, avatars and a large collaborative board visual at https://miro.com/ai/ai-overview/. Screenshot: captures/miro-marketing-feature.jpg.