Hi Everyone, I wonder that is that possible within Penpot creating modes or something esle like in Figma? Such as different typography scale or spacing for every breakpoint.
You could do this using themes and sets in design tokens, and that would translate well into the development process.
Hi Laura, thanks for your reply. So ia there any tutorial or something else for this case.
There is now 
Here’s a Penpot file showing how I would do this:
Tokens and breakpoints.penpot (132.4 KB)
And here’s a six second video showing you switching between (breakpoint) themes.
5 Likes
Vamos! You’re amazing Laura, thank you so much. It’s totally helpfull. Cheers.
1 Like
Thank you, Laura!
I’m going to try this out, you’re doing amazing job for the community..
1 Like
Framing: dev role here, not design knowledge (but trying). So using themes is kind of a “hack” for not having explicate viewport settings, right? If correct, what if I do have themes? light/dark, one with different layouts, etc.
does this translate to:
- light-desktop
- light-tablet
- light-mobile
- dark-desktop
- dark-tablet
- dark-mobile
or how would these cross connect to join together to get the themes managable?
It’s kind of a hack, but also just translates well to CSS too. I think of it more like providing @media rules. Each set contains the same token, but its value is changed based on the viewport size. Which is pretty similar to writing something like this in CSS:
nav { /* this might be equivalent to your default/global set */
width: 100%; /* this could be a nav.width token */
}
@media (max-width: 1024px) { /* tablet set */
nav {
width: 900px; /* in the tablet set, this is the value for the nav.width token */
}
}
@media (max-width: 1200px) { /* desktop set */
nav {
width: 1100px; /* in the desktop set, this is the value for the nav.width token */
}
}
Arguably, we should be moving away from fixed breakpoints (and pixel sizing) but that’s a different discussion 
Importantly, **multiple themes can be active simultaneously**. As you say, they cross connect. You can group them as “modes” and use the themes to determine which token sets are active when that theme is enabeld. So you don’t need to recreate all your tokens for each theme. Again, this is like CSS, in that your rules for @media (max-width: 1200px) and @media (prefers-color-scheme: dark) can be totally separate and not affect each other. (Or you can choose conditions that apply when they both interact.)
So for your list of themes:
You would have:
- Breakpoint (mode/theme group)
- Mobile (token set)
- Tablet (token set)
- Desktop (token set)
- Colour (mode/theme group)
- Light (token set)
- Dark (token set)
Tokens can also reference other tokens. So a theme might only contain one token that has a ripple effect throughout the other tokens. (Like using a CSS custom property or variable in code.) This is how I mostly work with “breakpoint” tokens. I use it to set the width of the viewport board using a breakpoint token, and design everything inside that board to be responsive. Sometimes I’ll also scale a font size token multiplier slightly differently based on breakpoint, or have a max-width token for text.
You might find the demo file I made for the last hands-on session useful if you want to play with theme setup:
1 Like
Thank you so much for expounding on this! Several key points I did not know or understand.
For the devs, a design token can be likened to a named value that can be reused. Like a let X= binding in F#, a variable or constant.
Being able to apply these to multiple groupings is they key insight to me. This solves in my head how you have the “breakpoint” and themes at the same time.
Also, been learning about graphs “on the fly” or “on the job” so to speak this past week. HTML and CSS and JS are all each graphs and when together one can interconnect the graphs. Important because ai is apparently really good at understanding graphs and pattern matching, and it starts find where there are holes in the graphs.
Ask chatgpt how HTML CSS JS are graphs.
Looking forward to watching your video!
2 Likes
