---
title: "Importing styles"
description: "Bring your brand's token values into UI Rules from Figma variables, a website, a pasted CSS theme, or a shadcn preset code."
label: "Importing styles"
date: "2026-10-05"
---

Importing styles replaces the default baseline with your own token values, so you do not have to set every color, font, and scale by hand. Open **Import styles** from the heading of the brand's [Styles](/docs/styles/overview) page, or use the **Import your brand styles** step of the setup guide on the brand overview, and choose the source that matches what you already have.

<Tabs items={["Figma", "Website", "CSS", "shadcn preset"]}>
  <Tab value="Figma">
### Import Figma variables

If your tokens live as variables in a Figma file, the UI Rules plugin imports the variable collections you pick as the brand's design tokens, light and dark modes included. This is the tab the dialog opens on, and it is a guide rather than a form: the import runs from Figma's side, so there is nothing to paste here. Run the plugin in your Figma library file, choose **Connect to UI Rules** and approve in your browser, then select collections and confirm the import back in Figma. See [the Figma plugin](/docs/connect/figma-plugin).
  </Tab>
  <Tab value="Website">
### Scan a website

Enter the **Website URL** of a public page and click **Scan website**. UI Rules reads the page's colors, type, spacing, radius, and shadows, then goes straight to the preview.

Above the preview, the site's address has **Change** to scan a different page and **View scan report** to open the full scan beside the form. The categories the scan found are listed as chips, all selected; turn one off to leave it out of the import, and the preview updates.

A scan looks for the standard theme variables your brand is built from. A site's own variables, such as `--brand-500` or a custom spacing scale, are listed as unmapped and are not imported. On a site that declares none of the standard variables, only the colors the page shows and its font families are measured; radius, text sizes, spacing, and shadows come in only when the site declares them.

Scans run one at a time per person, and only so many an hour.
  </Tab>
  <Tab value="CSS">
### Paste a CSS theme

Paste the CSS block that defines your theme: the variables for both light and dark. It works with any theme built for the component library your AI tools build with, so a `globals.css`, a theme export, or the output of a theme builder all drop straight in.

No theme yet? Build one on [tweakcn](https://tweakcn.com), [shadcncraft](https://shadcncraft.com/create), or [ui.shadcn.com](https://ui.shadcn.com/create), then paste the CSS it gives you.
  </Tab>
  <Tab value="shadcn preset">
### Paste a preset code

A preset is a short shareable code that carries a full theme. Paste the code by itself, the `--preset` flag, the full init command, or a preset link, and UI Rules imports the theme it points to.

Get one from [shadcncraft](https://shadcncraft.com/create) or [ui.shadcn.com](https://ui.shadcn.com/create).

Importing a preset also records it as the brand's shadcn configuration, so the brand remembers where its look came from. The [Styles](/docs/styles/overview) page shows it on the Foundation card, preset code and all.
  </Tab>
</Tabs>

## What happens on import

Every import previews first. UI Rules reads what you pasted, shows a report of what **Will apply** and what it **Skipped**, and writes nothing until you apply. Once applied, the same report shows what changed.

<Callout type="info">
Importing sets your brand's token values. It does not write rules. After importing, author rules on each style area to tell AI tools how to use the values. See the [Styles overview](/docs/styles/overview).
</Callout>

## Scanning a website from elsewhere

Besides the **Website** tab, the [Agent](/docs/agent/overview) can read a site's tokens, and so can connected AI tools over MCP when the connection key carries the `token:import` scope. Either way it previews first and writes nothing until you approve. See [What a tool can change](/docs/connect/overview#what-a-tool-can-change).