Overview

Styles are the visual layer of your brand. They hold the real token values your design language is built on (colors, type, radius, shadow, spacing, sizing, layout) plus the rules that tell AI tools how to use them. Together they become the design-system-as-context that UI Rules serves over MCP, so AI-generated UI looks like your brand.

The Styles page#

Styles sits beside Overview in the brand's sidebar, and it is a page of its own as well as the parent of the area pages under it. It holds three things:

• A tile per area, with the brand's own face on it where there is one to show, and a count of the tokens and rules it holds. Click one to open that area.
• Import styles, in the page heading. It lives here because its scope is every area at once; on a single area page it read as importing that area alone.
• Foundation, under the tiles: the shadcn style these tokens were built from, and where they came from.

Rules written on the Styles page itself apply across every area, so put guidance that spans colors, type, radius, and shadows there rather than repeating it on each one.

Foundation and the shadcn style#

The Foundation card says where the brand's token values came from. It reads one of these ways: From a shadcn style, From your project when the config was recorded from a pasted components.json, From your CSS for a pasted theme, From a website for a website scan, From Figma for a Figma import, From a CSS import or From an import for an older import that did not record its source, or Template defaults when nothing has been imported yet and your agents are getting the template's values. When an AI tool or the Agent sent the import, the card says so.

Create shadcn style (or Edit shadcn style, once there is one) opens the whole of a shadcn style in one dialog: theme, base color, chart color, body font, heading font, radius, style, primitives, icon library, menu color, menu accent, and RTL. Applying it writes the theme, colors, fonts, and radius as brand tokens through the same preview-and-apply path an import takes, and stores the rest as the brand's recorded shadcn configuration.

Paste components.json records a project's existing config instead. Its style, base, base color, icon library, menu, and RTL settings become the brand's shadcn config, and the dialog lists what it will record before you click Save. Theme, fonts, and radius are not in that file and stay as they are.

That recorded configuration is what a connected agent checks a project's components.json against, so it is worth setting even before you connect a tool. See verify_shadcn_config. Where a style has one, the card also shows its preset code, with a copy button.

Where new brands start#

Every new brand starts on the default theme: an oklch neutral palette, a near-black primary, and the Geist and Geist Mono fonts. This gives you a working baseline from the first connection, but it is not your brand yet.

Until you configure your styles, the brand overview's setup guide prompts you to import them. You can dismiss the baseline and replace it in a few minutes.

The shared pattern#

Every style category follows the same two-part pattern:

• Token values. Your brand's actual token values, shown in the same shape AI tools receive them.
• General rules. Authored rule groups that explain how to use those tokens. A rule carries text, a Guidance marker (Do, Don't, Caution, or Info), and an Importance (Required, Recommended, or Optional).

The values tell AI tools what your brand uses. The rules tell them how to use it.

Modifiers and contexts#

Some token values change with circumstances, and the brand models that with two words you will meet in Activity and Version history:

• A modifier is an axis the brand varies along. Theme is the standard one.
• A context is one state on that axis, such as Dark.

Every token has a base value, used wherever no context applies, and can hold its own value per context, falling back to base where none is set. Editing a color's light and dark values side by side is exactly this: light is the base, dark is the Theme modifier's Dark context. Project overrides can target one context too, so an app can change a token in dark mode only.

Modifiers and contexts come with the brand's template; there is no screen for authoring new ones yet.

Categories#

Colors, Typography, Spacing, Radius, and Shadows come with the brand. Sizing and Layout are rules-only areas that appear once the Agent-ready starter rules pack has been added, so the sidebar and the tile grid simply do not list them until then.

Next steps#

Once your styles reflect your brand, move on to your component vocabulary and copy guidelines in the Library, or connect a project to start serving everything to your AI tools.