miro-ui-skills

To build user interfaces matching Miro's design system, apply its specific light-mode constraints including the Inter font, a 4px grid layout, defined color tokens, text styles, and spacing rules for consistent component styling.

The Miro UI design system uses the Inter font family, a strict 4px grid for spacing, and predefined color tokens to ensure visual consistency. It also enforces specific text styles and a minimum text contrast ratio of 4.5:1 for accessibility.

To style interactive states for Miro-style components, apply the system's specific guidelines for focus, hover, and disabled states. These rules define border radiuses, layout patterns, and animation behaviors to maintain a familiar user experience.

The Miro UI design system is specifically configured for building light-mode interfaces. It provides opinionated color tokens and styling constraints tailored for light mode, ensuring a familiar aesthetic for Miro platform users.

The best way to make a new feature feel like a natural extension of Miro is to enforce its UI design system constraints. This involves applying its distinct light-mode aesthetic, 4px grid spacing, and specific component styling guidelines.

Yes, the Miro UI design system includes accessibility guidelines that maintain a minimum text contrast ratio of 4.5:1. This ensures that light-mode interfaces built with its color tokens remain accessible to all users.