CSS link and Tailwind

Every saved design system has three files you can link to. They update when you save in Studio.

The three files

Each file is built from your saved system and served by its id. Put your id where you see <id>.

File	What it is	Use it for
`/s/<id>.css`	CSS variables for light and dark	Any website: plain HTML, WordPress, Webflow
`/s/<id>.tailwind.css`	A Tailwind v4 theme. It starts with `@import "tailwindcss"`.	Tailwind v4 projects
`/s/<id>.json`	W3C design tokens (DTCG), all files in one JSON object	Style Dictionary and other token tools

The full address is https://useuix.com/s/<id>.css, and the same for the other two.

Plain CSS

Link the file
Paste this into your page’s <head>, before your own styles.
index.html
```
<link rel="stylesheet" href="https://useuix.com/s/<id>.css">
```

Use the variables

Use the semantic names like --bg-surface and --text-primary, not the raw shades. They switch on their own in dark mode.

styles.css

body {
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-body);
}

.button {
  background: var(--bg-brand);
  color: var(--text-on-brand);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
}

Dark mode
The file has a light set on :root, a dark set for [data-theme="dark"], and follows the visitor’s device when data-theme isn’t set. See Themes and dark mode.

Tailwind v4

The Tailwind file is a full theme. It starts with @import "tailwindcss" and puts every token in @theme, so download it and use it as your main CSS file (for example src/index.css).

Then the utilities map to your tokens:

Card.tsx

<div className="bg-surface text-fg-primary border border-line-default rounded-md p-4 shadow-md">
  Cards, borders and text come from your system.
</div>

A downloaded copy doesn’t change when you edit the system. To stay in sync, use the CLI instead: npx uix-ui pull <id> writes the theme to src/styles/uix.css, and npx uix-ui sync updates it.

Design tokens JSON

/s/<id>.json holds your W3C DTCG token files as one object. Each key is a file name:

<id>.json

{
  "tokens/primitives.tokens.json": { … },
  "tokens/theme.light.tokens.json": { … },
  "tokens/theme.dark.tokens.json": { … },
  "tokens/$themes.json": { … }
}

Split it into files and feed them to Style Dictionary or any tool that reads DTCG tokens. The CLI does this for you: pull writes them to src/styles/tokens/.

When changes show up

The files update when you save in Studio. Saved changes reach the link within about a minute: browsers may keep a copy for 60 seconds and our servers for 30.

Need the new version right away? Add ?v= and a new number to the address, like /s/<id>.css?v=2. The file is the same; only the caches are skipped.

What your plan changes

The files follow the plan of the system’s owner. Free gets light and dark. UIX Pro adds any extra themes, such as high contrast, and the Pro items in the shadcn registry. If a Pro plan ends, the files fall back to the Free version within a day.

Access and privacy

Any site can load these files. They are served with open CORS, so fetch() from your own app works too.
Anyone with the id can read them, like a shared link. Your list of systems stays private to your account.