Theming (Brand Customisation)

Customising for Your Brand

In Shadcn/Studio UI Kit everything in the design system is driven by variables. Updating a variable updates every component, block, and template that references it - instantly and system-wide. No manual overrides, no hunting through individual layers.

Here's a quick reference of which collection to open for each type of customisation:

Customising Themes#

Every project has its own visual identity - different colors, different type choices, different feel. In Shadcn/Studio figma kit you can apply your brand to the entire design system in one place, rather than updating individual properties and components one by one.

Changing Theme Colors

Theme colors are the semantic variables that define the overall look of your design - primary, background, foreground, and more.

1. Open Edit → Variables and select the 🚀 Theme collection
2. Open the Theme group
3. Click the color swatch next to the variable you want to update
4. Set your new color value - update both Light and Dark values independently

Changing Opacity Colors

Opacity colors are used for overlays, hover states, and layered UI elements where full opacity would be too heavy.

1. Open Edit → Variables and select the 🚀 Theme collection
2. Click the Opacity group
3. Click the variable you want to update
4. Adjust the color or opacity value as needed for both Light and Dark modes

Changing Font Family

The font family variable controls the typeface used across all text styles in the kit.

1. Open Edit → Variables and select the 🚀 Theme collection
2. Click the Font Family group
3. Click the variable value and replace it with your chosen font name
4. Make sure the font is available in your Figma file before updating

Changing this single variable updates every text style in the kit at once.

Changing Typography

Typography variables control font size, weight, line height, and letter spacing across the kit.

1. Open Edit → Variables and select the 🚀 Theme collection
2. Click the Typography group for font-specific variables
3. For size scale adjustments, open Tailwind Variables and click the Typography group
4. Update the values you need - start with the base size variable before adjusting individual scale steps

Changing Border Radius

Border radius controls the shape feel of the entire design system - from sharp and structured to soft and rounded.

1. Open Edit → Variables and select the 🚀 Theme collection
2. Click the Border Radius group
3. Update the base radius variable first - all derived scale values (sm, md, lg, xl) are built on top of it
4. Adjust individual scale values if finer control is needed

A small base value gives a sharp, minimal feel. A larger value gives a softer, more rounded appearance across all buttons, cards, and inputs.

Changing Custom Colors

Custom color slots are extension points for brand-specific colors that fall outside the standard shadcn/ui variable set - such as a status color or a secondary brand accent.

1. Open Edit → Variables and select the 🚀 Theme collection
2. Click the Custom group
3. Click the variable you want to update and set your color value
4. Add new variables to this group if your project needs additional custom colors

You can use this section as your extension for fulfilling extra color requirements.

Changing Shadows

Shadow variables define the color values behind all effect styles in the kit.

1. Open Edit → Variables and select the 🚀 Theme collection
2. Click the Shadow group
3. Update the shadow color values for Light and Dark modes independently
4. Adjust intensity by modifying offset, radius, opacity and color values as needed

Importing New Theme#

Adding a new theme means adding a new mode column to the Theme Variables collection.

1. Open Edit → Variables and select the Themes collection
2. Click + next to the existing mode columns to add a new mode
3. Name it after your theme - for example Brand
4. Map your brand values to each variable in the new column - start with background, foreground, primary, and accent for the most visible impact
5. Extend to typography, radius, and shadow variables as needed

Once added, your theme appears as a selectable mode alongside the pre-built themes and can be applied at the page or frame level instantly.

Applying a Light and Dark Mode#

Every component and variable in the kit supports both Light and Dark mode out of the box. Switching modes doesn't require any manual changes - it's controlled entirely through the variable mode selector in Figma.

1. Select a frame or page on the canvas
2. In the right panel, find the Mode variable collection
3. Click the mode dropdown and select Light or Dark

Selecting a page applies the mode to everything on it. Selecting an individual frame lets you preview both modes side by side in the same file.

Creating New Variables and Styles#

Creating a New Variable

If you need a color that doesn't exist in the current variable set, add it to the Custom group in Theme Variables.

1. Open Edit → Variables and select Theme Variables
2. Expand the group where you want to add and click + Create variable
3. Name it clearly - for example custom/brand-background
4. Set the color value for other themes you created

5. Now you can apply it in your design

Example - adding a brand warning color:

1. Create a new variable named custom/brand-warning in the Custom group
2. Set the Light mode value to your amber brand color
3. Set the Dark mode value to a slightly adjusted version for Dark mode
4. Select any label or badge component on the canvas
5. In the right panel, click the fill color and switch to the variable picker
6. Select custom/brand-warning to apply it in the selected layer

Working with Styles

All styles in the kit are built on top of variables. This means they respond to variable changes automatically. When you update a font family variable, every text style built on it updates. When you change a shadow color variable, every effect style using it updates.

To learn more about styles, check this Figma article.

Adding a new text style

1. Select a text layer and set your desired properties in the right panel
2. Click the style icon under Text and select Create style
3. Name it using the slash convention - for example Extra/Display - to keep it organised
4. Click Create style to confirm

Applying new theme

1. Select a frame or page on the canvas
2. In the right panel, find the Themes variable collection
3. Click the mode dropdown and select a theme name
4. The entire frame or page updates instantly to reflect your theme