Example showing how to transform design tokens into color palettes usable by designers
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
docs
formats
tokens
.editorconfig
.gitignore
README.md
package.json
theo.setup.js
yarn.lock

README.md

tokens2palettes-example

This is an example showing how to transform Design tokens into color palettes usable by designers:

.sketchpalette: Sketch (with the sketch-palettes plugin)

Download here

.ase: Adobe Swatch Exchange (Photoshop, Illustrator…)

Download here

.clr: macOS color palette

Download here


Quick start

This repository uses Material Design Colors as an example. Follow these steps to generate palettes with your own colors:

  1. In a terminal, type:

    git clone https://github.com/kaelig/tokens2palettes-example

    (or clone your own fork of this repository)

  2. Open package.json and change the value of palettename to something else:

      "config": {
        "palettename": "Material Design"
      },
  3. Define the color palette in ./tokens/colors.yml following the design tokens specification.

  4. Generate the color palettes:

    yarn
    yarn dist
  5. That’s it! Color palettes are in the ./dist folder.

How does it work?

  1. The script uses Theo to consume tokens from ./tokens/colors.yml. Custom formats for ase and sketchpalette are passed to the Theo v6 command line interface, which does the rest and outputs files to ./dist.
  2. Then, ase2clr takes the ase file and exports it into a clr file
  3. Finally, the script renames all of the colors.* files something more human-friendly that designers will appreciate.