1 of 4

Templates

Automatically distribute your design tokens and assets according to your organization's standards with our ready-to-use configuration templates.

Ready-to-use configuration templates for your next project

This section will help you get started with ready-to-use configuration template. Each configuration file will be filled by one or several rules, called parsers.

Parsers are functions allowing you to transform design tokens and assets coming from Specify to fit your needs and company standards.

Make sure to read the Configuration section to better understand how configuration file works with Specify.

Template

Description

This template is dedicated for Web developers using CSS. It helps you generate all types of design tokens as CSS Custom Properties in their respective CSS file.

This template helps you pull your design tokens in the SDTF format in a JSON file.

This template helps you generate your design tokens as a Tailwind theme.

CSS Custom Properties

This template is dedicated for Web developers using CSS. It helps you generate all types of design tokens as CSS Custom Properties in their respective CSS file.

This example uses four different parsers:

to target on a specific collection named "Colors" that contains our colors
to convert our colors in HSL
to change the name of our tokens and modes to kebabCase
to generate a CSS file containing our tokens

This template is an example among others. Head toward the page to get all available options.

CLI configuration

When using the CLI, you need to fill three properties:

repository is @organization/repository
personalAccessToken which you can generate
rules lets you transform tokens by chaining parsers

GitHub configuration

If you use the GitHub, you need to fill two properties:

repository is @organization/repository
rules lets you transform tokens by chaining parsers

SDTF

This template helps you pull your design tokens in the SDTF format in a JSON file.

This example uses the following parser:

to-sdtf to generate your design tokens in SDTF

If you use the CLI, you need to fill three properties:

repository is @organization/repository
personalAccessToken which you can generate in your account settings
rules are where you provide parsers and compatible options

{
  "version": "2",
  "repository": "@organization/repository",
  // Only use the personalAccessToken when working with the CLI
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "Generate tokens in SDTF",
      "parsers": [
        {
          "name": "to-sdtf",
          "output": {
            "type": "file",
            "filePath": "output/tokens.json"
          }
        }
      ]
    }
  ]
}

If you use the GitHub, you need to fill two properties:

repository is @organization/repository
rules lets you transform tokens by chaining parsers

Make sure you have connected your GitHub account with your Specify account. Head toward this article to learn more.

{
  "version": "2",
  "repository": "@organization/repository",
  "rules": [
    {
      "name": "Generate tokens in JSON",
      "parsers": [
        {
          "name": "to-sdtf",
          "output": {
            "type": "file",
            "filePath": "output/tokens.json"
          }
        }
      ]
    }
  ]
}

Tailwind

This template helps you generate your design tokens as a Tailwind theme.

This example uses the following parser:

to-tailwind to generate your design tokens as a Tailwind theme

If you use the CLI, you need to fill three properties:

repository is @organization/repository
personalAccessToken which you can generate in your account settings
rules are where you provide parsers and compatible options

{
  "version": "2",
  "repository": "@organization/repository",
  // Only use the personalAccessToken when working with the CLI
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "Generate tokens as a Tailwind theme",
      "parsers": [
        {
          "name": "to-tailwind",
          "output": {
            "type": "file",
            "filePath": "theme.js"
          }
        }
      ]
    }
  ]
}

If you use the GitHub, you need to fill two properties:

repository is @organization/repository
rules lets you transform tokens by chaining parsers

Make sure you have connected your GitHub account with your Specify account. Head toward this article to learn more.

{
  "version": "2",
  "repository": "@organization/repository",
  "rules": [
    {
      "name": "Generate tokens as a Tailwind theme",
      "parsers": [
        {
          "name": "to-tailwind",
          "output": {
            "type": "file",
            "filePath": "theme.js"
          }
        }
      ]
    }
  ]
}

SDTF

This template helps you pull your design tokens in the SDTF format in a JSON file.

This example uses the following parser:

to-sdtf to generate your design tokens in SDTF

If you use the CLI, you need to fill three properties:

repository is @organization/repository
personalAccessToken which you can generate in your account settings
rules are where you provide parsers and compatible options

{
  "version": "2",
  "repository": "@organization/repository",
  // Only use the personalAccessToken when working with the CLI
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "Generate tokens in SDTF",
      "parsers": [
        {
          "name": "to-sdtf",
          "output": {
            "type": "file",
            "filePath": "output/tokens.json"
          }
        }
      ]
    }
  ]
}

If you use the GitHub, you need to fill two properties:

repository is @organization/repository
rules lets you transform tokens by chaining parsers

Make sure you have connected your GitHub account with your Specify account. Head toward this article to learn more.

{
  "version": "2",
  "repository": "@organization/repository",
  "rules": [
    {
      "name": "Generate tokens in JSON",
      "parsers": [
        {
          "name": "to-sdtf",
          "output": {
            "type": "file",
            "filePath": "output/tokens.json"
          }
        }
      ]
    }
  ]
}

Tailwind

This template helps you generate your design tokens as a Tailwind theme.

This example uses the following parser:

to-tailwind to generate your design tokens as a Tailwind theme

If you use the CLI, you need to fill three properties:

repository is @organization/repository
personalAccessToken which you can generate in your account settings
rules are where you provide parsers and compatible options

{
  "version": "2",
  "repository": "@organization/repository",
  // Only use the personalAccessToken when working with the CLI
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "Generate tokens as a Tailwind theme",
      "parsers": [
        {
          "name": "to-tailwind",
          "output": {
            "type": "file",
            "filePath": "theme.js"
          }
        }
      ]
    }
  ]
}

If you use the GitHub, you need to fill two properties:

repository is @organization/repository
rules lets you transform tokens by chaining parsers

Make sure you have connected your GitHub account with your Specify account. Head toward this article to learn more.

{
  "version": "2",
  "repository": "@organization/repository",
  "rules": [
    {
      "name": "Generate tokens as a Tailwind theme",
      "parsers": [
        {
          "name": "to-tailwind",
          "output": {
            "type": "file",
            "filePath": "theme.js"
          }
        }
      ]
    }
  ]
}

CSS Custom Properties

This template is dedicated for Web developers using CSS. It helps you generate all types of design tokens as CSS Custom Properties in their respective CSS file.

This example uses four different parsers:

to target on a specific collection named "Colors" that contains our colors
to convert our colors in HSL
to change the name of our tokens and modes to kebabCase
to generate a CSS file containing our tokens

This template is an example among others. Head toward the page to get all available options.

CLI configuration

When using the CLI, you need to fill three properties:

repository is @organization/repository
personalAccessToken which you can generate
rules lets you transform tokens by chaining parsers

GitHub configuration

If you use the GitHub, you need to fill two properties:

repository is @organization/repository
rules lets you transform tokens by chaining parsers

Make sure you have connected your GitHub account with your Specify account. Head toward to learn more.

{
  "version": "2",
  "repository": "@organization/repository",
  "rules": [
    {
      "name": "css",
      "parsers": [
        {
          "name": "filter",
          "options": {
            "query": {
              "where": {
                "collection": "Colors",
                "select": {
                  "parents": true,
                  "children": true
                }
              }
            }
          }
        },
        {
          "name": "convert-color",
          "options": {
            "toFormat": "hsl",
            "applyTo": {
              "collection": true
            }
          }
        },
        {
          "name": "change-case",
          "options": {
            "change": "names",
            "toCase": "kebabCase",
            "applyTo": {
              "collection": true
            }
          }
        },
        {
          "name": "change-case",
          "options": {
            "change": "modes",
            "toCase": "kebabCase",
            "applyTo": {
              "collection": true
            }
          }
        },
        {
          "name": "to-css-custom-properties",
          "output": {
            "type": "file",
            "filePath": "tokens.css"
          }
        }
      ]
    }
  ]
}