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
