Design tokens starter kit

Version 2 of the Design tokens starter kit is now up on the Penpot Hub.

Now including font size tokens! I’ve done some refactoring including:

  • Added density scales so that 3XS-3XL scales are modular and can use different modular scales (golden ratio, major third and so on.)
  • Changed compact density from 0.5 to “minor second” (1.067.)
  • Changed comfortable density from 1 to major third (1.25.)
  • Changed spacious density from 1.5 to golden ration (1.618.)
  • Changed the initial base size to 4 so the spacious density isn’t so extreme.
  • Replaced “flexible” 3XS-3XL scales with “modular” density scales, and updated sizing and spacing values to use these scales.
  • Renamed “fixed” scales as “linear” scales and moved the primary linear dimension tokens into their own set.
  • Changed tokens with 3XS-3XL names referencing the linear scale to use 050-800 names.
  • Added modular scale 3XS-3XL tokens equivalent for each linear scale.
  • Renamed sizingsize and spacingspace to make the tokens more concise and easier to understand.
  • Added modular and linear scales for the new font size token, and some initial typography tokens using modular font sizes. (I’ll build on these after future Penpot updates!)

I’d love any feedback, requests, or suggestions you have for this starter kit. And please let me know if there’s anything you find confusing or hard to use!

4 Likes