/tokens2palettes-example

Example showing how to transform design tokens into color palettes usable by designers

Primary LanguageJavaScript

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.