Hello Penpot friends, I’m wondering how can I manage my Responsive Type Scale using Penpot’s Tokens. I’m still a bit confused with Sets and Themes (I’m new to Penpot). I have built a design system with Sass (SCSS) and would love to implement it in Penpot (knowing my Sass Type Scales may need some refactoring so I can have the same JSON file for both Penpot and Sass). Thing is, I’m not sure how to proceed, I have 7 Type Scales (from Print to Desktop XXL) and 10 steps for each.
I understand how to use the different kind of Tokens (Font Family, Font Size and Number) and how to build a Type Scale, the puzzle in my head is about managing Type Scale vs. Screen Size (or paper sheet) for fast swapping.
I’m certain it can be done with what we have in Penpot, and I will continue working on a solution that works, but if any of you have ideas to get me going on faster it would be great for all of us, starting with me 
Really interesting idea. I think responsive type scales become especially powerful when they’re connected to design tokens and fluid values instead of only fixed breakpoints.
You can check this Blog post that @LauraKalbag wrote, it may help:
I have a blog post brewing about breakpoints! But let me give you a basic demo on how I would do this for your case.
First, here’s the result:
And the file:
Breakpoints and typescales.penpot (22.9 KB)
This demo assumes you’ve chosen explicit font sizes (or previously calculated the font sizes) for your typescales. But it would work similarly for typescale values calculated inside the design tokens.
Here’s how I’ve set up the file:
One board to represent all viewports
This board changes widths to represent our viewport. To make the board mimic a responsive viewport, I used a flex layout and set it to fixed width and fit content. This will make the content inside the board determine the height of the viewport but keep the same width regardless of its content.
See the Token sets setup for how we define the responsive widths.
Token sets
- Global set: all the design tokens that should be applied to all breakpoints.
- Mobile set: tokens that only apply to the mobile breakpoint.
- Tablet set: only apply to the tablet breakpoint.
- Desktop set: only apply to the desktop breakpoint.
In my Global set, I have:
- the font family token,
family.default. I then applied this token to all text elements. - a funky shadow token,
shadow.viewportfor the top border effect on the viewport. Applied to the viewport board. - the spacing tokens,
spacing.sm,spacing.mdand so on (although you might want to scale these along with the viewport size.) Applied to the viewport padding and text element margins.
I’ve grouped my breakpoint sets (using / in the name). You don’t have to do this, I just find it helps me visualise the overall tokens structure better.
In the Breakpoint / Mobile set:
- the dimension token,
dimension.viewport.width. This has a value of360, representing the width of the viewport on mobile devices. Applied to the viewport width. - the font size tokens,
font-size.sm,font-size.mdand so on. These are where the type scale is defined. These are applied to their relevant text elements. - bonus color tokens,
color.body.background,color.body.border, andcolor.body.text. These are applied to their relevant elements so each breakpoint has a different colour theme. For mobile, this is a gold/green-yellow colour.
In the Breakpoint / Tablet set:
The same tokens as the Breakpoint / Mobile set, with the values tweaked for tablet scale. For example, the dimension.viewport.width has a value of 960, the type scale is tweaked so the largest font sizes are bigger than on mobile, and the colour theme is green.
In the Breakpoint / Desktop set:
The same tokens as the Breakpoint / Mobile and Breakpoint / Tablet sets, again tweaked for Desktop. The dimension.viewport.width has a value of 1200, the type scale defines the largest font sizes as even bigger than on tablet, and the colour theme is blue.
Token themes
The themes is where the magic happens. I have three tokens themes set up. Each theme is in the Breakpoint group (created and set when you create theme.) This is useful if you want to have other themes that can be applied independently of the Breakpoint themes (like light and dark modes.)
- Breakpoint (group) Mobile (theme): Global set and Breakpoint / Mobile set enabled.
- Breakpoint (group) Tablet (theme): Global set and Breakpoint / Tablet set enabled.
- Breakpoint (group) Desktop (theme): Global set and Breakpoint / Desktop set enabled.
Essentially, each theme is telling Penpot to enable and disable combinations of specific token sets. When the token names are the same across multiple sets (like the breakpoint sets), Penpot uses the value from the enabled set.
This means that, if you’ve applied the dimension.viewport.width token to the Viewport board’s width property, the width property will update according to the token value in the currently enabled theme.
With these themes set up, you can use the theme menu at the top of the Tokens tab to switch between breakpoints.
Well, that did become blog post length 
I really hope this all makes sense. Please let me know if you have any further questions!
Thank you so much Laura, this is EXACTLY what I needed, and more.
I’m going to implement most of these principles in my typography library.
I’m not certain when (my tasks priorities have changed), but that’s the way to go for sure!
