Skip to content
Log inStart free

Theme token applier

Put your design tokens on a real store

Open the token file your design system already has. Each color, font and corner radius gets its job on a working storefront, every pair is checked for contrast, and the set comes back in the format you need.

Paste a file instead

Or try a sample file

Free, no sign-up. Reads CSS variables, SCSS, Tailwind v3 and v4, W3C design tokens and Tokens Studio JSON. The file never leaves this browser.

Your tokens on a storeSee every token at work

Show the tokens as
Updates as you edit

Checks on this store

  • Text on the pageBody text needs 4.5:114.50:1AAA
  • Text on cardsBody text needs 4.5:112.92:1AAA
  • Button labelButton labels need 4.5:16.33:1AA
  • Button on the pageShapes need 3:15.70:1Passes
  • Sale tag labelTag labels need 4.5:14.79:1AA

Every check on this store passes.

Token file

Read as CSS variables. Colors 14, fonts 2, radius 1, other 0

On the store

  • TextHeadings, body copy, prices. Named in the file
  • BackgroundThe page behind everything. Named in the file
  • PrimaryBuy buttons, banners, the active tab. Named in the file
  • SecondaryCards, the search field, panels. Named in the file
  • AccentSale tags, offers, small highlights. Named in the file

Type and corners

See these colors on email and phone

Sample files

Six formats, six stores

One file in each format the tool reads, each written the way that format's users keep it. Open one above, then swap in your own.

CSS variables

A component library file with bare HSL values, label colors for every surface and a dark block. Roles come straight from the names.Open this file

Tailwind v4

An @theme block in OKLCH, with a primitive scale and semantic names that point at it. References resolve before anything is painted.Open this file

Tailwind v3

A config with a brand scale and two loose colors. Only the brand is named for a job, so the page, text and accent are read from the colors themselves.Open this file

W3C design tokens

A DTCG file with group types, aliases in braces, font lists and a dimension object, as design tools now export them.Open this file

Tokens Studio

A token set from the design plugin, with short names such as bg and fg and a radius saved as a bare number of pixels.Open this file

SCSS

Sass variables with a palette first and roles that point at it, plus font stacks and a default radius.Open this file

How it reads a file

Names first, colors when names run out

The tool does what a developer would do with a new token file: follow the references, read the names, then look at the values.

  • Primary#E07A2F

References resolved

var(), $variables and {group.token} aliases are followed to the value, through chains, so a semantic name paints with its real color.

  • Primary#2F6A56

Roles by name

background, foreground, primary, brand, surface, card, accent and highlight find their job. Label colors such as primary-foreground never take a role.

  • Background#FAF6F7
  • Primary#6E4A6B
  • Accent#9C4A62

Roles by color

When a file names no roles, the lightest color becomes the page, the best read the text and the most colorful the button, as a designer would set them.

  • AaBricolage Grotesque
  • Corner radius4 px

Fonts and corners too

Font stacks go on the headings and body text, and the radius on buttons, cards and fields, so the store looks like your system, not only its colors.

On Tanqory

From a token file to a store that sells

Your tokens already describe the brand. Tanqory gives them a store to live on, and tools for the developer who wires them in.

  1. Every theme is free

    Put your tokens on any Tanqory theme at no cost. Themes are built in React and TypeScript and stay fully editable in the visual editor, or ask AI in Studio to make the change, with AI credits included in every plan. See themes

  2. Terminal: pull a theme and run it on localhost
    you@studio ~/stem-and-stone % npm install -g @tanqory/cliyou@studio ~/stem-and-stone % tanqory theme pullyou@studio ~/stem-and-stone % tanqory theme devyou@studio ~/stem-and-stone %

    Work on the theme from your terminal

    The Tanqory CLI pulls a theme, runs it on localhost with live store data and pushes it back, so the token file sits in the same repository as the theme. See developer tools

  3. 0%

    Tanqory transaction fee

    Your provider's own rate, not marked up

    A 0% transaction fee

    Connect your own Stripe, PayPal or Braintree account and pay a 0% Tanqory transaction fee on every plan. You pay your provider's own rate, never marked up. See payments

More free tools

Tools that work with this one

Start colors in the generator, try fonts beside them, then see the palette on email and phone.

Colors and fonts

Pair a heading font with a body font, set a type scale and five colors, and see them together on a store.Try it free

Palette visualizer

See five colors on a storefront, product page, order email, phone and social post, with contrast checks.Try it free

Stem & Stone#2A1F24 #FBF7F2 #A8325E #F3E6E0 #4F6B3A
Oat & Ember#2B1E16 #F5EFE6 #6B3E26 #E9DFD1 #2F5D50
Ridgeline#EEF2EE #18211D #E07A2F #25332C #9CC5A1

Color palette generator

Make a five color palette from a color or a photo, lock what you like and check contrast.Try it free

Questions about applying design tokens

Still have a question?

The help center covers themes, fonts and colors step by step.

Visit the help center
What are design tokens?

Named values a design system is built from: colors, font families, corner radius, spacing. Teams keep them in a CSS or SCSS file, a Tailwind config or a JSON file in the W3C design tokens format, so design and code use the same names.

Which files can I open?

CSS custom properties (including the bare HSL values component libraries write), SCSS variables, a Tailwind v3 config, a Tailwind v4 @theme block, W3C design tokens (DTCG) JSON and Tokens Studio JSON. The format is detected from the file, and you can set it by hand.

How does each token get its job?

By name first: background, foreground or text, primary or brand, secondary, surface or card, accent or highlight. Label colors such as primary-foreground are skipped. When names run out, the remaining colors are read by lightness and saturation. You can pick another token for any role.

What happens to references?

var(--name), $name and {group.name} aliases are followed to their value, through chains, before the store is painted. On export a token that pointed at another keeps pointing at it, written the target format's way.

What is the theme layer in the export?

A short block at the end that names the token behind each role, such as --theme-primary: var(--color-brand). A theme can read those few names while your own tokens stay as they are. A role you edited or fixed holds its color instead.

How is contrast checked?

With the WCAG 2.2 contrast ratio, the same formula browsers and audit tools use. Body text on the page and on cards needs 4.5:1, the button label and the sale tag label 4.5:1, and the button against the page 3:1. Fix contrast moves only lightness.

Why does my font look different here?

The page can only show fonts it loads. Eleven open-licence faces load on demand; any other family in your file shows only if your device has it installed, and is named under the store. The export always keeps your exact font stack.

Is my file uploaded?

No. The file is read and processed in your browser, and nothing is sent to a server or saved.

Still have a question?

The help center covers themes, fonts and colors step by step.

Visit the help center

Your design system on a store that is ready to sell

Open a store, bring the tokens you checked here and launch with every pair already readable. The export keeps your names, so design and code stay in step.

Start for freeSee themes

We use cookies

Necessary cookies keep the site working. With your permission we also use analytics and marketing cookies. Change your choice any time in Cookie settings.