Specify Design Token Format
Specify Design Token Format
Specify Design Token Format
Specify Design Token Format
A unified format that brings flexibility and consistency
A unified format that brings flexibility and consistency
A unified format that brings flexibility and consistency
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.
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.
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.
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
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
Open up automated distribution of your design tokens coming from Tokens Studio.
New
Figma Variables
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
Open up automated distribution of your design tokens coming from Tokens Studio.
New
Figma Variables
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
Open up automated distribution of your design tokens coming from Tokens Studio.
New
Figma Variables
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
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
GitLab
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 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 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 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
GitLab
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
