Design tokens From the token studio into Tailwind, CSS and Figma

• A token system from the studio. The default one is used here; any you build exports the same way.
• For Tailwind: a project with Node.js and npm.

• For Figma: an Enterprise plan, a full seat, a personal access token with the file_variables:write scope, and edit access to the file.

1. 01

   Export the theme

   In the studio’s export, choose Tailwind v4 and download theme.css. It begins with @import "tailwindcss"; and maps the token roles to Tailwind’s color names.

   theme.css

   @import "tailwindcss";
   
   /* Auric Artisan design tokens · both themes */
   :root, [data-theme="light"] {
     --color-brand-50: #F2F4FF;
     /* … */
   @theme inline {
     --color-page: var(--color-canvas);
     --color-panel: var(--color-surface);
     --color-raised: var(--color-surface-raised);
     --color-ink: var(--color-text);
     --color-muted: var(--color-text-muted);
     --color-action: var(--color-primary);
     --color-action-hover: var(--color-primary-hover);
     --color-on-action: var(--color-on-primary);
     --color-focus: var(--color-ring);
     /* … */
   }

2. 02

   Install Tailwind and its CLI

   In your project, install both packages.

   Terminal

   npm install tailwindcss @tailwindcss/cli

3. 03

   Build from the export

   Save the file as src/theme.css and build. Tailwind finds the classes in your templates.

   Terminal

   npx @tailwindcss/cli -i ./src/theme.css -o ./dist/output.css --watch

4. 04

   Use the role classes

   Each role becomes a utility, so a component names what a color is for rather than which shade it is. Set data-theme="dark" on a wrapper for the dark mode.

   index.html

   <body class="bg-page text-ink">
     <section class="bg-panel border border-boundary rounded-lg p-6">
       <p class="text-muted">Saved two minutes ago</p>
       <button class="bg-action text-on-action hover:bg-action-hover focus-visible:ring-2 ring-focus rounded px-4 py-2">
         Publish
       </button>
     </section>
   </body>

   You should see: 9 role utilities, all generated by Tailwind 4.3.3 from this export: bg-page, text-ink, bg-panel, border-boundary, text-muted, bg-action, text-on-action, hover:bg-action-hover, ring-focus.

1. 01

   Export light-dark() CSS

   Choose CSS light-dark() and download tokens.light-dark.css. Every color role holds both themes.

   tokens.light-dark.css

   /* Auric Artisan design tokens · light-dark() · 2 modes */
   :root {
     color-scheme: light dark;
     /* … */
   /* Auric Artisan design tokens · light-dark() · 2 modes */
   :root {
     color-scheme: light dark;
     --color-brand-50: #F2F4FF;
     --color-brand-100: #E6EAFF;
     --color-brand-200: #CDD5FF;
     /* … */
   }

2. 02

   Link it and use the variables

   Load it before your own styles. It follows the reader’s system theme with no script, and data-theme forces one.

   index.html

   <link rel="stylesheet" href="/tokens.light-dark.css">
   <style>
     body { background: var(--color-canvas); color: var(--color-text); }
     .button { background: var(--color-primary); color: var(--color-on-primary); }
     .button:hover { background: var(--color-primary-hover); }
   </style>
   
   <!-- Follows the reader's system theme; this part is always dark. -->
   <aside data-theme="dark">…</aside>

1. 01

   Export the request body

   Choose Figma variables and download figma-variables.json. The default system makes 2 collections, 3 modes and 177 variables, joined by aliases.

2. 02

   Find the file key

   It is the part of the file’s address after /design/: in figma.com/design/AbC123/Tokens, the key is AbC123.

3. 03

   Send it to Figma

   Post the file to Figma’s variables endpoint with your token. The token goes from your machine to Figma only; this site never sees it.

   Terminal

   curl -X POST "https://api.figma.com/v1/files/$FILE_KEY/variables" \
     -H "X-Figma-Token: $FIGMA_TOKEN" \
     -H "Content-Type: application/json" \
     --data @figma-variables.json

   You should see: Two collections in the file’s local variables: Primitives, and Theme with one mode per theme.

• Figma’s variables endpoint is open only to full members of Enterprise organizations. The request type-checks against Figma’s published types, @figma/rest-api-spec 0.44.0; it has not been run against an Enterprise file from here.

• The Figma request creates new collections. Send it to a file that does not have them yet; to change values later, edit them in Figma or remove the collections first.
• The DTCG 2025.10 export writes colors as a color space and components. Check that your token tool reads that format before relying on it.
• An export is a snapshot. Change the system in the studio, then export again; keep the workspace JSON to reopen it.

• The studio runs in your browser; a token system is not uploaded anywhere.
• Your Figma token is used only in the command you run yourself.

• Open the token studio
• The light-dark() recipe, with its fallback
• CSS color recipes
• Modern color in CSS, explained

Other integrations

• Browser extensionCheck and fix contrast on the page in front of you.
• VS CodeUnderline low contrast in your stylesheets and fix it in place.
• REST APIConvert colors and check pairs from a server or a script.
• Contrast embedPut a contrast checker on your own page.
• Tailwind themeStart a Tailwind v4 project with accessible components.
• React tokensTheme a React app from the token export.
• Figma variablesTurn Figma variables into CSS tokens.
• Contrast in CICheck your color pairs on every pull request.