Designex is a cli tool that helps you get started with Design tokens.

Get easily started with design tokens using Designex CLI. Features a wide range of templates, pre-built configurations, and live reloading for seamless design system integration.

The Elixir library allows you to run Design CLI without the need for Nodejs similar to Tailwind Elixir

• Quick Start - Run Designex Setup to setup ready-to-use token templates and get your project running in seconds.
• Easy Build - Use Designex Build to convert your tokens into platform-ready formats.
• Live Updates - Use Designex Build Watch to see changes instantly while you work.

The elixir librairy is available on:

• Hex.pm: https://hex.pm/packages/designex
• Hexdocs: https://hexdocs.pm/designex/Designex.html
• Github:

https://github.com/netoum/designex

Examples with Phoenix, Tailwind v3 and v4.

• Github: https://github.com/netoum/designex/tree/master/examples

Design CLI documention:

• Github: https://github.com/netoum/designex_cli

The Cli is build with Oclif. A great and efficient Cli framework, check it out.

Templates:

Depending on the template selected it will use the following dependencies:

• Style Dictionary v.4.3.0
• Tokens Studio v.1.2.9
• SD Tailwindcss Transformer v.2.0.0

Tailwind v4

This templates follows the latest setup of [Tailwind v4] (https://tailwindcss.com).
It will generate Tailwind v4 CSS files to import into your main css assets.

You can choose from style dictionary or tokens studio format.
If you are using the free version of Tokens Studio you must select single file.

• tailwind/v4/tokens-studio/single
• tailwind/v4/tokens-studio/multi
• tailwind/v4/style-dictionary

Tailwind v3

This templates follows the legacy setup of [Tailwind v3] (https://tailwindcss.com).
It will generate Tailwind v3 JS files to import into your Tailwind Config file.
You can choose from tokens studio single and multi format.
If you are using the free version of Tokens Studio you must select single file.

• tailwind/v3/tokens-studio/single
• tailwind/v3/tokens-studio/multi

Shadcn

This templates follows the latest setup of [Shadcn] (Introduction - shadcn/ui).
It will generate Tailwind v3 JS files to import into your Tailwind Config file.
You must also add the generate CSS files for the default and dark mode.
The colors are converted to hsl as advised by Shadcn
You can choose from style dictionary or tokens studio format.
If you are using the free version of Tokens Studio you must select single file.

• shadcn/tokens-studio/single
• shadcn/tokens-studio/multi
• shadcn/style-dictionary

// Tailwind Config
  theme: {
    extend: {
      textColor: require("./build/shadcn/textColor.js"),
      colors: require("./build/shadcn/colors.js"),
      backgroundColor: require("./build/shadcn/backgroundColor.js")
    }

Shadcn Css

// CSS Import

@import "../build/css/shadcn.css";
@import "../build/css/shadcn/modes/light.css";

Material

This templates is an export of the Material 3 Design Kit Figma file and the Material Theme Builder Figma Plugin
You can choose from style dictionary or tokens studio format.
If you are using the free version of Tokens Studio you must select single file.

• material/tokens-studio/single
• material/tokens-studio/multi
• material/style-dictionary

Mozilla

This templates is an export of the legacy Mozilla Design Tokens
You can choose from tokens studio single and multi format.
If you are using the free version of Tokens Studio you must select single file.

• mozilla/tokens-studio/single
• mozilla/tokens-studio/multi