I created this set based on the last couple of months playing with design tokens in Penpot and design systems I’ve built for real life projects. It contains 531 design tokens in action! Including:
11 border radius tokens
425 color tokens
18 dimension tokens
14 opacity tokens
11 rotation tokens
27 sizing tokens
5 stroke width tokens
20 spacing tokens
Themes:
Global Density: Compact, Comfortable, Spacious
Color mode: Light, dark
Color theme: Vibrant, muted
You can see how different token types can be applied in the demo boards on each page, play with design tokens without having to create your own, or use this starter kit as a starting point for your own design system. (Try exporting the tokens from the Tools at the end of the Tokens panel and importing them into another file!)
Let me know if you have any feedback on these tokens. I intend to update this kit for future Penpot design token updates.
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 sizing → size and spacing → space 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!
Great work, thank you so much!
Just curious: What was your process behind when setting up the colors and other tokens? Did you use any external tools like spreadsheet or database for designing the setup and keeping track of all of the tokens?
Is there already a plugin for generating a documentation?
I would find it important to have a documentation early on so I can exchange it with the devs, will have a look at the export JSON-file.
Ah and maybe on note on the color ramps: What about using oklch for the colors so they are comparable in terms of lightness and perceptual uniformity, making the ramps easier to compare and ensuring that differences are visually consistent across the scale. I use leonardo or you can also have a look at the new plugin.
As I wanted to build something that would follow convention/be familiar to anyone who has already worked with design systems, I went for 050 - 950 (11) steps in my ramps/scales. That seemed to be an average in UI frameworks and kits.
I tried to cover a variety of colours and used GitHub’s Primer Prism tool for generating the scales. I tweaked the curves of each scale to fit my preferences for scales that become more saturated into the deeper shades, so they look like a darker colour rather than just black.
Once generated, I manually changed the JSON values provided by Prism into Design Tokens JSON format in a code editor. (A tedious process even with multi-cursors!)
No, but if I were to document these further than demoing the colours and grouping them by saturated/neutral colours, I would do it in the Penpot file. It’s hard enough to get folks to read documentation, so if I had any specific instructions, I would lay it out in the library itself alongside the tokens themselves. If it’s important information, I would put it directly in the tokens description so it gets exported alongside the tokens.
I’m also curious about what kinds of documentation you’d provide in this scenario?
Love the idea of using oklch for this, and I’m only going to use the fantastic OKLCH Palette plugin in the future! I’m tempted to regenerate the starter kit colour ramps for version 3 using this plugin. I did pay attention to comparative lightness when creating the palettes in Prism, but that uses HSL.
Here a nerdier nerd might raise an issue with generating palettes in OKLCH but converting them into HSL but I believe that the end user and designer/developer experience is a higher priority than theoretical purity. We as individuals all percieve colour differently, especially if a person is colour blind (way more common than most people think!) so uniformity is less important than contrast.
Hello!
OKLCH is a color representation method that gives designers superlative accuracy and control over the color management of graphic projects.
I’d like to warn anyone with monitors that don’t display colors outside the sRGB gamut (like the one I have at home!) that palettes generated with this method may result in the loss of significant color information. Many generation tools using this method typically flag colors that may be outside the sRGB gamut.
I’m also curious about what kinds of documentation you’d provide in this scenario?
In our case, we decided that Storybook — not ODT (the Other Design Tool) — is our single source of truth. All of our documentation for core tokens and components lives there, since it reflects the actual implementation rather than a design artifact.
That said, this sometimes causes confusion for new developers. When I design new components in ODT, they’re not always sure whether the design version or the Storybook version is the most up to date. To help with that, we try to be explicit in Storybook about what’s stable, what’s experimental, and what’s still being designed, so there’s less room for ambiguity.
This color picker is very good. However, I believe that deselecting P3 and rec2020 only disables the display of the curves for the various parameters. The generated color may still be out of gamut, in which case the tool warns us in text form. It also recognizes whether the display it’s being viewed from is capable of displaying the color you’re setting.
True — deselecting P3/Rec2020 only hides the curves, the generated color can still be out of gamut. In CSS it’s possible to handle this with fallbacks and progressive enhancement with @supports, maybe that could work.
