App design guidelines

Learn how to create apps with a consistent and efficient user experience.

We are committed to delivering an exceptional user experience and expect developers to share our passion for great UX. This guide provides detailed guidelines and resources necessary for integrating and aligning your applications with the Miro product UI.

Using Mirotone CSS components

To provide a seamless and consistent experience across Miro applications, we highly recommend using Mirotone CSS components. Mirotone is Miro's base library, designed to help developers quickly implement a simple yet effective user interface in their apps.

For designing app mockups, access the Mirotone UI library for Figma. This library should serve as the foundation for your app designs.

Key structural elements

Authentication and authorization

  • Ensure a seamless authentication process between Miro and third-party tools.


  • Clearly communicate the purpose and function of the app so users understand the benefits immediately.

Help and settings

  • Provide accessible links and resources for user support and additional information about the app.

External linking


  • Design the app’s navigation to be logical and free of "dead ends," ensuring users can easily return to previous pages or the homepage.

UI consistency




  • Utilize fonts from Mirotone or ensure that custom fonts do not clash with Miro’s overall UI.


  • Design the main app flow to be intuitive, allowing users to easily utilize functionality as advertised.

Messaging and content

  • Maintain a consistent tone across all messaging within the app and ensure no inappropriate content is displayed.

App names

  • Avoid suggesting that the app is developed by Miro. Use the naming convention “<Your app> for <Miro product>” if incorporating the Miro brand.

Supported names:

  • Image Generator for Miro
  • Image Generator

Unsupported names:

  • Miro Image Generator
  • Miromage Generator
  • Miro-Image Generator

Asset resolution

  • Provide high-resolution images and prefer SVGs for scalability and clarity.


Loading times

  • Aim for optimal performance. Include loading indicators for any delays in app functionality.

Miro performance impact

  • Ensure that the app does not adversely affect the core functionalities of the Miro board.


Screen reader compatibility

Keyboard navigation

  • Design all actionable elements to be accessible via keyboard, allowing complete navigation and interaction without the need for a mouse.

By following these guidelines, developers can ensure their apps integrate seamlessly into the Miro ecosystem, enhancing the overall user experience and maintaining consistency across the platform.

What's next

Check our guidelines to build secure apps.