Help us build this. Leave comments, suggest improvements, and help create better design documentation for agents.
Miro
CollaborationMiro's brand radiates collaborative energy through bold yellow accents against clean whites and sophisticated grays, creating an atmosphere of creative possibility. The Roobert PRO typography strikes a perfect balance between approachable friendliness and professional authority, while generous whitespace suggests infinite canvas potential.
Design Identity
Signature Color
Miro Sunburst Yellow
#FFD02B
creative energy and collaborative breakthrough moments - the spark of innovation in team workflows
Visual Identity
The distinctive yellow accent combined with abundant whitespace and the characteristic angular arrow logo elements create an unmistakably optimistic, canvas-like digital workspace feeling.
Component Style
Soft rounded corners with generous padding create approachable, touchable elements. Buttons use subtle shadows and clean fills rather than heavy borders. The 'SAVE YOUR SPOT' button demonstrates their signature yellow treatment with confident, all-caps typography.
Spacing Philosophy
Extremely generous whitespace creates a sense of infinite canvas - large gaps between major sections mirror the expansive feeling of Miro's digital whiteboards. Tight internal component padding maintains clarity while preserving the airy, creative workspace atmosphere.
Design Principles
- Yellow (#FFD02B) serves as the primary action color across all CTAs
- Roobert PRO typography exclusively for headings, maintaining brand consistency
- Large font sizes (48-56px for h1/h2) create bold, confident messaging
- Generous line-height ratios (1.15-1.35x) enhance readability
- Minimal border usage - clean fills and shadows preferred over outlines
Target Audience
Design-forward teams and creative professionals who value visual thinking, remote collaboration, and breakthrough innovation over traditional project management tools
Mood
Design descriptions are AI-generated based on visual analysis and may not fully reflect the brand's official design guidelines.
Design System
Typography Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| body | 12px | 400 | normal | |
| h1 | 56px | 400 | 64.4px | |
| h2 | 48px | 400 | 55.2px | |
| h3 | 24px | 400 | 27.6px | |
| h5 | 24px | 400 | 27.6px | |
| p | 22px | 400 | 29.7px | |
| a | 16px | 900 | 22.8571px | |
| button | 12px | 400 | normal | |
| nav | 12px | 400 | normal | |
| header | 12px | 400 | normal |
Color Palette
#fafafc#fffae7#f1f2f5#e9eaef#ffc6c6#3c3f49#ffd8f4#2a41b6#746019#555a6a#187574#600000
