Wire a Design System into your code or Figma file

Beyond AI tools, every Design System ships with three token files that plug straight into design and development environments. They’re useful on their own — you can ignore the AI side of things entirely and still get value from a BYQ Design System as a token source for your project.

This chapter covers all three: tokens.json for Figma and design pipelines, theme.css for Tailwind v4, and variables.css for everything else.

‍

‍

tokens.json — for Figma and token pipelines

The tokens.json file follows the Design Tokens Community Group format — a structured JSON standard for representing design tokens. Any tool that supports the format can read this file.

The most common use is Figma, via the Tokens Studio plugin:

1. Install the Tokens Studio for Figma plugin from the Figma plugin store.
2. Open the plugin in your Figma file.
3. Import the tokens.json file from BYQ.
4. The plugin turns each token into a Figma variable — colors, typography, spacing — that you can apply to elements throughout your design.

From there, the tokens behave like any other Figma variable. Update one, and everything using it updates with it.

Other supported workflows:

The same file works in token pipelines like Style Dictionary, which can transform it into platform-specific outputs — Tailwind config, iOS Swift constants, Android XML, plain CSS, and more. If you’re already running a token pipeline, point it at the BYQ file and it should work out of the box.

Any other tool that accepts a DTCG-formatted JSON token file will also work. The format is intentionally tool-agnostic.

‍

theme.css — for Tailwind v4

The theme.css file is a single [class]@theme[/class] block that defines every token from the Design System as a Tailwind utility. Drop it into a Tailwind v4 project and the utilities are available immediately:

• [class]bg-color-paper-cream[/class], [class]text-color-midnight-ink[/class] for colors
• [class]font-fragment-mono[/class], [class]text-display-xl[/class] for typography
• [class]p-spacing-32[/class], [class]gap-spacing-16[/class] for spacing
• [class]rounded-radius-cards[/class], [class]rounded-radius-pill[/class] for border radius

To use it:

1. Download theme.css from the Design System.
2. Place it in your project’s CSS entry point (or import it from there).
3. Make sure your project is using Tailwind v4 — [class]@theme[/class] syntax doesn’t work in v3 or earlier.

That’s the entire setup. No config file changes, no plugin, no rebuild step beyond what Tailwind already does.

This file pairs especially well with AI builders that default to Tailwind v4, like v0 and Lovable. Hand the AI both DESIGN.md and theme.css, and it can generate Tailwind code that uses the template’s tokens directly.

‍

variables.css — for any CSS project

The variables.css file is the most portable of the three. It’s a [class]:root[/class] block of plain CSS custom properties:

:root {
 --color-paper-cream: #f7f6f5;
 --color-midnight-ink: #231f23;
 --spacing-32: 32px;
 ...
}

No framework, no preprocessor, no setup. Anywhere CSS works, this file works.

Common use cases:

• Vanilla HTML/CSS projects — drop the file in and reference variables anywhere.
• React, Vue, Svelte projects without Tailwind — same as above.
• Webflow custom code — paste the contents into a project’s custom code (Settings → Custom Code → Head) to make the tokens available throughout the site.
• Any project that needs token portability without a build step.

Once the file is loaded, use the variables like normal CSS:

.hero-card {
 background: var(--color-paper-cream);
 padding: var(--spacing-32);
 border-radius: var(--radius-cards);
}

‍

Which file should you use?

If you’re working in Figma, use tokens.json with Tokens Studio.
If you’re in a Tailwind v4 project, use theme.css.
If you’re in anything else that uses CSS, use variables.css.

You can also use more than one — for example, importing tokens.json into Figma for your design work and using theme.css in the matching code project keeps your design and your build pointed at the same token values.

‍

Combining with DESIGN.md

The token files describe what the values are. DESIGN.md describes how to use them well — the voice, the surface logic, the do’s and don’ts. If you’re working with both an AI tool and a code project, hand DESIGN.md to the AI for guidance and one of the token files to your code so the output and the styling line up.