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.

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, a dashboard alert prompts you to Import your brand styles. 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#

Sizing and Layout are rules-only pages that appear once the Agent-ready starter rules pack has been added to the brand.

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.