Styles

Your brand style, in every AI tool you connect

Your color, type, spacing, logo, and icons in one place, ready for every AI tool you connect.

Change a value once, everywhere updates

Your color, type, radius, spacing, and shadow all live in one place. Change any value and every connected AI tool picks it up, with nothing to export or copy across.
--radius0.25rem0.5rem

Your logo and icons, right every time

Your logo and its variants come with their own usage rules, and every AI tool draws from one icon set. No stretched or off-brand logo, and no mismatched icons pulled from wherever the tool defaults to.
Acme
Logo
Secondary
Favicon
Don’tNever stretch the mark
Icons
DoAlways use Hugeicons

Start from what you’ve got

Already have a brand? Bring it in three ways, and edit anything once it lands.
globals.css
:root {--primary--radius}
acme.com
design.md
Your styles
Color
AaBritti Sans
0.5rem

Import your styles

Bring the CSS variables you already have. Free on every plan.

Scan your site (Pro)

Point the agent at your URL and it drafts your styles for you.

Drop in a file (soon)

Hand us a design.md and we’ll turn it into rules and styles you can edit.

Ship your brand, not generic defaults

Styles are the values, rules are the guidance. UI Rules sends both to every AI tool.

Get early access and launch updates. We respect your privacy.

Keep exploring

Rules

Styles, usage, voice, and accessibility in one place.

Agent

Describe a change in plain language and preview before it applies.

Connections

Connect your rules to Cursor, Claude Code, v0, Codex, and Figma Make.