CLI

The Terrazzo CLI takes tokens.json either exported from the Token Lab or from Figma and generate code such as CSS, Sass, JavaScript/TypeScript, JSON, and more.

Quickstart

First, install the package using your package manager of choice:

npm i -D @terrazzo/cli

pnpm i -D @terrazzo/cli

Next, install any plugins you’d like to use:

npm i -D @terrazzo/plugin-css @terrazzo/plugin-js

pnpm i -D @terrazzo/plugin-css @terrazzo/plugin-js

Third, create a terrazzo.config.js file in the root of your repo:

import { defineConfig } from "@terrazzo/cli";
import css from "@terrazzo/plugin-css";
import js from "@terrazzo/plugin-js";

export default defineConfig({
  tokens: "./tokens.json",
  outDir: "./tokens/",
  plugins: [css(), js()],
});

And finally, run:

npx tz build

from your project root to generate code using your plugins.

Comparison

Whether you view your design tokens as standard or nonstandard will affect whether you use Terrazzo, some other tool like Style Dictionary, or build your own. Terrazzo takes the same opinion as the DTCG format: design tokens should be standardized. This means that colors, typography, spacing, and more should be expressed in predictable ways.

The advantage of using a standard format is you can get up-and-running faster because the tooling already exists. There’s more shared collaboration and tooling around the same problem, and knowledge sharing is easier. But the downside is it may not work well for nonstandard design systems, especially if your team approaches color, theming, or design systems in general in a unique way.

VS. Style Dictionary

Style Dictionary is the path of nonstandard (custom) tokens. It allows your team to approach design systems in your own unique way… but at the cost of building your own tooling from scratch, and having to frontload investment before you get any value.

Next Steps

• See all config options
• Browse plugins:
  • CSS
  • JS/TS/JSON
  • Sass
  • Tailwind