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.