App design guidelines

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.

Onboarding

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

Ensure all external links navigate correctly and are in line with Mirotone’s guidelines for links.

Navigation

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

Icons

Align icon design with Miro’s style as specified in Mirotone’s icon guidelines or maintain consistency with the app’s design theme.

Components

Adhere to Miro’s component styles as per Mirotone’s app card guidelines, or ensure consistent styling throughout the app.

Typography

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

Usability

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.

Performance

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.

Accessibility

Screen reader compatibility

Comply with Miro’s accessibility guide to ensure that screen readers can navigate the app’s menus and components.

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.