The new Miro design language provides important updates to the appearance of boards that improve accessibility and user experience.
Key features
The updated Miro design language includes the following key features:
- An expanded global color palette with more shades.
- Modernized design of sticky notes.
- Updated icon designs.
- Interactive stickers and updated reactions.
Global color picker
The global color palette has undergone a significant facelift with expanded shades for each color that will allow for more accessible color schemes on your boards. The color palette is more modern and fresh, with more colors available. The new default colors on the global color picker will not affect or change existing user content.
More information: See Colors.
Global color picker updates
If you’d like to access the old colors, you can use the color picker to select your desired shade, and it will be added to your color palette. You can also enter the HEX code directly. Here are the HEX codes for the previous colors:
| Color Name | Hex Code | |
|---|---|---|
| White | FFFFFF | |
| Black | 1A1A1A | |
| Light Gray | E6E6E6 | |
| Gray | 808080 | |
| Light Yellow | FDF445 | |
| Yellow | FAC70D | |
| Light Green | CEE741 | |
| Green | 8FD14F | |
| Dark Green | 10A689 | |
| Cyan | 15CDD4 | |
| Blue | 2D9BF0 | |
| Dark Blue | 414BB2 | |
| Red | F14725 | |
| Magenta | DA0063 | |
| Purple | 652CB3 | |
| Violet | 9610AC |
Expanded color picker for timeline
Timeline can now use any of the colors from the global color picker, instead of the more limited 6-color palette previously available.
Expanded color picker for Timeline items
Expanded color picker for cards
Cards are now available in 21 different colors, based on the global color picker. Previously, only 14 colors were available for Cards.
Expanded color picker for cards
Sticky notes updates
The colors have been enhanced for increased vibrancy and higher contrast, ensuring better visibility on Miro board backgrounds. Additionally, the styling has been refreshed with a more natural and modern design. The shadow has been adjusted so that margins of Sticky notes can be easier to align.
Updated Sticky notes
Board thumbnails
Choose from an all-new set of default board thumbnail icons to represent your board’s content and make it easier for users to find the relevant board at a glance.
Updated board thumbnail options
Thumbnail backgrounds now reflect the file format—for instance, a blue background for documents and a green background for tables—making it easier to quickly identify the content type.
Background colors are based on format
Interactive stickers and Reactions
The addition of Interactive stickers create new ways for users to engage with content on a board. Once a sticker is placed, users can click on it to +1 the sticker, which changes the counter as well as the appearance of the sticker.
Interactive stickers
Reactions have also gotten design improvements.
New Reactions design
Font
The body text for in-app text has changed from using Open Sans to Noto Sans to capture wider language support.
The body text font has changed to Noto Sans for improved language support