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. Klaye 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 Klaye 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, Klaye asks you to pick one rather than guessing.
Compliance
Klaye 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 Klaye will establish a branding direction (palette, fonts, mood, component rules) and generate against it.