Solutions

Resources

Solutions

Resources

Solutions

Resources

Specify Design Token Format

A unified format that brings flexibility and consistency

Start syncing modes, collections, themes, aliases and Figma Styles to one source of truth. Set up automated workflows to your code base and create the output you wish to have. Keep your design system moving along the way.

New

Figma Variables

Figma Variables

Figma Variables

The Specify Design Token Format and Figma Variables make a perfect match. Keep using your favourite design tool in combination with Specify.

The Specify Design Token Format and Figma Variables make a perfect match. Keep using your favourite design tool in combination with Specify.

The Specify Design Token Format and Figma Variables make a perfect match. Keep using your favourite design tool in combination with Specify.

Variables

Modes

Collections

New

Tokens Studio

Tokens Studio

Tokens Studio

Open up automated distribution of your design tokens coming from Tokens Studio.

Open up automated distribution of your design tokens coming from Tokens Studio.

Open up automated distribution of your design tokens coming from Tokens Studio.

And that's not all...

Boosted with Aliases, Modes, Collections and Groups

SDTF supports complex design systems and enhances the way you interact with your tokens and use your design system.

Badge

Select destination

GitHub

GitLab

Raycast

Mode 1

Mode 2

Mode 3

Button

Button

Badge

Mode 1

Mode 2

Mode 3

Button

Button

Badge

Mode 1

Mode 2

Mode 3

Button

Button

Endless compatibility

The new Design Token Format Standard: transfer tokens anywhere, using the same format.

JSON Tree Structure

Freedom to structure the semantics of your design system. Create various scopes for colors, spacings, fonts, themes and more!

const tokens = {  
 base: {    
    colors: {      
      primary: {        
        '300': { $type: 'color', $value: { default: { model: 'hex', hex: '#8666DF', alpha: 1 } } },        
        '500': { $type: 'color', $value: { default: { model: 'hex', hex: '#7146EA', alpha: 1 } } },      
      },    
    },  
  },  
  themes: {    
    color: {      
      $collection: { $modes: ['light', 'dark'] },      
      primary: {        
        $type: 'color',        
        $value: {          
          light: { $alias: 'base.colors.primary.500' },          
          dark: { $alias: 'base.colors.primary.300' },       
        },      
      },    
    },  
  },
};

50+ token types handled

Adding new token types, like shadows, gradients, border styles and many more.

Style Dictionary as a source

Import JSON design tokens compatible with Style Dictionary in your Specify repositories.

Soon

Code as a source

Start using code as your source of truth with the SDTF and adjust Specify to your needs.

Soon

Operations and maths

Enhance your design system and keep access to computed values. Your intentions about the transformations are available to anyone.

Multiply

Saturate

Lighten

Darken

Add

Preview

Name

Value

Generating...

Processing...

Generating...

Processing...

Generating...

Processing...

purple-500

#6E56CF

purple-400

#AA99EC

purple-300

#D7CFF9

purple-200

#F3F0FF

Read all about the new features on our blog