How to use a Uiverse Design system

Your agent builds. The design system guides it.

A design system gives your coding agent a clear visual reference, so it can reuse a consistent style across your product. Here’s how to use one.

Pick a design system.
Choose the look you want and download its files. Paid systems are available in your library; free systems have the same files on their detail page.
Add two files to your project.
Put DESIGN.md at the project root and the included system.css stylesheet in your project. DESIGN.md explains the visual rules; the CSS provides the tokens and styles.
Ask your agent to apply the system.
Tell your coding agent to read DESIGN.md, import system.css once for your framework, and use the system to build or update your interface.
Keep using the same rules.
Ask your agent to read DESIGN.md before every UI change. Add that instruction to your agent’s project rules so new screens share the same colors, typography, and spacing.

Start with this prompt

Read DESIGN.md in the project root. Find system.css and import it once for this project’s framework. Build the requested UI using the system’s colors, typography, spacing, and component patterns. Use html/preview.html as a visual reference if it’s included.

Start with a design you like.

Pick a design system, download it, and make it yours.

Transect

Premium

A point-line-plane interface system for earth-systems research: field-station networks, ocean, soil and atmosphere monitoring portals, dataset catalogs and the public stories told from them.

5 files1 logo3 fonts6 colors

Headcount

Premium

A civic picture-statistics system for public reports, city data portals and transparency dashboards. Every quantity is a counted row of flat silhouette glyphs standing on a heavy black groundline.

5 files1 logo2 fonts8 colors

Sgraffito

Premium

A split-tone, material-zoned interface system for ceramics studios, repair workshops and small-batch craft commerce: terracotta clay, combed bone plaster and matte black fields divided by sweeping S-curves and mended with a thin gold seam.

5 files1 logo2 fonts8 colors

Browse all 56 design systems

“In our focused tests, customers vastly prefer these slop-free templates. Not an em dash in sight!”

James Freeman

RipVanSimple

“This helped me unblock the design issue I was stuck on in all my projects.”

Fabio batista

“I'm working on personal task managers and org-wide automation projects. These templates make my stuff look amazing vs "AI"”

Matt Hale

Zendesk

“The designs are stunning, unique and simple to use. Love it and highly recommend!”

Caleb Whittaker

Brellark

Read all testimonials