# Miro Design System ## Visual Theme & Atmosphere 在线白板平台。黄色品牌,无限画布,协作空间设计语言 ## Color Palette & Roles | Token | Hex | Role | |-------|-----|------| | Primary | #FFD02F | Brand color | | Secondary | #F5C518 | Hover/secondary | | Background | #FAFAFA | Main canvas | | Surface | #FFFFFF | Cards, panels | | Text | #191919 | Primary text | | Muted | #767676 | Secondary text | | Border | #E0E0E0 | Dividers | ## Typography Rules - **Heading Font**: Inter, system-ui, sans-serif - **Body Font**: Inter, system-ui, sans-serif - **Base Size**: 14px - **Line Height**: 1.4 - **Weights**: 400, 500, 600, 700 ## Component Stylings - **Buttons**: Primary accent color, clean rounded style - **Cards**: Surface background, subtle borders, hover states - **Navigation**: Clean, brand-colored indicators ## Agent Prompt Guide Use Miro's design language: 在线白板平台. Primary color #FFD02F on #FAFAFA background. Typography: Inter.
在线白板平台。黄色品牌,无限画布,协作空间设计语言
Miro uses #FFD02F as primary color, #FAFAFA for background, and #191919 for text.
Heading font: Inter, system-ui, sans-serif. Body font: Inter, system-ui, sans-serif. Base size: 14px.
Click the Copy button above the DESIGN.md code block to copy the complete design specification. AI Coding tools like Cursor can directly read DESIGN.md to generate code matching Miro's style.
Discover 50+ curated design systems for your AI Coding projects.
View All Design Systems