Designing Tokens — What makes great design tokens, and how to build them (Part 1)

What Are Design Tokens?

const tokens = {
orange: "#ff9b00",
purple: "#5f259f",
blue: "#0096e6",
red: "#ff0000",
white: "#ffffff",
lightGray: "#b2b2b2",
gray: "#999999",
darkGray: "#333333",
};
const MyBanner = styled.div`
color: ${tokens.darkGray}; //color: #333333
background-color: ${tokens.purple};
`;

The Process

const MyBanner = styled.div`
color: ${tokens.text.darkGray}; //color: #333333
background-color: ${tokens.background.purple};
`;
const MyBanner = styled.div`
color: ${tokens.color.text.darkGray}; //color: #333333
background-color: ${tokens.color.background.purple};
font-size: ${tokens.size.font.sm1};
line-height: ${tokens.size.lineHeight.small};
@media (min-width: ${tokens.layout.media.tablet}) {
font-size: ${tokens.size.font.lg1};
z-index: ${tokens.layout.zIndex.bottomlessPit};
}
`;
const {color, size, layout} = tokens;const MyBanner = styled.div`
${color.text.darkGray}; //color: #333333
${color.background.purple};
${size.font.sm1};
${size.lineHeight.small};
${layout.media.tablet} {
${size.font.lg1};
${layout.zIndex.bottomlessPit};
}
`;

Note: With this interface, we are not technically consuming the tokens directly anymore. From this point forward, think of tokens more like helper functions for the actual basic tokens.

color: {   
text: {
brand1
brand2
default
alt
inverse
inverseAlt
interaction
interactionHover
interactionActive
disabled
error
success
},
background: {
brand1
brand2
interaction
...
},
border: {
brand1
brand2
interaction
...
}
}
const MyBanner = styled.div`
${color.text.alt}; //color: #999999 OR color: #FFC0CB
${color.background.main1};
${color.border.alt};
`;
// Definition
const FontIcon = styled.span`
color: ${props => props.color}
...
`
// Usage
<FontIcon color="#333333"/>
<FontIcon color="#ff9b00"/>
<FontIcon color="#0096e6"/>
import { IconColorKeys } from '@tokens'// Definition
interface IconProp {
// "default" | "interaction" | "brand1"
color: IconColorKeys
}
const FontIcon = styled.span<IconProp>`
${props=>color.icon[props.color]}
...
`
//Usage
<FontIcon color="default" />
<FontIcon color="brand1" />
<FontIcon color="interaction"/>

Conclusion

import { tokens, FontSizeKeys } from '@tokens'interface BannerProp {
fontSize: FontSizeKeys;
}
const {color, size, layout} = tokens;const Banner = styled.div<BannerProp>`
${color.bg.default};
${color.text.default};
${size.lineHeight.small};
${({fontSize: fontSizeName}) => size.font[fontSizeName]}
${layout.media.tablet} {
${layout.zIndex.bottomlessPit};
}
`
<Banner fontSize="small"/>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store