CLI

The Terrazzo CLI takes DTCG tokens and generates code using plugins (e.g. CSS, Sass, JS/TS, and more). You can either run the Terrazzo CLI manually, or as part of your CI process.

Quickstart

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

npm i -D @terrazzo/cli

pnpm i -D @terrazzo/cli

bun i -D @terrazzo/cli

And you can create a configuration and install plugins with the init command:

npx tz init

This will create a terrazzo.config.mjs starter config file, and even start your token system from a popular open source design system.

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.

API

Debugging

With any command, set the DEBUG env var to a glob scope (accepts wildcard-match globs):

• DEBUG=* tz build: debug all scopes
• DEBUG=parser:* tz build: debug @terrazzo/parser (core)
• DEBUG=plugin:* tz build: debug plugins

Next Steps

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