---
title: "Overview"
description: "Styles hold your brand's actual token values and the rules that govern them, served to AI tools alongside every project."
label: "Overview"
date: "2026-10-05"
---
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`](/docs/connect/tools-reference). Where a style has one, the card also shows its **preset code**, with a copy button.
A CSS import after a shadcn style overwrites the values it wrote, and the card says so. The style itself stays recorded: colors, fonts, and radius are tokens, whatever last wrote them.
## 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.
You do not have to start from scratch. See [Importing styles](/docs/styles/importing-styles) to paste a CSS theme or a preset code, or ask the Agent to scan a website.
## 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](/docs/workspace/activity) and [Version history](/docs/workspace/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
Light and dark token values across general, chart, and sidebar groups.
Sans, serif, and mono families plus the text size scale.
The corner radius token scale.
The elevation and shadow token scale.
General rules for the rhythm every layout lines up to.
General rules for the dimensions AI tools reach for.
General rules for the grids and stacks AI tools compose with.
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.
Pull token values from a source you already have.