Styles
Use your brand’s colors and fonts in AI tools
Import your design tokens from Figma or CSS, then give Claude Code, Cursor, Codex, and v0 access to your brand’s colors, typography, and spacing. Keep those styles together with guidelines on how to use them.
See how to manage your brand styles in UI Rules.
Your styles and assets, with guidelines to match
Keep your design tokens, logos, and icons together with guidance on how to use them. Tokens define the colors, fonts, spacing, and other styles that make up your brand.
A primary color tells AI which color to use. A guideline tells it to reserve that color for the most important action.
Explore design tokens and guidelinesLearn how to use your brand styles in AI coding toolsAcme
LogoSecondary
Favicon
Never stretch the mark
Icons
Always use Hugeicons
Import the styles you already use
Bring in your existing design tokens or start with a theme. Every import shows a preview before you apply it, so you can check what will change.
globals.css
:root {--primary--radius}acme.com
Figma
Preset
Your styles
Color
AaBritti Sans
0.5rem
Paste your CSS theme
If your styles live in your website's code, paste its CSS theme. CSS variables are named values for colors, fonts, and other styles.
Import a CSS themeImport from Figma
The UI Rules plugin brings your Figma variables in as design tokens, light and dark modes included.
Import Figma variablesScan your website (Pro)
Give the Agent your website address. It drafts the styles it finds for you to review and approve.
See how the Agent scans a websiteStart with a theme preset
A preset is a shareable code for a complete theme. Paste one from shadcn or shadcncraft to start with a ready-made set of styles.
Import a theme presetComing soon: import a design.md file as editable guidelines and styles.
Change a value once, share it across tools
Keep your colors, fonts, and spacing together in UI Rules, ready for your connected AI tools. You do not need to maintain a separate copy for each tool.
Connect your AI tools--radius0.25rem0.5remBring your brand into v0
Connect v0 to UI Rules and build with your brand’s colors, typography, and design tokens. Your guidelines tell it how to put those styles to work.
Set up your brand in v0
Put your design tokens to work with AI
Keep your visual styles and brand guidelines together, ready for the AI tools your team uses.
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, Lovable, Codex, and Figma Make.