# Design tokens starter kit **URL:** \ **Category:** Libraries & Templates\ **Tags:** libraries-templates, library, design-tokens\ **Created:** [May 19, 2025, 3:08pm UTC](https://community.penpot.app/t/design-tokens-starter-kit/8781 "2025-05-19T15:08:42Z")\ **Posts on this page:** 16\ **Page:** 1
**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\ **Post date:** [May 19, 2025, 3:08pm UTC](https://community.penpot.app/t/design-tokens-starter-kit/8781/1 "2025-05-19T15:08:42Z")
The [designs tokens starter kit](https://penpot.app/penpothub/libraries-templates/desig-tokens-starter-kit) I created is now downloadable from the Penpot Hub šŸŽ‰ 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. ![Neutral colour design tokens demo palettes in Penpot with light colour theme.](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/9/964eb8cb40e5c256e30143c114707637a5dca4a8.png) ![Sizing and spacing design tokens for widths, heights, paddings, margins and gaps, demoed in Penpot with dark colour theme.](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/b/b1e0ca440a154ff8fd6337db8278a906b4996dc4.png) ![Breakpoint, dimensions, opacity, radius, rotation and stroke width tokens demoed in Penpot with light colour theme.](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/b/bc59f4a1c6e1e2a20d51b3a23ff9bff62e8ac441.png) ---
**Author:** ![findut](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/findut/32/6284_2.png) [@findut](https://community.penpot.app/u/findut)\ **Post date:** [May 20, 2025, 6:49am UTC](https://community.penpot.app/t/design-tokens-starter-kit/8781/2 "2025-05-20T06:49:13Z")
Thank you so much for the precious gift! I see itā€™s an April Foolsā€™ Day version, which is also my birthdayā€¦coincidence? šŸ¤£ ---
**Author:** ![don](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/don/32/8236_2.png) [@don](https://community.penpot.app/u/don)\ **Post date:** [August 12, 2025, 10:51am UTC](https://community.penpot.app/t/design-tokens-starter-kit/8781/3 "2025-08-12T10:51:07Z")
Hey @LauraKalbag just wondering are you updating this file along with the new incoming tokens? ---
**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\ **Post date:** [August 12, 2025, 11:07am UTC](https://community.penpot.app/t/design-tokens-starter-kit/8781/4 "2025-08-12T11:07:27Z")
Iā€™m doing that as I write! Font sizes incoming, and Iā€™m improving/updating some of the other tokens too. ---
**Author:** ![don](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/don/32/8236_2.png) [@don](https://community.penpot.app/u/don)\ **Post date:** [August 12, 2025, 1:25pm UTC](https://community.penpot.app/t/design-tokens-starter-kit/8781/5 "2025-08-12T13:25:08Z")
Awesome, thanks a million! ---
**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\ **Post date:** [August 13, 2025, 1:20pm UTC](https://community.penpot.app/t/design-tokens-starter-kit/8781/6 "2025-08-13T13:20:49Z")
[Version 2 of the Design tokens starter kit](https://penpot.app/penpothub/libraries-templates/desig-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 `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!) ![New design tokens for named font sizes and linear and modular font size scales.](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/6/6cc253a04c1a2d702cd022b4939955da0d979214.png) 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! ---
**Author:** ![don](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/don/32/8236_2.png) [@don](https://community.penpot.app/u/don)\ **Post date:** [August 18, 2025, 6:08am UTC](https://community.penpot.app/t/design-tokens-starter-kit/8781/7 "2025-08-18T06:08:37Z")
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](https://community.penpot.app/t/oklch-color-format-support/4210) 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](https://leonardocolor.io/theme.html#) or you can also have a look at the new [plugin](https://community.penpot.app/t/oklch-palette-penpot-plugin/9652). ---
**Author:** ![don](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/don/32/8236_2.png) [@don](https://community.penpot.app/u/don)\ **Post date:** [August 18, 2025, 6:18am UTC](https://community.penpot.app/t/design-tokens-starter-kit/8781/8 "2025-08-18T06:18:17Z")
About the colors, I think the `blue.050` stands out a little, here Light/Muted. ![Bildschirmfoto 2025-08-18 um 08.15.15](https://europe1.discourse-cdn.com/flex017/uploads/penpot/original/2X/1/178cfaca7e22ff6c44a418c054af66e02fc90487.png) ---
**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\ **Post date:** [August 18, 2025, 10:17am UTC](https://community.penpot.app/t/design-tokens-starter-kit/8781/9 "2025-08-18T10:17:01Z")
> [@don](#): > > What was your process behind when setting up the colors and other tokens? 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](https://primer.style/prism/) 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!) > [@don](#): > > Did you use any external tools like spreadsheet or database for designing the setup and keeping track of all of the tokens? 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? > [@don](#): > > Ah and maybe on note on the color ramps: What about using [oklch](https://community.penpot.app/t/oklch-color-format-support/4210) 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. Love the idea of using oklch for this, and Iā€™m only going to use [the fantastic OKLCH Palette plugin](https://penpot.app/penpothub/plugins/oklch-palette) 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. ---
**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\ **Post date:** [August 18, 2025, 10:17am UTC](https://community.penpot.app/t/design-tokens-starter-kit/8781/10 "2025-08-18T10:17:38Z")
Hahah, you got me here. I think I mightā€™ve tweaked this because I found the blue too low contrast against white in a real design. šŸ˜† ---
**Author:** ![findut](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/findut/32/6284_2.png) [@findut](https://community.penpot.app/u/findut)\ **Post date:** [August 18, 2025, 3:01pm UTC](https://community.penpot.app/t/design-tokens-starter-kit/8781/11 "2025-08-18T15:01:32Z")
> [@LauraKalbag](#): > > Love the idea of using oklch for this, and Iā€™m only going to use [the fantastic OKLCH Palette plugin](https://penpot.app/penpothub/plugins/oklch-palette) 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. 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. ---
**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\ **Post date:** [August 18, 2025, 3:21pm UTC](https://community.penpot.app/t/design-tokens-starter-kit/8781/12 "2025-08-18T15:21:27Z")
> [@findut](#): > > 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 believe the [gamut clipping feature in the plugin](https://github.com/elhombretecla/OKLCH-Palette) is to avoid this happening. But this is valuable warning regardless, thanks! ---
**Author:** ![don](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/don/32/8236_2.png) [@don](https://community.penpot.app/u/don)\ **Post date:** [August 18, 2025, 7:32pm UTC](https://community.penpot.app/t/design-tokens-starter-kit/8781/13 "2025-08-18T19:32:02Z")
> 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. ---
**Author:** ![don](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/don/32/8236_2.png) [@don](https://community.penpot.app/u/don)\ **Post date:** [August 18, 2025, 7:43pm UTC](https://community.penpot.app/t/design-tokens-starter-kit/8781/14 "2025-08-18T19:43:05Z")
@findut Good point, P3 or Rec2020 can be turned of in this tool: [https://oklch-palette.vercel.app/](https://oklch-palette.vercel.app/) ---
**Author:** ![findut](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/findut/32/6284_2.png) [@findut](https://community.penpot.app/u/findut)\ **Post date:** [August 19, 2025, 6:10am UTC](https://community.penpot.app/t/design-tokens-starter-kit/8781/15 "2025-08-19T06:10:43Z")
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. ---
**Author:** ![don](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/don/32/8236_2.png) [@don](https://community.penpot.app/u/don)\ **Post date:** [August 19, 2025, 2:21pm UTC](https://community.penpot.app/t/design-tokens-starter-kit/8781/16 "2025-08-19T14:21:23Z")
I really like this input/indepth talks here. 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.