Design systems
The community catalog, applying a theme, and compliance.
A design system gives your screens a consistent visual language: colors, fonts, spacing, and component rules. Modus ships a community catalog you can browse and apply, or the AI can build a system from a description.
Browsing the catalog
The browse modal shows community templates in a masonry grid:
- Infinite scroll, full-text search, and faceted filtering (category, color scheme, font).
- A detail view per template, with its description, colors, fonts, and a preview video.
- Each template carries a full design guide, structured tokens, a Tailwind config, and CSS variables.
Applying a system
Pick a template and Modus applies it to the project. Existing pages get restyled to the new theme; new pages are generated against it from the start. If no design system is set when generation starts, Modus asks you to pick one rather than guessing.
Compliance
Modus checks how well your pages actually use the design system's tokens (color consistency, typography, token-usage ratio) and reports pass / warn / fail with a list of issues. It's how the canvas tells you a screen has drifted from the system.
Building from scratch
You don't have to use the catalog. Describe the look you want in chat and Modus will establish a branding direction (palette, fonts, mood, component rules) and generate against it.