Penpot ✕ Tokens Studio Hands-On Demo, Feb 25th

One of my favorite things about the design community is learning from other people much smarter than me. So I can’t wait for our next hands-on session… it’s a Penpot ✕ Tokens Studio collab with Marco-Christian Krenn. Save the date: Wednesday 25th February.

One of the key benefits of design tokens is making your design system easier to grow and maintain. But do you ever just get overwhelmed by the number of tokens you’re using? I do!

With the expert help of Marco-Christian Krenn, we’ll look at creating design systems that support multiple brands, color themes, and responsive design. We’ll learn how to use fluid typography, color channels, and more, to create completely scalable systems which require just a few tokens to maintain.

Details

Date: Wednesday, February 25th

Time: UTC 3-4 PM (Convert to your local timezone with ZoneStamp)

Stream on: PeerTube, YouTube or LinkedIn

We’re going to cover…

  • Using token references (aliases) and advanced math operators

  • Fluid, responsive typography

  • Color theming with minimal tokens

  • Using tokens to test layout flexibility and accessibility

  • Tips for structuring your design token sets and themes

  • Cool stuff you can do with design tokens in the future

This is a live session, so we’ll be able to answer your questions in real time. Bring your nerdiest questions! If you can’t make it live or already have a question in mind, share it in the replies below.

Have you watched our previous hands-on sessions? Catch up with the complete Hands-on demo playlist!

8 Likes

Here’s the file for the demo in today’s hands-on :smiling_face: (video above!)

Design mocks(1).penpot (5.7 MB)

And here’s the random color generator:

Random color generator.penpot (72.4 KB)

Let me know if you have any further questions or any other practical demos you’d like to see in the future!

5 Likes

So excited to explore this file after watching your stellar video explaining it! Now (July 2026) trying to import it into the latest version of penpot.app it crashes penpot. The downloaded error log starts with “Hint: error on validating file referential integrity”

Perhaps the latest version of Penpot doesn’t play nice with some previous versions of components/tokens/etc?

If you have a moment, perhaps you could upload a freshly exported copy? Thank you!

PS I asked Claude what the details in the error log mean and it’s interesting:

This is a backend validation error from Penpot's file-saving process, not a rendering bug you did something wrong to cause — it's Penpot rejecting a save because it detected inconsistent internal data in one of your shapes.

What it's saying, in plain terms:

Penpot uses a component system where you have a "main" component (the original), and then "copies" of it placed elsewhere in your file. When a copy is nested inside another component (a "copy within a copy"), Penpot needs to track a pointer back to which main component it derives from — recorded as component-id and component-file on that shape.

The specific error — :component-id-mismatch — means:

"Nested copy component-id and component-file must be the same as the near main"

In other words: the shape named "core element / button" (a frame, acting as a nested component copy) has a component-id/component-file pointing to one component (48cb8366-... in file 8b1c6e78-...87), but Penpot expected it to match the component reference of its nearest ancestor main component in the tree, and it doesn't. Somewhere along the line, this shape's link to its "parent" main component got out of sync — likely from copy/pasting, detaching, or restructuring nested components, or from swapping one component for another inside a nested instance.

Claude’s suggestion to fix the file:

Workaround: try detaching the problematic nested component instance ("core element / button") from its main component, then re-attaching/re-instancing it — this typically clears stale reference IDs.”

PS I submitted this bug report: Tutorial Templates with components cause error in latest Penpot · Issue #10839 · penpot/penpot · GitHub

Design tokens can definitely get overwhelming once a system starts growing. I like the idea of using fewer tokens while still supporting different brands, themes, and responsive layouts. The part about fluid typography sounds especially useful. Will the session also cover some real examples of how to keep a large token system organized?

The session already happened, you can watch it at:

We do cover a bit around preventing overwhelming systems. And I’m always eager to discuss how to create more efficient systems with fewer tokens. (This is something Marco and I discussed in person at Penpot Fest too!) So if you have anything else you want to chat about, let’s get a thread started :smiley:

You might also find these blog tutorials interesting, as I wrote them with fewer tokens in mind!

1 Like