Solutions

Resources

Solutions

Resources

Solutions

Resources

Specify Design Token Format

Specify Design Token Format

Specify Design Token Format

Specify Design Token Format

Figma Variables and
Tokens Studio as a source

Figma Variables and
Tokens Studio as a source

Figma Variables and
Tokens Studio as a source

Figma Variables and
Tokens Studio as a source

Start syncing modes, collections, themes and aliases and set up automated workflows to your code base. Sign up for the Specify Design Token Format beta and try it out yourself.
New features are lined up to be released.

Start syncing modes, collections, themes and aliases and set up automated workflows to your code base. Sign up for the Specify Design Token Format beta and try it out yourself.
New features are lined up to be released.

Start syncing modes, collections, themes and aliases and set up automated workflows to your code base. Sign up for the Specify Design Token Format beta and try it out yourself.
New features are lined up to be released.

Start syncing modes, collections, themes and aliases and set up automated workflows to your code base. Sign up for the Specify Design Token Format beta and try it out yourself.
New features are lined up to be released.

New

Figma Variables

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

Variables

Modes

Collections

New

Tokens Studio

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

New

Figma Variables

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

Variables

Modes

Collections

New

Tokens Studio

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

New

Figma Variables

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

Variables

Modes

Collections

New

Tokens Studio

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

New

Figma Variables

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

Variables

Modes

Collections

New

Tokens Studio

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

And that's not all...

And that's not all...

And that's not all...

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

Notion

Raycast

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 SDTF features on our blog

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

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 SDTF features on our blog

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

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 SDTF features on our blog

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

Notion

Raycast

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 SDTF features on our blog

Sign up for our
beta program

Sign up for our
beta program

Sign up for our
beta program