Radius
Radius defines how rounded your brand's corners are. UI Rules stores the radius token scale for each brand and serves it to your AI coding tools over MCP, so generated UI uses your corners, not the defaults.
New brands start on the default theme. Until you configure your own values, a dashboard alert prompts you to import your brand styles.
The radius token scale
The radius page shows your brand's actual radius token values in the same token shape your AI tools consume. These tokens drive the corner radius of buttons, cards, inputs, and other components.
When AI tools generate UI for your brand, they read these tokens and apply your radius scale instead of guessing.
General rules
Below the token scale, you can author General rules groups for radius. A rule captures a single guideline, with:
- Text, the guideline itself.
- Guidance: Do, Don't, Caution, or Info.
- Importance: Required, Recommended, or Optional.
Rules live in named groups so related guidance stays together. Use radius rules to express intent the raw tokens cannot, for example when to use a pill shape or where sharp corners are off-brand.
Author rules in the composer. Deleted rules go to Trash, where you can restore them. AI Enhance tightens the wording for you.
Import your radius
You can set radius as part of importing your brand styles:
- Paste a CSS theme: any theme CSS with your radius variables in it.
- Paste a preset code: a short code from a theme builder that carries the whole theme.
- Scan a website: ask the Agent to read a live site and draft the values.
