Multi brand v2 (beta) - Documentation

This tutorial covers two releases that belong together: multi brand v2 in the kit and version 3 of the CSS Export plugin. Multi brand v2 puts several brands in one kit file, each with its own colors, type, corner radius, spacing and component details. CSS Export v3 turns each brand into CSS that stays valid shadcn/ui code. One doesn’t work without the other: the file needs the plugin to export a brand, and the plugin’s new options only appear in a multi brand file.

Beta, Organization and Enterprise only. Multi brand v2 is part of the Organization and Enterprise licenses. Both the file and the plugin are in beta: names and behavior can still change. The prepared Vega file (version 2.6.0, multi brand) is in the customer center, in the downloads for Organization and Enterprise licenses. You’ll find the link to the customer center in your original purchase email. It works together with version 3 of the CSS Export plugin.

The problem it solves#

In the regular single brand kit you can theme colors per mode, and the CSS Export picks those up. Radius and spacing are a different story.

Say you change radius-sm from 6 to 8, or md in the spacing scale from 16 to 12. In Tailwind those names have a fixed meaning. p-4 is four steps of spacing, rounded-sm is 0.6 times the base radius. Change one value and it no longer means what every shadcn component assumes it means.

Multi brand v2 gives you two ways to change a brand that keep those meanings intact:

Scale the whole scale with one number per brand.
Change one component through its own variable.

How the file is built up#

A brand is one mode name, used in several collections. Each collection is a layer:

Collection	What a brand sets there
`theme`	Neutrals and destructive colors (for example neutral and red)
`shadcn colors`	A `<brand>` mode, and optionally a `<brand>-dark` mode if the brand needs dark mode
`typography`	Font families and weights, with optional custom type styles
`border radii`	The brand’s base radius
`spacing`	The brand’s spacing factor
`components`	Per-component values: `button/radius`, `card/header/gap`, …

Turning on CSS Export v3#

Version 3 of the CSS Export plugin is already published on the Figma Community, so you don’t install anything new. Its new functionality stays hidden until your file has the right variable. Without the switch below the plugin works exactly as version 2, also in a file that has brand modes.

To turn it on in a file:

Open the variables panel (Local variables).
Create a new collection and name it feature-flags.
In it, create a boolean variable named css-export-v3.
Set it to true.
Open the CSS Export plugin, or press the reload button in Setup if it was already open.

Setup now lists theme, border radii and spacing next to the collections you already knew, each with a mode picker. Set the variable to false, or remove it, and the plugin goes back to version 2 behavior.

If you start from our 2.6.0 beta file, this step is already done. If you are working from an existing file, use our migration plugin.

Step 1: add a brand#

Add a mode with your brand’s name (say acme) to theme, typography, border radii, spacing and components. In shadcn colors add two: acme and acme-dark. Every new mode starts as a copy of shadcn, so nothing changes until you edit a value.

To see a brand on the canvas, select a frame and set the mode of each collection to your brand in the Appearance panel.

Step 2: colors and type#

In theme, point the brand’s neutrals at another palette (stone, slate, …) and pick its destructive color. The semantic colors in shadcn colors alias the theme, so light and dark both follow.

In typography, set the brand’s font family. All text styles are bound to it.

Step 3: radius and spacing, one number each#

Each of these two collections has one number per brand that scales the whole scale:

In border radii: base-radius (only affects CSS export), the brand’s base radius in thousandths of a rem. 625 is 0.625rem, shadcn’s default. 0 gives square corners, 1000 gives 1rem.
In spacing: spacing-multiplier (only affects CSS export), the brand’s factor. 1 is Tailwind’s default. 0.5 halves every step, 1.25 makes everything a quarter roomier.

These two numbers change the code, not the design. Type 0.5 in spacing-multiplier and nothing moves on the canvas. Figma variables can’t calculate, so the steps you see in Figma (xs, sm, md, radius-sm, …) keep the values they had. The only thing that reads the number is the CSS Export plugin, when it writes --spacing or --radius. That is why the names end in “(only affects CSS export)“.

This matches how Tailwind itself works. In Tailwind v4 the whole spacing scale hangs off one theme variable, --spacing, which is 0.25rem by default: p-4 is calc(var(--spacing) * 4), gap-2 is calc(var(--spacing) * 2), and so on. Setting --spacing is Tailwind’s own way to set your spacing scale globally, and the multiplier is that same knob. shadcn/ui does the same for corners: --radius-sm to --radius-4xl are all calculated from --radius.

So there are two things to set, and they are separate:

What	Where	Affects
The number	`spacing-multiplier` or `base-radius` in your brand’s mode	The exported CSS only
The steps	`xs`, `sm`, `md`, … or `radius-sm`, `radius-md`, … in your brand’s mode	The design in Figma only

You type the number yourself. Changing the steps only affects what you see in Figma, and changing the number only affects the code, so ideally the two tell the same story: every step is its shadcn value times your number.

If you use the CSS Export and want the preview in Figma to match the code, your math has to add up. With a multiplier of 0.5, every step should be exactly half of the shadcn mode’s value; with a base-radius of 1000, radius-sm should be 9.6, radius-md 12.8, radius-lg 16, and so on (0.6, 0.8 and 1 times 16 px). You can set the steps by hand, or use the Recalculate scales button of the migration plugin, which fills them in from the number. Where the math doesn’t add up, the CSS Export tells you (see step 4).

An example. shadcn’s sm spacing is 12 px and your brand wants 6:

Set spacing-multiplier (only affects CSS export) to 0.5 in your brand’s mode. Nothing changes in Figma yet; the exported CSS for this brand will be at half spacing.
Set the brand’s steps to half as well: xs 4, sm 6, md 8, xl 12. Now the design shows the same thing.
In code, sm is still three steps. The step itself went from 4 px to 2 px, for this brand only.

Step 4: decide what reaches the code#

Both border radii and spacing have a boolean variable Using CSS export plugin, set per brand mode.

Value	In Figma	In the exported CSS
true	The brand’s scale follows its one number	Only that number is written: `--radius` or `--spacing`
false	The brand’s values can be anything; they are there to show a look	Nothing from that collection; shadcn’s defaults stay

Either way the export is valid shadcn CSS. The plugin never writes a redefined single token like “sm = 6px”. With the switch on, a brand at half spacing exports this one extra line:

@theme inline {
  --spacing: 0.125rem;
}

and every p-*, gap-* and h-* class follows it.

The defaults are true for border radii and false for spacing. Scaling all spacing changes every component at once, so it is your call per brand.

The plugin tells you when Figma and the CSS would differ, for example: Spacing “acme” is not exported, so the CSS keeps Tailwind’s spacing: sm is 6px in Figma, 12px in the CSS.

Step 5: change one component#

Scaling the whole scale is a blunt tool. For “rounder buttons” or “tighter cards”, use the components collection. It holds variables named after shadcn’s own classes:

button/radius, button/size-default/padding-x
card/radius, card/header/gap
input/height, tabs/trigger/padding-x, …

There is one wherever shadcn’s eight styles (Vega, Nova, Luma, …) differ for a component, and each variable’s description lists the value in every style. In the shadcn mode they point at the kit’s regular tokens. In your brand’s mode, point button/radius at radius-none or button/size-default/padding-x at xl, and only that component changes. The tokens keep their meaning.

Exporting the components collection as code is not in the beta yet. For now these values show the brand in Figma.

Step 6: export a brand#

Open the CSS Export plugin. In a multi brand file, Setup lists more collections than usual:

theme, border radii, spacing, typography, shadcn colors: pick your brand’s mode in each. shadcn colors pairs acme with acme-dark on its own.
Check the warnings, if any.
Copy or download the CSS, and repeat per brand.

How a developer applies one stylesheet per brand is the same as before; see the designer tutorial.

Moving an existing file#

Already customized one of our kit files? You don’t have to start over in the beta file. We offer a migration plugin, Obra Multi Brand v2 Migration on the Figma Community, that turns your existing file into a multi brand setup:

It adds the css-export-v3 switch, the two numbers and switches in border radii and spacing, and the components collection.
It binds your components and their icons to the new component variables.
Your file looks the same afterwards. Every new variable starts with the value your components already used.

Run it on a copy of your file. It has a dry run that lists every change before anything is changed, and a progress bar while it works. Install the plugin from the Figma Community.

On a Pro license? Multi brand v2 is part of the Organization and Enterprise licenses. If you have a Pro license and want to use this feature, you’ll need to upgrade to Organization or Enterprise. Buy the upgrade on the pricing page.