Nate Baldwin

Component-level Design Tokens: are they worth it?

Screenshot of “Component-level Design Tokens: are they worth it?”

At one point in time Spectrum had 210,180 design tokens in an 18MB JSON file. We had to reinvent “design tokens” in a way that could accommodate for the high degree of specificity (security, flexibility, automation) without all the bloat of a traditional design token output type. This meant more innovation, but also came with an amplified learning curve. Ultimately this negatively impacted our ability to grow contributions into the token system.

Wow! 🤯

Interesting presentation of strengths and weaknesses of component level design tokens, just when I have to decide if we put some in a Design System I currently help build… 🤔


  1. I'm trying to use #Leonardo to create a real set of design tokens for the colors I currently use on https://nicolas-hoizey.photo but I didn't find how to set the background color to #292929 instead of white… 🤷‍♂️

    A screenshot of Leonardo UI with the background set to white

    https://leonardocolor.io/theme.html?name=nicolas-hoizey.photo&config={"baseScale"%3A"Gray"%2C"colorScales"%3A[{"name"%3A"Gray"%2C"colorKeys"%3A["%23000000"]%2C"colorspace"%3A"RGB"%2C"ratios"%3A["1.45"%2C"2.05"%2C"3.03"%2C"4.54"%2C"7"%2C"10.86"]%2C"smooth"%3Afalse}%2C{"name"%3A"Rebecca+Purple"%2C"colorKeys"%3A["%23663399"]%2C"colorspace"%3A"HSL"%2C"ratios"%3A["1.45"%2C"2.05"%2C"3.03"%2C"4.54"%2C"7"%2C"10.86"]%2C"smooth"%3Atrue}]%2C"lightness"%3A100%2C"contrast"%3A1.19%2C"saturation"%3A100%2C"formula"%3A"wcag2"}