Unify Theme

The Unify Theme is a complete, production-ready reablocks theme that consumes design tokens from the Unify Design System (UDS)  — the Figma library that authors the tokens. Two distinct things, often confused:

• Unify Design System (UDS) — the design system itself. Lives in Figma at unifydesignsystem.com . Owns the variables (colors, spacing, sizing, radii, per-component detail tokens). This is the source of truth.
• Unify Theme (this page) — a reablocks theme implementation (CSS layers + a TypeScript ReablocksTheme module) that consumes UDS tokens verbatim and wires them into reablocks components. The CSS files (root.css, dark.css, light.css, tw.css) are generated from UDS via the Reablocks Figma Plugin — they are not hand-written for reablocks.

Together they form a three-level design-token system that goes deeper than the default reablocks theme: tokens are exposed at every level and for every component — not just primary / secondary / accent, but per-component detail tokens like --buttons-details-height-core-icon-lg, --inputs-details-corner-radius-primary, and --tabs-details-stroke-width-underline-lg.

This means you can re-skin at any granularity by editing UDS variables:

• Change the brand color → every component updates.
• Change the semantic --background-brand-base → every brand surface updates.
• Change just --buttons-details-corner-radius-base → only button radii change.

If you are new to theming reablocks in general (ThemeProvider, dark/light toggling, extendTheme), start with Getting Started — this page focuses exclusively on what the Unify Theme ships and how to install it.

Use this theme if you’re on the Unify Design System  in Figma. The value of pairing UDS with the Unify Theme is end-to-end sync: UDS owns the tokens in Figma, the Reablocks Figma Plugin  exports them as CSS, and the Unify Theme consumes them verbatim — so every UDS change reaches production with zero translation. If your team isn’t on UDS, you’re better off starting from the default reablocks theme and customizing it — see Getting Started and Customization.

Three-level token architecture

UDS authors tokens in Figma; the Unify Theme exposes them in three cascading CSS layers so a change in Figma travels down through all three and reaches every reablocks component without any code change:

            ┌─────────────────────────────────────────────────────┐
            │           UNIFY DESIGN SYSTEM  (Figma)              │
            │       unifydesignsystem.com — source of truth       │
            └──────────────────────┬──────────────────────────────┘
                                   │  export via Reablocks Figma Plugin
                                   ▼
            ┌─────────────────────────────────────────────────────┐
            │           UNIFY THEME  (reablocks)                  │
            │  CSS token layers + ReablocksTheme TypeScript       │
            └──────────────────────┬──────────────────────────────┘
                                   │
                                   ▼
   ┌──────────────────────────────────────────────────────────────────────┐
   │ LEVEL 1 · PRIMITIVES                                       root.css  │
   │                                                                      │
   │  • Color scales (50–1000 + alpha)                                    │
   │  • Spacing scale                                                     │
   │  • Sizing scale                                                      │
   │  • Corner-radius scale                                               │
   │  • Per-component detail tokens                                       │
   └───────────────────────────────┬──────────────────────────────────────┘
                                   │  aliased by
                                   ▼
   ┌──────────────────────────────────────────────────────────────────────┐
   │ LEVEL 2 · SEMANTIC                            dark.css / light.css   │
   │                                                                      │
   │  Role-named aliases — one file per Figma mode.                       │
   │  background-*, content-text-*, content-assets-*, stroke-*,           │
   │  effects-*, gradient-*                                               │
   └───────────────────────────────┬──────────────────────────────────────┘
                                   │  registered in
                                   ▼
   ┌──────────────────────────────────────────────────────────────────────┐
   │ LEVEL 3 · TAILWIND UTILITIES                                tw.css   │
   │                                                                      │
   │  @theme inline { … } exposes every variable as a utility class.      │
   │  bg-background-brand-base, text-content-text-neutral-1,              │
   │  border-stroke-semantic-error-3                                      │
   └────────────────────────────────┬─────────────────────────────────────┘
                                    │  consumed by
                                    ▼
            ┌─────────────────────────────────────────────────────┐
            │     reablocks components  (no code changes)         │
            └─────────────────────────────────────────────────────┘

Levels 1–3 are the Unify Theme for reablocks. The top tier is UDS in Figma — it defines what tokens exist; the Unify Theme just surfaces them to reablocks.

The per-component detail tier in Level 1 is what makes this pairing uniquely customizable — you can tune individual component dimensions (button heights, input padding, tab underline thickness, etc.) without writing Tailwind overrides, because each component theme already references those variables through arbitrary-value classes like h-(--buttons-details-height-core-icon-lg).

Exporting UDS tokens for the Unify Theme

The official Reablocks Figma Plugin is the bridge between UDS (Figma) and the Unify Theme (reablocks). Its one-click Export Styles action reads UDS variables from your Figma file and produces a complete, ready-to-use CSS bundle as a zip — the Level 1–3 layers consumed by the Unify Theme. Designers and engineers stay in sync without hand-copying tokens.

Running the plugin

1. Open your Figma design file in the Figma desktop app.
2. Run Plugins → Reablocks Figma Plugin (or CMD + P / Ctrl + P → search “Reablocks”).
3. (Optional) If your file has multiple Style modes (e.g. compact vs. comfortable typography), pick one from the Style dropdown. The plugin only shows this dropdown when more than one Style mode exists.
4. Pick the Default theme (Dark or Light). This decides which mode is emitted at :root without a wrapping selector — the other mode is wrapped in .theme-* / [data-theme='*'] selectors so it can be toggled at runtime.
5. Click Export Styles. The browser downloads <figma-file-name>-styles.zip.
6. Unzip into your styles directory (e.g. src/assets/styles/). The archive already contains the full file set in the correct shape — no manual file picking or renaming required.

What’s in the zip

Switching themes at runtime

The default theme (the one you picked in step 4) is already applied at :root. Toggle the other theme by setting a class or data-theme attribute on a wrapping element:

<html class="theme-dark">  <!-- or class="theme-light" -->
<html data-theme="dark">    <!-- equivalent -->

Inspecting individual sections (legacy flow)

If you only need to pull a single section into an existing stylesheet, open the Inspect variables disclosure below the export button. Pick a Mode, click Generate, then Copy under any of the four sections (Root / Mode / Component / Other). The export-zip flow above is the recommended path for everything else.

Download the pre-built TypeScript theme

If you want a ready-made starting point for the TypeScript half of Unify, grab the single-file bundle — every component theme plus the composed ReablocksTheme in one file:

📄 Download themeUnify.ts

Drop it anywhere in your src/ (e.g. src/themeUnify.ts or src/shared/utils/Theme/themeUnify.ts) and import the composed theme:

import { theme } from './themeUnify';

Then jump to Wire it up at the app root. The CSS token layers (root.css / dark.css / light.css / tw.css) still come from the Figma plugin export — themeUnify.ts references those CSS variables and Tailwind utilities, so it expects them to be present in your stylesheet.

Prefer per-component files for easier diffing and overrides? themeUnify.ts also exports each component theme individually (buttonTheme, inputTheme, …), so you can split it back into the File layout below by hand or use it as-is.

Install with AI

Prefer to let an AI coding agent set this up? Pick your framework and copy the prompt — a self-contained brief that first installs the official reablocks AI skills (npx skills add reaviz/skills), then walks Claude Code, Cursor, or any agent through the full Unify setup on this page: Tailwind v4 wiring, the themeUnify.ts module, the UDS CSS token layers, and the ThemeProvider. Also available as raw Markdown at /install-prompt/<framework>?theme=unify.

# Add reablocks (Unify Theme) to my Next.js (App Router) project

You are an expert React engineer. Add **reablocks** with the **Unify Theme** — the production design-token theme synced with the Unify Design System (UDS) in Figma, built on **Tailwind CSS v4** — to my existing **Next.js (App Router)** project.

Start by installing Reaviz's official AI skills (Step 1) so you have the canonical, up-to-date reablocks knowledge loaded, then follow the remaining steps exactly. Do not substitute a different UI or styling library, and do not change my app architecture beyond what these steps require.

## ALWAYS do

- Install the official reablocks AI skills first (`npx skills add reaviz/skills`) and follow them — they carry Reaviz's canonical, current reablocks + Tailwind v4 guidance.
- Use **Tailwind CSS v4** — the `@import "tailwindcss"` + `@source` + `@theme` syntax. reablocks targets v4, not v3.
- Install only the dependencies listed below.
- Install the Unify assets as files (Step 4) — the CSS token layers and the `themeUnify.ts` module live in the repo, not in the npm package.
- Wrap the app with `<ThemeProvider theme={theme}>` where `theme` comes from the `themeUnify` module (`ThemeProvider` itself comes from `reablocks`).
- Put a `theme-dark` (or `theme-light`) class on the root `<html>` element.
- Use my existing package manager — detect it from the lockfile (npm / pnpm / yarn / bun) and translate the install commands accordingly.

## NEVER do

- Do NOT use Tailwind v3 syntax — no `@tailwind` directives, no `tailwind.config` content globs. reablocks needs v4.
- Do NOT install or scaffold a different component library or design system.
- Do NOT import the default `theme` from `reablocks` — for Unify the theme comes from the `themeUnify` module.
- Do NOT try to import Unify CSS or a Unify theme from the reablocks npm package — they are not shipped; the assets are installed as files in Step 4.
- Do NOT paste the default reablocks token block into the stylesheet — `tw.css` already registers every Unify token.
- Do NOT reorder the imports inside `index.css` — `tw.css` must come last.
- Do NOT place `<ThemeProvider>` inside a Server Component (Next.js App Router); it must live in a Client Component.

## Steps

### 1. Install the reablocks AI skills

Install Reaviz's official AI skills so you have the canonical, always-current reablocks API + Tailwind v4 setup knowledge loaded before you start:

```sh
npx skills add reaviz/skills
```

(Team alternative: symlink the `reablocks` skill tree into `.claude/skills/`.) Once installed, follow the skills' guidance — the steps below match it.

### 2. Install dependencies

```sh
npm install reablocks
npm install -D tailwindcss@4 @tailwindcss/postcss
```

(Use the equivalent for your package manager — e.g. `pnpm add` / `pnpm add -D`, `yarn add` / `yarn add -D`, `bun add` / `bun add -d`.)

### 3. Enable the Tailwind v4 PostCSS plugin

Next.js processes CSS through PostCSS, so add the Tailwind v4 plugin to your PostCSS config (`postcss.config.mjs` — create it if missing):

```js
// postcss.config.mjs
export default {
  plugins: {
    '@tailwindcss/postcss': {}
  }
};
```

If a `postcss.config.{js,cjs,mjs,ts}` already exists, add the `@tailwindcss/postcss` plugin to that file instead of creating a second config.

### 4. Install the Unify Theme assets

The Unify Theme is two parts — Figma-generated CSS token layers and a TypeScript component-theme module. Neither ships inside the `reablocks` npm package; install both as files:

**a) Download the component-theme module** to `src/themeUnify.ts`:

```sh
curl -o src/themeUnify.ts https://reablocks.dev/assets/themeUnify.ts
```

**b) Copy the CSS token layers** — `index.css`, `common.css`, `root.css`, `dark.css`, `light.css`, `tw.css` — into `src/assets/styles/`. They live at `src/assets/styles/` on the `main-react-query` branch of the official Unify starter:

https://github.com/goodcodeus/app-starter/tree/main-react-query

(If the team uses the Unify Design System in Figma, export fresh layers instead: Reablocks Figma Plugin → **Export Styles** → unzip into `src/assets/styles/`.)

`tw.css` already contains `@import 'tailwindcss'`, the `@source` directive for reablocks, and the `@theme inline` token registration — do not add the default reablocks token block on top. Verify the `@source` path resolves to `node_modules/reablocks` relative to `src/assets/styles/tw.css`; if components render unstyled, adjust the `../` depth.

### 5. Set the default theme class on `<html>`

In `src/app/layout.tsx`, add the theme class to the root `<html>` tag (set it once):

```tsx
<html lang="en" className="theme-dark">
```

Swap `theme-dark` for `theme-light` to default to light mode. Unify also recognizes `.dark` / `.light` classes and `data-theme` attributes.

### 6. Wrap your app with ThemeProvider + import the styles

Import the Unify styles entry once at the app root and wrap the app with `<ThemeProvider>`, using the `theme` from the `themeUnify` module — NOT the default theme from the package. Keep the import order inside `index.css` unchanged: `tw.css` must stay last:

```tsx
// src/app/providers.tsx  — new client component
'use client';

import { ThemeProvider } from 'reablocks';
import { theme } from '../themeUnify';
import type { ReactNode } from 'react';

export function Providers({ children }: { children: ReactNode }) {
  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
}

// src/app/layout.tsx  — edit your existing layout:
//   1. import the Providers component and the Unify styles entry
//   2. add the theme class to <html>
//   3. wrap {children} with <Providers>
import { Providers } from './providers';
import '../assets/styles/index.css';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" className="theme-dark">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}
```

## Verify

After the changes, confirm each item:

- [ ] `reablocks`, `tailwindcss` (v4) and `@tailwindcss/postcss` are in `package.json`.
- [ ] `src/assets/styles/` contains `index.css`, `common.css`, `root.css`, `dark.css`, `light.css` and `tw.css`; `src/themeUnify.ts` exists.
- [ ] `src/assets/styles/index.css` is imported by the app entry, with `tw.css` last in its import chain.
- [ ] `src/app/layout.tsx` has `className="theme-dark"` on the `<html>` tag.
- [ ] The app root is wrapped in `<ThemeProvider theme={theme}>` with `theme` imported from the `themeUnify` module.
- [ ] A `<Button>` imported from `reablocks` renders with Unify styling (UDS tokens — e.g. `bg-background-brand-base` resolves).

Report each item as ✅ or ❌ when you are done.

Prerequisites

npm install reablocks
npm install -D tailwindcss @tailwindcss/postcss postcss postcss-nested postcss-preset-env

Unify is built for Tailwind CSS v4+ and reablocks v10+ with React 18+.

File layout

The Unify Theme is split into two parts:

• CSS token files — the UDS tokens, generated by the Reablocks Figma Plugin. These are not authored by hand; they are an export of UDS.
• TypeScript component-theme module — the downloadable themeUnify.ts. This is the reablocks-specific glue that maps UDS tokens onto reablocks’s ReablocksTheme slots.

Recommended: single-file TypeScript theme

The simplest layout — one TS file alongside the CSS layers from the plugin:

src/
├─ assets/
│  └─ styles/
│     ├─ index.css        # entry — imports the others
│     ├─ common.css       # base body styles & global resets
│     ├─ root.css         # Layer 1 — primitive tokens (incl. per-component detail)
│     ├─ dark.css         # Layer 2 — semantic tokens (default / dark mode)
│     ├─ light.css        # Layer 2 — semantic tokens overridden for light mode
│     └─ tw.css           # Layer 3 — Tailwind @theme registration
└─ themeUnify.ts          # every component theme + composed ReablocksTheme

Optional: split per component

If you’d rather maintain each component theme in its own file (easier to diff and review individual changes), split themeUnify.ts along its // region markers:

src/
├─ assets/styles/         # same as above
└─ shared/
   └─ utils/
      └─ Theme/
         ├─ index.ts
         ├─ theme.ts                  # composes ReablocksTheme
         └─ components/               # one file per component theme
            ├─ ButtonTheme.ts
            ├─ InputTheme.ts
            ├─ SelectTheme.ts
            └─ …

Both layouts are functionally identical — only the only requirement is that the CSS files are imported once, in order, before your app renders.

Step 1 — Install the CSS token layers

💡 You normally don’t write these files by hand — the Reablocks Figma Plugin’s Export Styles button produces the complete set (index.css, common.css, root.css, light.css, dark.css, tw.css) as a zip. The snippets below are reference, useful if you want to know what each file contains or need to inspect an exported bundle.

index.css — entry point

@import "./common.css";
@import "./light.css";
@import "./dark.css";
@import "./root.css";
@import "./tw.css";

Import order matters: light.css and dark.css must come before root.css is fully registered as Tailwind’s source of truth, and tw.css must come last so it can reference all the variables.

common.css — global base styles

body {
  color-scheme: dark;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
 
  @apply font-sans text-base;
  line-height: 1.3;
}
 
body,
#root {
  margin: 0;
  display: flex;
  min-height: 100vh;
  width: 100vw;
 
  @apply bg-background-neutral-canvas-base text-content-text-on-color-light-dark;
}

root.css — Layer 1: primitives + per-component detail

The raw palette plus per-component detail tokens — the concrete UDS values. This is the file you regenerate from UDS on every design-system bump — re-run the plugin against your UDS Figma file and replace the zip contents in your styles directory:

• Color scales — every hue has a 50-1000 scale plus an alpha (-a-) variant.
• Spacing — --spacing-padding-{4xs..8xl} and --spacing-space-between-{3xs..4xl}.
• Sizing — --sizing-asset-{3xs..4xl}, --sizing-size-tokens-{4xs..6xl}, --sizing-dividers-details-*.
• Corner radius — --corner-radius-{sharp, sm, primary, lg, pill}.
• Per-component detail tokens — what makes Unify deeply customizable: --buttons-details-height-core-icon-lg, --inputs-details-corner-radius-primary, --tabs-details-stroke-width-underline-lg, --calendar-details-vertical-padding-inside, --navigation-details-corner-radius-row-item, --notifications-details-asset-size-base, --selectors-details-width-toggle-lg, --table-details-padding-row-cell-lg, …

:root,
:host {
  /* Colors */
  --color-blue-hyperstream-500: #3476ff;
  --color-blue-hyperstream-600: #105eff;
  /* …more brand scales… */
 
  /* Spacing */
  --spacing-padding-base: 16px;
 
  /* Corner radius */
  --corner-radius-primary: 6px;
 
  /* Per-component detail — the Unify differentiator */
  --buttons-details-height-core-icon-lg:   var(--sizing-size-tokens-base);
  --inputs-details-corner-radius-primary:  var(--corner-radius-primary);
  --tabs-details-stroke-width-underline-lg: 2px;
  /* …more per-component detail tokens */
}

dark.css — Layer 2: semantic tokens (default)

Maps role-named aliases onto primitives:

:root,
:host {
  --reablocks-theme: dark;
 
  --background-neutral-canvas-base: var(--color-neutrals-darth-abyss-a-1000);
  --background-brand-base:          var(--color-blue-hyperstream-a-1000);
  --background-semantic-error-base: var(--color-red-crimson-wrath-a-1000);
 
  --content-text-neutral-base: var(--color-neutrals-kyber-crystal-a-1000);
  --content-text-brand-base:   var(--color-blue-hyperstream-a-1000);
 
  --stroke-neutral-3:         var(--color-neutrals-kyber-crystal-a-300);
  --stroke-focused-highlight: var(--color-blue-hyperstream-a-500);
 
  /* …accents 1-4, info, success, warning, gradient stops, shadows… */
}

light.css — Layer 2: light-mode overrides

Same shape as dark.css but scoped to a selector that activates light mode. Unify recognizes six selector aliases so you can integrate with any theme-switch library: .theme-light, .light, [data-theme='light'] (and their &-prefixed forms).

:root,
:host {
  .theme-light,
  &.theme-light,
  .light,
  &.light,
  [data-theme='light'],
  &[data-theme='light'] {
    --reablocks-theme: light;
 
    --background-neutral-canvas-base: var(--color-neutrals-kyber-crystal-a-1000);
    --content-text-neutral-base:      var(--color-neutrals-darth-abyss-a-1000);
    /* …same tokens flipped for light surfaces… */
  }
}

Because both modes target the same semantic names, every component automatically re-skins when the theme attribute changes. No component code to update.

tw.css — Layer 3: Tailwind registration

This is the bridge: it tells Tailwind v4 to expose every CSS variable as a utility class.

1. @import 'tailwindcss'; — pull Tailwind v4 in.
2. @source "node_modules/reablocks"; — keeps reablocks’s compiled classes alive through Tailwind’s purge.
3. @custom-variant dark/light/disabled-within — registers variant selectors matching the class/attribute on the root element.
4. @theme inline { … } — maps every CSS variable to a --color-*, --radius-*, --text-*, --font-* token Tailwind recognizes.

@import 'tailwindcss';
@source "node_modules/reablocks";
@source inline("line-clamp-{1..10}");
 
@custom-variant disabled-within (&:has(input:is(:disabled), textarea:is(:disabled), button:is(:disabled)));
 
@theme inline {
  --font-sans:  'Inter', sans-serif;
  --font-mono:  'Share Tech Mono', monospace;
 
  --radius-primary: var(--corner-radius-primary);
  --radius-lg:      var(--corner-radius-lg);
  --radius-pill:    var(--corner-radius-pill);
 
  /* Reset default Tailwind palettes — Unify owns the names */
  --color-red-*:    initial;
  --color-blue-*:   initial;
  --color-green-*:  initial;
 
  /* Re-register every primitive + semantic token as a utility */
  --color-background-brand-base:    var(--background-brand-base);
  --color-content-text-neutral-1:   var(--content-text-neutral-1);
  --color-stroke-semantic-error-3:  var(--stroke-semantic-error-3);
  /* …all tokens follow the same pattern */
}

The full file is generated alongside root.css by the Figma plugin and produces utilities like:

• bg-background-brand-base / bg-background-neutral-raised-2
• text-content-text-neutral-1 / text-content-text-semantic-error-base
• border-stroke-brand-3 / border-stroke-neutral-5
• fill-content-assets-brand-base
• rounded-(--corner-radius-primary) (arbitrary-value form)
• h-(--buttons-details-height-core-icon-lg) (per-component detail)

postcss.config.ts

export default {
  plugins: {
    '@tailwindcss/postcss': {},
  }
};

Step 2 — Add the component-theme module

This is the reablocks-side glue. The TypeScript half maps reablocks’s ReablocksTheme slots onto Tailwind utilities that reference the UDS tokens you just installed in Step 1. Each component theme references both Tailwind utilities (semantic colors) and the per-component detail variables (dimensions, radii, gaps), so component dimensions are tunable from CSS — that is, from UDS — alone.

For example, ButtonTheme.ts references the detail tier directly:

// excerpt from ButtonTheme.ts
sizes: {
  small:  'h-(--buttons-details-height-core-icon-sm) text-xs px-(--buttons-details-horizontal-padding-sm)',
  medium: 'h-(--buttons-details-height-core-icon-md) text-sm px-(--buttons-details-horizontal-padding-md)',
  large:  'h-(--buttons-details-height-core-icon-lg) text-base px-(--buttons-details-horizontal-padding-lg)',
},

Change --buttons-details-height-core-icon-md in root.css and every medium button across the app re-flows — no component override, no Tailwind class change.

shared/utils/Theme/theme.ts — root composition

import { type ReablocksTheme } from 'reablocks';
 
import { arrowTheme }          from './components/ArrowTheme';
import { avatarTheme }         from './components/AvatarTheme';
import { buttonTheme }         from './components/ButtonTheme';
import { inputTheme }          from './components/InputTheme';
import { selectTheme }         from './components/SelectTheme';
import { tabsTheme }           from './components/TabsTheme';
// …more imports
 
export const theme: ReablocksTheme = {
  components: {
    avatar:  avatarTheme,
    arrow:   arrowTheme,
    button:  buttonTheme,
    input:   inputTheme,
    select:  selectTheme,
    tabs:    tabsTheme,
    // …more slots
  },
};

Components included

Wire it up at the app root

// src/index.tsx
import { ThemeProvider } from 'reablocks';
import { theme } from 'shared/utils/Theme';
 
import './assets/styles/index.css'; // pulls in all CSS layers
 
<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

For the rest — provider mechanics, runtime theme switching, server-side rendering — see Getting Started.

Example Repository

You can use the Unify  starter repository to get started with Reablocks and the Unify Theme — it ships with the CSS token layers, the themeUnify.ts component-theme module, and the ThemeProvider wiring already in place.

Unify-specific customization

For generic single-component overrides via extendTheme, see Customization. The patterns below are unique to the Unify Theme because they leverage UDS’s token tiers — most “customization” is really editing UDS tokens, not editing reablocks component code.

Re-brand by replacing the primitive scale

Open root.css and replace the --color-blue-hyperstream-* scale with your hex codes. Every semantic alias (--background-brand-base, --content-text-brand-1, …) and every component that uses them updates automatically.

/* root.css */
--color-blue-hyperstream-500: #ff6b35;
--color-blue-hyperstream-600: #e55a2b;
--color-blue-hyperstream-a-1000: #ff6b35;

The better path is to do this in Figma and re-export via the plugin.

Tune a single component without code

Per-component detail tokens let you reshape components from CSS alone. To make every medium button shorter:

/* root.css */
--buttons-details-height-core-icon-md: 28px;  /* was 32px */

To soften input corners across the app:

--inputs-details-corner-radius-primary: 10px;  /* was 6px */

To change tab underline thickness:

--tabs-details-stroke-width-underline-lg: 4px;  /* was 2px */

Adjust the spacing or sizing scale

Spacing, sizing, and radius scales are exposed as CSS variables in root.css. Change a single value and every component that references it (via Tailwind’s p-(--spacing-padding-base) or h-(--sizing-size-tokens-sm) arbitrary-value syntax) re-flows:

--spacing-padding-base:   20px;  /* was 16px */
--corner-radius-primary:  8px;   /* was 6px */
--sizing-size-tokens-base: 44px; /* was 40px */

Add your own semantic role

Need a tertiary brand or a fifth accent? Add the semantic alias in dark.css (and mirror it in light.css), then register it in tw.css under @theme inline:

/* dark.css */
--background-tertiary-base: var(--color-purple-fuchsia-a-1000);
 
/* tw.css */
@theme inline {
  --color-background-tertiary-base: var(--background-tertiary-base);
}

Now bg-background-tertiary-base is a valid utility in components.

Troubleshooting

Tailwind utilities like bg-background-brand-base are unknown. The @theme inline { … } block in tw.css must register the variable as a --color-* (or --radius-*, --text-*, etc.) for Tailwind to emit a utility. If you added a new semantic token, you also need to alias it in tw.css.

Default Tailwind palettes leak in. Unify deliberately resets --color-blue-*, --color-red-*, etc. to initial so its own scale owns those names. For a one-off stock-Tailwind color, use an arbitrary value (bg-[#3b82f6]) or remove the relevant initial line in tw.css.

reablocks components render unstyled in production. Tailwind’s purger is dropping reablocks classes. Verify the @source directive in tw.css points at your node_modules/reablocks — the path is relative to the CSS file, so monorepos may need a different number of .. segments.

Per-component detail tokens don’t take effect. Verify the override is declared after root.css in your CSS import chain. If you put bespoke tokens in overrides.css, import it last:

@import "./root.css";
@import "./overrides.css";  /* must come after root.css */
@import "./tw.css";

Recommended cadence

• Designers keep UDS variables in Figma as the single source of truth.
• Engineers re-run the Reablocks Figma Plugin on UDS bumps (one click → Export Styles → unzip into the styles directory) and commit the regenerated CSS — component themes reference Tailwind utilities, so there is almost never any TypeScript to update.
• Don’t hand-edit the generated files; put bespoke tokens in a separate overrides.css imported after root.css.

Reference

• Unify starter repository: goodcodeus/app-starter 
• Unify Design System (Figma source of truth): unifydesignsystem.com 
• UDS → CSS export: Reablocks Figma Plugin 
• General theming (ThemeProvider, dark/light, basic customization): Getting Started
• Single-component overrides via extendTheme: Customization
• Storybook theme blocks: Theme Blocks
• Full API surface for component slots: Theme API