Design Systems at Scale Penpot ✕ Tokens Studio Hands-On Demo

Design Systems at Scale | Penpot ✕ Tokens Studio Hands-On Demo 🔗 **Source:** [Design Systems at Scale | Penpot ✕ Tokens Studio Hands-On Demo](https://www.youtube.com/watch?v=TmVuRMf5Ojg) > [!note]+ Document Notes > tags: [design-tokens, design-systems, penpot, scaling-typography, responsive-design] > author: Laura Calbach > source: YouTube > reference: https://www.youtube.com/watch?v=TmVuRMf5Ojg > date created: 2024-12-22 10:30 > > # 🏷️ Title: Design Systems at Scale | Penpot ✕ Tokens Studio Hands-On Demo >  ## 🧰 Action Inbox - [H1] Test algorithmic typography scaling with power functions — eliminate performance bottlenecks #scaling - [H2] Implement responsive breakpoint multipliers for mobile-first design — improve accessibility across devices #responsive-design - [H3] Explore HSL channel separation for dynamic color palette generation — enable white-label solutions #color-theory ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [Penpot Platform](https://penpot.app) - [Tokens Studio](https://tokens.studio/) - [Proportio Tool by Nate Baldwin](https://proportio.app/) ## 📝 Summary - Laura Calbach and Marco Christian Krenn demonstrate advanced design token implementation in Penpot - Focus on scalable typography systems using mathematical functions and responsive breakpoints - Covers performance optimization by replacing token dependencies with algorithmic approaches - Shows color palette generation using HSL channel separation for multi-brand systems - Emphasizes accessibility through text zoom support and responsive design principles ## 📖 Main Content This live demo explores sophisticated design token architectures that enable scalable design systems. The session demonstrates how mathematical functions can replace cascading token dependencies to improve performance while maintaining design consistency. Key concepts include using power functions for typographic scales, implementing responsive breakpoint multipliers, and generating dynamic color palettes through HSL channel manipulation. The approach enables multi-brand systems where changing a few base values propagates throughout entire design systems. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/TmVuRMf5Ojg?t=0) — [H1] Introduction to Penpot and Tokens Studio Integration - Key idea: Penpot natively supports design tokens with Tokens Studio collaboration - Evidence: "Penpot does support design tokens natively... tokens have been a collaboration between us" #### ⏱️ [03:45](https://youtu.be/TmVuRMf5Ojg?t=225) — [H2] Design Token Structure and Mathematical Functions - Key idea: Tokens use mathematical functions like power and rounding for scalable systems - Evidence: "This pow here, this little function is the power function... multiplies the multiplier by itself" #### ⏱️ [07:32](https://youtu.be/TmVuRMf5Ojg?t=452) — [H1] Typography Hierarchy with Proportional Scaling - Key idea: Mathematical scaling creates consistent visual hierarchy across breakpoints - Evidence: "Once define how your scaling works... suddenly we don't need to change 12 values for each font size" #### ⏱️ [12:18](https://youtu.be/TmVuRMf5Ojg?t=738) — [H3] Proportio Tool for Visual Scale Testing - Key idea: Visual interfaces help designers understand mathematical scaling effects - Evidence: "We actually need that visual surface that shows us what this has... just by the formula" #### ⏱️ [16:41](https://youtu.be/TmVuRMf5Ojg?t=1001) — [H2] Performance Optimization Through Mathematical Functions - Key idea: Direct mathematical calculation eliminates cascading token dependencies - Evidence: "That script needs to run and run and run... can have quite strong performance impact" #### ⏱️ [21:25](https://youtu.be/TmVuRMf5Ojg?t=1285) — [H1] Responsive Breakpoint Implementation - Key idea: Different multipliers for mobile, tablet, desktop accommodate screen constraints - Evidence: "Multiplier for mobile is 1.1... for tablet 1.125... for desktop 1.25" #### ⏱️ [28:14](https://youtu.be/TmVuRMf5Ojg?t=1694) — [H2] Flexible Layout Design with Flex and Grid - Key idea: Starting with breakpoint dimensions and flex layouts enables responsive components - Evidence: "Setting each of your objects as well to flex... their contents can also flex to fill" #### ⏱️ [32:07](https://youtu.be/TmVuRMf5Ojg?t=1927) — [H3] Text Zoom for Accessibility Compliance - Key idea: Separate zoom multipliers support accessibility requirements up to 200% - Evidence: "Web content accessibility guidelines... ensure your layout is good for zooming to 200%" #### ⏱️ [38:52](https://youtu.be/TmVuRMf5Ojg?t=2332) — [H2] Advanced Text Scaling Considerations - Key idea: Linear scaling isn't ideal - small text needs more scaling than large headlines - Evidence: "When font size scaling is set to 200%... 86 pixel headline, we don't need to scale that anymore" #### ⏱️ [42:19](https://youtu.be/TmVuRMf5Ojg?t=2539) — [H1] Upcoming Penpot Features for Token Management - Key idea: Token grouping and remapping capabilities improve navigation and maintenance - Evidence: "Tokens are now grouped... split into a hierarchy according to the dots" #### ⏱️ [46:33](https://youtu.be/TmVuRMf5Ojg?t=2793) — [H3] Token Naming Best Practices - Key idea: Avoid semantic HTML names and pixel values in token naming - Evidence: "Never name your tokens semantically, H1, H2... you're mixing semantic meaning with visual appearance" #### ⏱️ [52:47](https://youtu.be/TmVuRMf5Ojg?t=3167) — [H2] HSL Color Space Channel Separation - Key idea: Breaking colors into separate hue, saturation, lightness tokens enables palette generation - Evidence: "Generating all of these values separately and pulling them together into the design token" #### ⏱️ [58:26](https://youtu.be/TmVuRMf5Ojg?t=3506) — [H1] Color Space Comparison and Limitations - Key idea: Different color spaces have unique advantages and constraints for design systems - Evidence: "OKCH is actually not a uniform color space... there's actually a pretty steep peak here" #### ⏱️ [67:15](https://youtu.be/TmVuRMf5Ojg?t=4035) — [H2] Multi-Brand System Architecture - Key idea: Changing base hue tokens propagates through entire brand systems automatically - Evidence: "Only difference between those brands... they've got a hue default value set" ## 📚 References - [Penpot Platform](https://penpot.app) - [Tokens Studio Documentation](https://tokens.studio/) - [Proportio Scale Tool](https://proportio.app/) - [Nate Baldwin's Color Tools](https://leonardocolor.io/) - [Huetone Color Palette Generator](https://huetone.ardov.me/) ## 🗣️ Paraphrase - Design tokens become more powerful when implemented with mathematical functions rather than cascading references, improving both performance and maintainability - Responsive typography systems benefit from different scaling multipliers across breakpoints, with smaller multipliers on mobile and larger ones on desktop - Color palette generation can be automated by separating HSL channels into individual tokens, enabling dynamic brand switching and white-label solutions ## 📰 Newsletter **Scale Your Design Systems with Mathematical Precision** This week's demo showcases how Penpot's native design token support combines with Tokens Studio to create sophisticated, scalable design systems. The breakthrough approach uses mathematical functions like power and rounding to eliminate cascading token dependencies that can slow down your workflow. **Key Takeaway:** Replace token chains with direct mathematical calculations. Instead of having each font size reference the previous one, use a base size multiplied by a scale factor raised to a power - dramatically improving performance. **Practical Application:** Implement responsive typography with different multipliers per breakpoint (1.1 for mobile, 1.25 for desktop) while supporting accessibility requirements up to 200% text zoom. **Community Connection:** Join the beta testing for Penpot's MCP server integration, bringing design tokens into your development workflow seamlessly. Resources: [Penpot Platform](https://penpot.app), [Tokens Studio](https://tokens.studio/), [Proportio Scale Tool](https://proportio.app/) ## ✅ Action Items #### DevRel - Developer advocacy: Create tutorials on mathematical token functions, performance comparisons - Education: Workshop on responsive design token architecture, accessibility compliance - Developer experience: Document token-to-CSS compilation, API integration patterns - Developer marketing: Showcase Penpot-Tokens Studio collaboration benefits - Community management: Facilitate design system architecture discussions #### OSPO - Policy & Governance: Evaluate open-source design tool adoption policies - License Compliance: Review Penpot and Tokens Studio licensing compatibility - Security Management: Assess design token security in multi-brand systems - Software Inventory: Track design system tool dependencies and versions - Developer Support: Training on mathematical functions in design systems - Community Engagement: Support Penpot ecosystem development - Strategic Alignment: Align design system tooling with organizational goals #### Community - Maintainers: Support Penpot feature development roadmap, token API evolution - Contributors: Contribute to documentation, mathematical function examples - Sponsors: Consider supporting open-source design tool development - Ecosystem: Cross-tool integration with Figma, Sketch migration paths #### WordPress - Design: Implement scalable typography systems in WordPress themes - Documentation: Create guides for design token implementation in block themes - Accessibility: Ensure WCAG compliance in responsive typography scaling - Meta: Evaluate Penpot for WordPress.org design system work - Themes: Provide token-based theme development guidelines - Community: Share design system best practices at WordCamps #### The WPCC - Programs: Fellowship opportunities in design systems architecture - Projects: Open-source design tool evaluation and implementation - Funding: Support design accessibility improvements across projects #### FAIR - Technical independence: Evaluate proprietary vs open-source design tooling - Policies: Guidelines for design token portability and vendor independence - Governance artifacts: Design system governance templates and standards ## 🧪 Hypotheses - Mathematical token functions reduce compilation time by 60% compared to cascading references - Responsive multiplier systems improve readability across devices by maintaining appropriate text sizes - HSL channel separation enables 90% faster brand switching in multi-tenant applications - Algorithmic color generation reduces designer workload for palette creation by 75% ### 📊 Methodology - Performance testing: Measure token compilation times with different architectures - User testing: Evaluate readability and accessibility across breakpoints and zoom levels - Brand switching analysis: Time comparison between manual and algorithmic palette updates ### ❓ Questions - How do mathematical token functions affect design tool performance at enterprise scale? - What are the optimal scaling multipliers for different device categories and use cases? - Can algorithmic approaches replace human color theory expertise in brand development? ### 🔮 Future Research - Integration patterns between design tokens and CSS-in-JS frameworks - Machine learning applications for automatic design system optimization - Cross-platform design token compilation for mobile and web consistency ### 💡 Implications - Practice: Fundamental shift from manual to algorithmic design system maintenance - Policy: Need for design token standards and interoperability guidelines - Security: Token architecture affects system performance and maintainability - Education: Mathematical concepts becoming essential for design system architects - Funding: Investment in open-source design tooling versus proprietary solutions ### 🧠 Learning Styles Assessment Reading level estimate: Grade 12-14 (technical design content) #### 👀 Visual learners - Present: Live design demonstrations, color space visualizations, typography scales - Improve: More mathematical function diagrams, token architecture flowcharts #### 🔊 Aural learners - Present: Live commentary and discussion throughout demonstration - Improve: Audio-only version focusing on architectural concepts #### 🗣️ Verbal learners - Present: Clear definitions of technical terms, analogies for complex concepts - Improve: Glossary of design token terminology, conceptual comparisons #### 🧩 Kinesthetic learners - Present: Live hands-on demonstration, interactive tool usage - Improve: Step-by-step workshops, downloadable practice files #### 🧠 Logical learners - Present: Mathematical formulas, performance comparisons, systematic approaches - Improve: Decision trees for token architecture, performance benchmarks #### 🧑‍🤝‍🧑 Social learners - Present: Two-person collaboration, live chat interaction - Improve: Group exercises, community challenges, peer review sessions #### 🧘‍♀️ Solitary learners - Present: Detailed technical documentation, individual exploration time - Improve: Self-paced tutorials, reflection exercises on system architecture #### 🌿 Naturalistic learners - Present: Systematic categorization of token types and hierarchies - Improve: Ecosystem thinking about design tool relationships ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear heading structure, descriptive element identification - Improve: Alt text for visual diagrams, ARIA labels for interactive elements #### Keyboard navigation - Present: Standard video controls accessible via keyboard - Improve: Timestamped navigation, transcript search functionality #### Contrast and readability - Present: High contrast design examples, readable typography demonstrations - Improve: Contrast ratio validation in color palette examples #### Text resizing and reflow - Present: Demonstrates 200% zoom requirements and responsive behavior - Improve: Testing across different browser zoom implementations #### Media and captions - Present: Live demonstration with verbal narration - Improve: Auto-generated captions, downloadable transcript #### Forms and interactions - Present: Clear demonstration of interactive design tools - Improve: Accessible alternatives for color-dependent information #### Standards reference - Maps to WCAG 2.2 AA success criteria for responsive design and text scaling ### 🌍 DEIB Assessment #### Cultural breadth - Present: Focus on universal design principles, mathematical concepts - Improve: Examples from diverse design traditions, global use cases #### Inclusive language - Present: Technical terminology clearly defined, collaborative tone - Improve: Avoid assumptions about mathematical background #### Neurodiversity support - Present: Clear structure, logical progression, multiple explanation methods - Improve: Processing time warnings for complex concepts #### Representation - Present: Equal collaboration between presenters, supportive interaction - Improve: Diverse design examples, inclusive imagery in mockups #### Psychological safety - Present: Acknowledgment of learning process, "I don't get things perfect first time" - Improve: Explicit encouragement for questions, beginner-friendly alternatives ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Mathematical functions logically improve performance by reducing dependencies - Inductive strength: Examples demonstrate consistent scaling across multiple use cases - Causal reasoning: Clear cause-effect between token architecture and system performance - Analogical strength: Effective comparison between color spaces and 3D models #### Fallacies - Authority appeal: Reliance on "famous guy working at Adobe" - address with independent validation - False precision: Mathematical formulas may oversimplify design complexity - acknowledge limitations #### Tone of voice - Overall tone: Collaborative, educational, technically precise with acknowledgment of learning process ### 🛡️ DARVO Analysis - Deny: No defensive patterns observed - Attack: No attacks on individuals or approaches - Reverse victim/offender: --- ## Full Transcript [00:07] Hello my friends and welcome to another [00:10] pimpot hands-on session. This is where I [00:13] show you how I design in penmpot live. [00:17] So what is penmpot for those of you that [00:19] don't know? It's the web-based [00:21] open-source design platform and you can [00:23] find it at pmpot.app. [00:26] By the way, great news. The beta testing [00:29] for the pimpot mcp server has just [00:32] started and you can follow this link [00:35] that should be in the chat somewhere to [00:37] join the team and we are live in case [00:40] you couldn't tell by the chat and uh the [00:43] chat yes I managed to point in the right [00:45] direction and that means you can ask [00:47] questions live unless you're watching [00:49] the video back later obviously I can't [00:52] be there in the future and either way [00:54] you can follow us and you can subscribe [00:57] wherever you're watching watching this [00:58] to be the first to know about the next [01:01] live session. And please drop me a [01:03] comment, a thumbs up, a like, whatever [01:05] to let me know if you enjoy these [01:07] sessions and what you want to see in the [01:09] future. And uh so hi chat, I can [01:12] actually see the chat as you're going. [01:14] So, hey, let me know who you are and [01:17] where you are. I'm Laura, by the way. [01:20] I'm in Ireland. [01:22] Oh, I can see Pablo. Hey, Pablo. Hey, [01:24] Errol. Hey, Agit. Hey Natasha. [01:29] Oh, this is great. Text is really tiny. [01:32] Oh, there you go. Hey, Marco. We're [01:33] gonna introduce you in a moment. [01:36] And uh so I am Laura Calbach and I'm a [01:39] designer, a developer, and accidental [01:43] educator, I suppose. And I just love to [01:46] share what I'm learning while I'm [01:48] learning it. And this is Marco Christian [01:52] Krenn from Token Studio [01:54] >> as if by magic. So Marco, tell us a bit [01:58] about what you do and about Token [02:00] Studio. [02:02] >> Um, what do I do? Uh, I I nerd out about [02:05] design tokens. I could go way too deep [02:07] on topics. And um, even though I failed [02:11] in math, now the thing I do is like [02:13] really think about a lot of math and how [02:15] we actually can make scalable systems. [02:17] So kind of like yeah really like I dig [02:20] deep into token architecture, how we can [02:22] build scalable systems, how we can [02:23] abstract concepts into a higher level [02:25] kind of like and yeah so that's my job [02:28] at token studio. I support a lot of our [02:30] customers with the daily tasks and [02:33] challenges and kind of like I'm our lead [02:36] customer. I'm the one that really brings [02:38] a lot of requests in. Um so yeah I I'll [02:41] I challenge our team to always stay on [02:43] top of things. [02:45] >> Fabulous. And why is token studio so [02:49] relevant to penmp because I think a lot [02:51] of folks might not know this. [02:54] Um well under the hood tokens have been [02:57] a collaboration between us right so it's [03:00] a nice thing that we actually could [03:01] bring together that knowledge of penpot [03:03] and us kind of like to really work on [03:04] tok studio um as our team has been also [03:08] like a big part piece in shaping the [03:10] standard kind of like and bringing that [03:11] forward and bring that to penpot kind of [03:13] like and working on a really native [03:15] integration of design tokens into a [03:17] platform that fully is supported. [03:19] Yeah, and that's the thing. Penpot does [03:22] support like design tokens natively. In [03:25] fact, I might just show you um exactly [03:27] what design tokens are. Uh I think it [03:30] helps to sometimes be able to see it in [03:31] action. And so you can find the tokens [03:35] tab here in Pempot's left panel. So if I [03:38] select that, these are all sets of my [03:41] different tokens. And I've organized [03:43] those sets into themes. We'll go into [03:45] that a little bit later on. and tokens [03:48] themselves they're named values. So let [03:51] me grab a name like I'm going to go to [03:54] this typography. [03:56] So we looked at typography in the last [03:58] hands on say we have this um not those [04:02] ones. Uh [04:06] going to pick a good one to show right [04:07] now. [04:11] A [04:13] font families in here somewhere else. Uh [04:16] okay. But anyway, it's basically a name [04:19] and a value. And so the value could be [04:22] something simple like a number. It could [04:24] be the name of something uh a name value [04:28] or it could reference another design [04:31] token. And so that is just the beginning [04:34] of what can make design tokens so [04:37] powerful. Uh one thing that um I should [04:40] tell you while I remember as well that's [04:42] related to tokens um if you are using [04:45] the plugins API for pimpot and by [04:49] extension if you using uh the MCP server [04:53] then you might be interested to know [04:55] that in the next release tokens support [04:57] is coming to the plugins API. So if [05:00] anyone is uh wanting to work with tokens [05:03] programmatically, create your own token [05:05] workflows uh using plugins and pen MCP, [05:09] you can do it there. And so don't forget [05:11] to join the beta testing team for the [05:13] MCP server if you're interested in that. [05:16] Now, this week we're going to do a [05:18] slightly different structure from usual. [05:20] We're not going to do Q&A throughout the [05:23] hands-on session. We're going to save it [05:25] for the end. So, if you've got a really [05:27] good question, you can ask it right now [05:30] and actually chances are there's a [05:31] member of the penot team there who might [05:33] answer it for you right away. Um, or we [05:36] will answer them at the end of the [05:38] session. So, are any of you curious [05:42] about what's left in the rest of the [05:43] demo? Uh, let's get to it and let's have [05:46] a look at responsive scales and [05:49] typography with design tokens. [06:01] So, in the last hands-on session, we [06:03] looked at using tokens for a [06:06] proportional typographic scale. And so, [06:09] this was something a little bit like [06:11] this. Let me find a demo page. There we [06:15] go. So, we were looking at something [06:17] like this. And I showed you how we can [06:19] build a typographic hierarchy. And then [06:22] I had a chat with Marco and we came up [06:25] with an even better way to create a [06:27] proportional system using design tokens. [06:30] And that's the cool thing about this [06:32] community is that we can learn from each [06:35] other and make things better. And we're [06:38] always learning and always building. I [06:40] am never going to pretend that I get [06:41] things perfect first time around, every [06:43] time round. So I don't know, Marco. [06:47] >> Yeah. Why would designers and developers [06:50] like to use type scales like this as [06:52] part of their design systems? [06:55] >> Well, like I mean we all need some kind [06:57] of hierarchy in our topography. Like [06:59] that's the the visual principle to [07:01] actually separate content in in the [07:03] right manner. [07:04] >> Um what you already did, right, is kind [07:06] of like you already had a easy formula [07:08] behind it that actually scaled between [07:10] things. Um I think in the last session [07:12] you actually didn't have the break [07:13] points in yet which we will talk about [07:15] later. [07:16] >> Absolutely. Um but actually like yeah [07:18] like if you once define how your scaling [07:20] works and how the semantic hierarchy [07:22] works it's easier to scale it up kind of [07:24] like to introduce things like break [07:25] points or density even right which is a [07:28] very complex concept actually and how it [07:30] works but if we can abstract into a [07:35] simple logic it makes our system more [07:37] scalable because suddenly we don't need [07:38] to change 12 values for each font size [07:41] we change maybe one or two the base font [07:43] size and the scale maybe and suddenly [07:46] everything changes and if you look at [07:49] topography I feel it's one of the pieces [07:52] that really defines a brand. [07:54] >> So you can completely change a brand's [07:56] image right just by changing the font [07:57] family or the scaling or the weight it [07:59] completely changes how everything looks [08:01] like. So you have such a powerful knob [08:04] suddenly that you can turn that actually [08:06] like changes so much and you just have [08:08] like it at your fingertip [08:09] >> and that's what I like. [08:11] >> It's consistency like you can that [08:13] creating that consistency of an [08:15] experience. [08:16] >> Uh so um you showed me some pretty cool [08:20] tools before that you were using for uh [08:24] type scaling or that you'd even made as [08:26] well. [08:27] >> So this one is actually by Nate Baldwin. [08:29] you probably know him kind of like [08:31] famous guy working at Adobe Spectrum for [08:34] like I don't know a decade probably [08:37] as long as I can think um he has some [08:40] really cool tools one is Leonardo for [08:42] color generation one is proportio that [08:43] he built on the side which is really [08:45] nice and we will dig into that a bit [08:47] deeper but like what proportio allows [08:49] you is really to get a visual interface [08:51] to what you do so that's something that [08:53] tokens kind of like sometimes struggle [08:55] with or we we actually struggle with [08:57] right we're just working with data [08:59] And we need to visualize that data [09:01] actually to to make it more [09:02] understandable for us what effect does [09:04] it have. Same you just showed in [09:06] panport, right? We actually need that [09:07] visual surface that shows us what this [09:09] has has kind of like just by the [09:11] formula. It's a bit hard to guess I [09:13] would say. And yeah, we can just like [09:16] here for example like um he has some [09:17] presets here of like different scaling [09:19] behaviors. Um golden ratio everybody [09:22] knows maybe not the best idea for type [09:24] scale because this happens. So let's not [09:27] use a golden ratio for scaling behavior [09:29] on topography. Let's go back to [09:31] something that's kind of like a minor [09:33] second or a minor third kind of like [09:34] which is already a very strong scaling [09:36] behavior. And that also brings us to [09:38] something where like breakpoints come in [09:40] very interestingly, right? I can't use [09:43] 83 pixels on a mobile breakpoint. I can [09:46] maybe use it on desktop, [09:48] >> but we're never going to ship this on a [09:49] mobile phone. I'm like, yeah. So that's [09:51] not going to work. So what do we need? [09:53] we actually need to reduce that size to [09:54] say like hey on mobile we might use a [09:57] minor second and on desktop we can [09:59] actually use the minor third for the [10:01] scaling behavior and at the end it's [10:03] just one number we're changing here and [10:06] if I want to say hey we go with 1.25 25 [10:09] that still works kind of like so it's [10:11] really cool because you can change one [10:12] value and everything adjusts. [10:16] >> Yeah, it's it's so cool. It makes it so [10:18] easy to try out different scales really [10:20] quickly as well. And we can recreate [10:23] that exact same thing inside penot. So I [10:26] don't know why don't I show you how I've [10:28] made up my tokens now based on your [10:30] advice. So um that's not to blame you if [10:33] I've done it wrong. [10:35] So uh let's break down this font size [10:38] 3XL uh token here. So let me go down and [10:43] find that. Ah now [10:46] so this is actually um referencing this [10:50] token here. [10:52] I have a font size 3XL. You can tell [10:54] that it's applied um because it's [10:56] highlighted in the sidebar. And this [10:59] token actually just references this [11:01] scale token. So if I go to my scale [11:04] token which is in the base here, we can [11:07] have a word about how I've structured [11:09] things later. And so this uh might you [11:15] might look at this and go, "Oh, what?" [11:18] So I've created these scale tokens um [11:21] because then I've used them as number [11:23] tokens. And the reason I've done that is [11:25] because they can be referenced by any [11:27] token type. So that means any token type [11:30] that can accept numbers that is. So they [11:33] are then referenced by their equivalent [11:35] tokens for spacing and radi radiuses and [11:40] sizing which means if I update this [11:42] scale token it will update all of the [11:45] other tokens automatically. [11:48] So you might be looking at this and [11:49] going uh you what? There's some new [11:52] things in here. And uh that was my world [11:55] two weeks ago. Thanks to Marco who sent [11:58] me down this rabbit hole. And uh oh Sam [12:01] Gordes Gordashko who I need to credit as [12:03] well um her writing on token studio [12:07] really helped me dive into what was [12:08] possible here too. So what I have here [12:10] is I have a base token that I'm [12:13] referencing in my curly brackets. So if [12:15] I look at what this base token is, this [12:18] is a nice reasonable [12:21] small font size. So, I like to start [12:24] with 16 because I'm an accessibility [12:26] person and I think being able to read [12:28] text is important. Um, I've got a little [12:31] multiply by zoom here. Um, we'll look at [12:34] that a bit later. Um, but it's basically [12:36] it's this value here. And that's the [12:40] base size from which everything else [12:43] will scale. So, it's a nice healthy font [12:45] size. If I then go back into my token [12:48] here, I've got this multiplier token [12:51] that I'm also referencing. And that [12:53] multiplier is exactly the scale that [12:56] Marco was showing earlier with [12:58] proportio. It's your ones, your 1.2, [13:01] your 1.3, your golden ratio, whatever [13:05] you want to put in there. And um what [13:09] you might note is that this is slightly [13:11] different for every breakpoint size like [13:14] Marco mentioned, and I'll show you that [13:17] later. I'm always, by the way, with this [13:19] multiplier, I'm using one or higher [13:21] because I don't want to make my font [13:23] sizes too small. Uh, that's quite [13:26] important. So, back to the mystery of [13:28] this values here. So, we have the [13:33] basically the base and the multiplier [13:35] are being multiplied by each other to [13:38] get our initial value. Now, this pow [13:41] here, this little function is the power [13:45] function. And so what that does is it [13:47] multiplies the multiplier by itself to [13:50] the number of times at the end of the [13:53] expression. So five here and it's five [13:57] because um the 3XL size here is the [14:02] fifth number up from the small size. So [14:06] that would be to the^ of 1 to the^ of 2 [14:09] 3 4 5. And if we looked at say the 3xs, [14:15] it goes the other way. It's minus3 [14:17] because minus one minus 2 minus three. [14:21] >> Maybe to add there shortly kind of like [14:22] your base is actually small and not [14:24] medium. [14:25] >> Yes. [14:25] >> Yeah. [14:27] >> Which is not necessarily a com like you [14:30] base your base size on medium don't you? [14:32] Usually [14:32] >> I mostly go with medium. I feel kind of [14:34] right like we have learned the behavior [14:36] of like medium is the average. It [14:38] doesn't need to be kind of like but yeah [14:40] I try to to always say hey okay medium [14:42] is the base but it in typography it [14:44] actually makes sense sometimes that you [14:46] say hey that's not the most used font [14:48] size I have kind of like so maybe it [14:50] actually is offset somewhere [14:53] >> yeah I suppose as long as you know which [14:55] you're using [14:57] it consistently and your team knows uh [14:59] but yeah that is good maybe I'll try [15:01] setting medium as my base one in the [15:04] future [15:05] >> it's also interesting for example like [15:07] shortly because you are like using the [15:08] same scale up and down, right? [15:10] >> And that can have implications, but [15:12] nothing prevents you from using a [15:14] different scaling behavior downwards [15:16] than upwards because downwards is [15:18] tricky, right? You're getting two small [15:19] values have weird jumps between, hey, [15:21] actually like that's 13 pixel, 13 pixel, [15:23] and 11 [15:24] >> because of the rounding of of the kind [15:26] of like scaling behaviors. [15:28] >> So maybe there are different version of [15:30] steps is better. [15:32] >> Yeah, that's such a good point. Yeah, [15:34] does it? Yeah, cuz actually would I ever [15:36] use this three exercise? No, because [15:39] it's tiny. It's not useful for anything. [15:42] It's it's not particularly readable. And [15:44] so finally the final function. So this [15:48] round that is wrapped around the rest of [15:50] our function. And what that does is that [15:52] will round our number, whatever number [15:56] is produced by this bit to the nearest [15:59] whole number, which tends to result in [16:02] cleaner rendering across pixels as well [16:05] as making it easier to align your [16:08] layouts together. So I suppose aside [16:11] from what we've already mentioned, do [16:12] you foresee any issues with doing this? [16:14] I'm quite new to this doing a formula [16:16] like this, Marco. And given that I'm [16:18] glad you said you failed maths because I [16:20] was quite I'm terrible at maths and this [16:23] is quite a lot for me. [16:25] >> We have good good helpers nowadays, [16:27] right? That actually can help us find [16:29] patterns in what we actually build. Um, [16:31] so I also like sometimes just paste in [16:33] the scale I find and like tell it, hey, [16:35] can you find a algorithm behind what I [16:38] have here as numbers? LLMs are really [16:40] good at finding patterns. So that [16:42] actually makes sense to really [16:44] >> a cool. Yeah. [16:45] >> Yeah. For the rounding, you're [16:47] absolutely right. If we didn't round the [16:49] numbers, we would end up with sub pixels [16:51] of like weird numbers of like 17.32 [16:54] pixels. [16:55] >> And on older screens that don't have [16:58] retina resolution. Sub pixels, as you [17:01] said, don't render nicely. They actually [17:02] have fringing on the edges. Kind of like [17:04] it doesn't look good. Like the font gets [17:06] blurry. Even with anti-aliasing, it [17:08] might not look nice as we want. Um maybe [17:12] something why this looks so complicated [17:13] and not like what we looked at at kind [17:16] of a proportio [17:18] >> because we talked about this in the [17:19] session before, right? [17:20] >> We actually had a performance issue [17:22] >> because what like maybe we can explain [17:24] what that scale actually does under the [17:26] hood and what the mental model behind it [17:28] is [17:28] >> to explain how we got to that final [17:31] formula. [17:32] >> Yeah. So, if you were here for the in [17:35] the previous hands-on session, you would [17:37] have seen that the way that I created my [17:39] scale was for each value, I was [17:42] multiplying the previous value by the [17:46] multiplier. So, I was saying for font [17:47] size medium, multiply font size small by [17:51] the multiplier. And it was making a [17:54] scale that had that exponential [17:57] uh sizing change. And then Marco said to [18:00] me that's not the best way of doing it [18:03] because if you think about it every like [18:06] how did you explain it? It's the [18:08] dependenc. [18:09] >> Yeah. So like there's a resolution path [18:12] behind tokens right the moment we use [18:13] algorithms kind of like or formulas we [18:15] need to resolve that equation and get a [18:18] result and then do another equation get [18:20] a result and do another equation and get [18:21] the result. So what happens is kind of [18:23] in the background now suddenly like that [18:25] script needs to run and run and run and [18:26] run [18:27] >> for everything again and again and again [18:29] and again and that can have like quite [18:31] strong performance impact. So we might [18:34] not think about it at first. Oh that [18:37] like yeah that's like kind of like how I [18:38] want to do it. Um but in that way you [18:42] suddenly calculated 10 times your [18:45] typography kind of like so 10 times we [18:47] needed to run through all the all the [18:49] math and it's a linear like stacked [18:52] process right it can't do [18:53] parallelization it's like really okay [18:54] one by one by one by one so the time [18:57] stacks up which is annoying right we [18:58] know where millisecond counts in [19:00] reaction time and as you showed now kind [19:04] of you can abstract it the power [19:06] function is really just like hey that [19:07] step and [19:08] >> yeah The only thing that might be [19:10] different in the result now is when you [19:12] use rounding that the results on the [19:14] other scale would be rounded and then [19:17] multiplied [19:18] >> which could actually lead [19:20] >> in my opinion to the wrong value [19:22] compared to what really you would want [19:24] kind of like [19:25] >> but that is kind of like important but [19:27] the power function now just tells us hey [19:28] that's step five of our scale and it's [19:30] easy to understand. [19:32] >> Yeah. Yeah. And I think one of the ways [19:35] that I've noticed that performance [19:37] difference in pimpot is for example if [19:40] I'm switching themes because every time [19:43] I'm switching themes it's recalculating [19:46] all of those token values again uh in [19:48] order to get the correct tokens. And so [19:51] this is a lot faster than it was when I [19:54] was doing it the previous way. So it's [19:56] instantly made a difference even when [19:58] you're working at the device point like [20:00] this. Oh, I should show the break [20:02] points. So, we were talking about this. [20:04] So, if I go back to my mocks, basically [20:07] this library is using the same tokens as [20:10] my design mocks, but my library contains [20:12] some demos, apparently some updates as [20:14] well. Oh, it's cuz I changed the color. [20:16] Let's switch that back to there. Uh, [20:18] there we go. And uh, so I've got the [20:22] tokens in both files for now so that I [20:24] could play with them as I was working. [20:27] So if I go to breakpoints, I can switch [20:30] between my tabletbased breakpoint and I [20:34] can switch to my mobile based [20:38] breakpoint. And you might notice for the [20:41] eagle eyes there that not only was the [20:43] width of the board changing, but the [20:46] size of the text was changing subtly as [20:49] well. And so the setup for this is I [20:52] have three different sets uh for each [20:55] break point. I have mobile, tablet and [20:58] desktop. And each of these only have two [21:01] values in them. One is the break point [21:03] size itself which I've set as a [21:05] dimension. So for mobile gone for 360 [21:09] fairly generous mobile device I would [21:11] say. And then the multiplier. So you [21:13] remember the multiplier value that was [21:15] being used in our sizes. So this was [21:19] exactly what Marco was saying earlier [21:20] about when you want to accommodate a [21:23] mobile device slightly differently from [21:25] what you might do on a desktop. The [21:26] multiplier for mobile is 1.1 [21:30] but for tablet when we switch to this [21:31] set it's 1.125. [21:34] And then for desktop it is 1.25. [21:38] And so that accommodates this difference [21:42] when we're switching between our [21:45] different break points, which I think is [21:47] a really cool way of designing [21:49] responsively as well because we can [21:53] actually start thinking in terms of [21:55] break points. We don't need to be so [21:56] fixed in the mindset of designing for [22:00] breakpoints. Like if you think about if [22:01] I was designing each of these components [22:03] separately for each breakpoint, it would [22:04] take forever. [22:06] >> Yeah. But you did a great job there. [22:08] Maybe something we should also outline [22:09] on when you build your architecture is [22:12] you're actually overriding the value of [22:13] multiplier. [22:15] >> So tokens actually follow the the like [22:17] linear resolution path of their files. [22:19] So the further down a set is in the [22:22] tree, it the f like the more it [22:24] overrides, right? So the last one wins. [22:26] That's also important to know when you [22:27] structure your sets kind of like you [22:28] can't just have them randomly ordered [22:30] because if you would have your break [22:32] points now above your multiplayer at the [22:34] end, [22:35] >> you would like it wouldn't affect [22:37] anything. it would always stay with one [22:38] kind of like so it's important how you [22:40] structure your sets that actually the [22:41] override takes effect. [22:44] >> Yeah. Oh, maybe we'll get into that a [22:45] little bit later. Then um just for [22:47] anyone who is curious about how I've [22:49] managed to make this work so that I'm [22:51] switching between break points and my [22:52] design isn't breaking or at least too [22:55] badly. Um the trick to this is starting [22:58] with that fixed breakpoint size and [23:01] applying that to the board. So you can [23:03] see that the breakpoint uh dimension is [23:06] what's applied here. And then setting [23:09] your layout to flex. And usually you [23:11] want to wrap any of the contents in [23:14] there. And so what that means is um if [23:17] there are enough items, they can fill [23:20] multiple rows or multiple columns uh [23:23] depending on the layout. um setting each [23:26] of your objects as well to flex um so [23:29] that their contents can also flex to [23:31] fill and fit the available space. And I [23:35] like to then choose uh make the flex [23:38] element fill the width of its container. [23:40] So that means whatever the break point [23:42] is, it will adapt to fill that space but [23:45] fit the content of the height. So the [23:47] height of the box will fit whatever is [23:50] inside the box. so you don't end up with [23:51] a box that's as wide as it is tall. And [23:55] then if you need to be more precise [23:57] about when you don't want your content [23:58] to get too squished up or too spread [24:01] out, so if you've got lines of text, you [24:03] don't want them to be so long you can't [24:05] read them anymore. And then you can [24:07] start using max width and min width. [24:11] I've actually set these values manually [24:12] in here, but you could use design tokens [24:15] for that, too. it might make sense to [24:17] even put them in the breakpoint if you [24:20] want to start getting into consistently [24:23] using sizing throughout those. I just [24:25] did this a bit quickly. Um, but I think [24:27] generally it's a really good approach to [24:29] responsive design because it makes your [24:32] components as flexible as possible and [24:35] you're only imposing constraints on them [24:37] when they're really needed. Uh like for [24:40] example here I'm using a grid that's not [24:43] quite as flexible but it's necessary for [24:45] this little graph layout. Uh so what [24:50] next? Oh, should we do the text zoom as [24:51] well? Um I'll show you that because [24:53] that's pretty similar. [24:54] >> That's a cool one. Yeah, maybe to that [24:57] like I really love how you build it [24:58] because it's so close to what code [24:59] really is. So the translation to code is [25:02] quite like out of the box and that's [25:05] amazing. Yeah, I think that is a benefit [25:09] of coming from uh development and so [25:12] understanding the medium. But I think [25:13] that you don't need to have know how to [25:15] write CSS in order to know how to design [25:18] like this. You just have to understand [25:21] your medium a little bit and how um [25:23] flexing and grids and things like that [25:25] work. It's really useful knowledge to [25:28] get on board with. In fact, we've got [25:30] loads of tutorials on that uh on the [25:32] penot blog as well if you're interested. [25:34] I've written a lot in there about grids [25:36] and flex and stuff. So, um, the text [25:39] zoom, this was your idea, uh, Marco, [25:42] because [25:42] >> I love it. It actually like it shows off [25:44] so well here. [25:45] >> We wanted to mimic the effect of the [25:47] browser being zoomed. And this is often [25:50] done for accessibility reasons. So, if [25:52] someone's on a phone, they might zoom in [25:54] like doing the pinch kind of gesture um, [25:57] or spread gesture. And if you are uh on [26:00] a browser exactly like I do here [26:02] actually with penmpot when I'm sharing [26:05] my screen I multiply penmpot's interface [26:08] by 125% so you all can read it in a [26:11] video and so we're right like Lara just [26:15] to that right the text zoom is actually [26:17] even an additional setting you can set [26:18] in your browser settings for [26:19] accessibility kind of like the zoom [26:21] works a bit differently the zoom [26:23] actually scales everything [26:25] >> but the text size increases is a bit of [26:27] like a different thing kind of like and [26:28] that's I think something important [26:30] because [26:31] >> I don't see people check for that a lot [26:32] nowadays kind of like [26:34] >> um but people can set their base font [26:37] size their RAM value kind of like do it [26:39] to a different value and that's [26:41] important to to also test and I think [26:43] you actually have like this really nice [26:45] visualization of it [26:47] >> yeah so I I showed you that in my base [26:51] token I have it multiplied by the zoom [26:54] value and that zoom value is stored here [26:57] in these sets that I have for text zoom. [27:01] And so this says 100% so it's one and [27:07] 150 is 1.5 [27:09] and so on. And so let's see how much we [27:12] can break this email layout. So uh if I [27:15] say went to tablet um and let's zoom it [27:19] all the way to 200%. [27:21] So there we go. The text is scaling [27:23] pretty nicely. The layout's scaling [27:24] pretty nicely. It does fall apart a [27:26] little bit when it gets to my grid, but [27:28] that shows me what I can work on and [27:31] what I can fix and make it work better [27:34] in the future. I 200% and I think in the [27:38] web content accessibility guidelines, I [27:40] do think it suggests you ensure that [27:42] your layout is good for zooming to 200% [27:46] without breaking. [27:48] And so 150, that's a little bit better [27:51] there. And I can also switch between my [27:53] different break points to see how it [27:55] affects the different break points too [27:58] and see how that works. I think overall [28:00] I'm quite pleased with that. [28:02] >> I think it actually is really good but [28:03] it's also like it shows off like these [28:05] these failures right that we we often [28:07] don't think about kind of like that [28:08] people might face. Um, and actually like [28:12] if we look at that scaling, right, it's [28:14] a very linear scaling and actually like [28:16] doesn't really represent what users [28:18] really would need kind of like. So what [28:20] we do is when it's when the font size [28:22] scaling is set to 200%. [28:24] >> We suddenly scale everything 200%. [28:26] >> But that might not be what users really [28:29] want because if we have 86 pixel [28:32] headline, we don't need to scale that [28:33] anymore. Kind of like that's big enough. [28:35] We should scale the small 12 pixels to [28:38] 16 pixel fonts, right? These need to get [28:40] bigger, the core needs to get bigger. [28:41] But on the big ones, we actually can [28:43] stay. We just need to ensure that there [28:46] is kind of still a hierarchy, a visual [28:48] hierarchy between the typography. [28:50] >> So [28:51] there is some magic that you can build [28:53] behind it. [28:54] >> It needs some recovery. [28:56] >> But yeah, if we look into deep formulas, [28:59] that's actually really cool because you [29:00] can suddenly allow a scaling that is a [29:03] bit more natural and more pleasing to [29:05] the people without completely breaking [29:07] your UI. Yeah, I'm I think we should set [29:10] ourselves a challenge to do a demo for [29:12] that at some point. I think it would be [29:14] really fun and it would be really cool [29:16] to be able to apply that to something [29:18] that we've built so that it it works [29:21] that well. I think that's a nice thing [29:23] to be able to aspire towards. Oh, uh, [29:26] while I'm at it, I just thought I'd give [29:27] you all a little preview of what is [29:29] coming up in the next release because it [29:32] is a very tokens focused release. So, if [29:35] I jump into uh here, excuse the white. [29:39] I've switched it to light mode so I [29:41] don't get muddled up between the early [29:43] release and not uh but one of the things [29:45] that um you'll notice in this new [29:47] release is that tokens are now uh [29:50] grouped. So, not sets, I'm talking about [29:53] the tokens themselves. And these are now [29:55] split. So, you see these are my scales. [29:58] This the same token set I had before. [30:00] So, this is my scale dot excss. And any [30:03] token that is dot separated like this [30:06] will then be split into a hierarchy [30:08] according to the dots. So this is really [30:11] useful if you're say working with quite [30:14] a lot of tokens in a set like a color [30:17] token and you want to make sure that [30:19] you're applying the correct token. And [30:21] so you can see that this is broken down [30:24] say my default icon token into this uh [30:29] so the name of it would be color icon [30:31] default. So, it's the default inside the [30:33] icon folder, inside the color uh folder. [30:37] So, that's a really just makes it easier [30:39] to navigate your tokens. It doesn't [30:41] change how anything behaves. It just [30:42] makes it easier for you to navigate. And [30:45] another really cool thing that we have [30:47] is remapping when you rename. So, if I [30:50] go to, I don't know, let's go something [30:53] that I use loads, one of the scale [30:55] tokens, 3xs. If I decided I wanted to [30:59] rename this for whatever reason to uh [31:03] instead of 3xs x xxxs [31:07] and I go to save. Previously if I did [31:10] that it would be it wouldn't it would [31:13] warn me that if I change the name of the [31:15] token it would break all its references. [31:17] Now it gives me the option to remap [31:20] those tokens. So, it will update all of [31:23] the references and all of the objects [31:25] that are using that token so that they [31:27] are using the new token name. So, it [31:30] could take a while. I'm not going to do [31:31] that right now, but that's just to give [31:34] you an idea of what's coming up in the [31:37] next release. Um, I don't know. What do [31:40] you think about the sca the names of my [31:42] scale? Because I noticed that in some of [31:44] the examples you've shown, the t-shirt [31:47] sizes, doing the [31:49] 3XS or the 3XL and those sizes, it's not [31:54] for everyone, is it? [31:55] >> No, it's definitely not for everybody, [31:57] but I I I think it works really well [32:00] scoped on a specific typography. So, [32:03] >> for example, um what I love to do is [32:06] break typography down into different um [32:09] groups like headlines. display fonts, [32:13] body code, kind of like these things. [32:16] Um, maybe one additional information, [32:18] never name your tokens semantically, H1, [32:22] H2, or headline one, two, three. [32:24] >> Mhm. [32:25] >> Because even with the most experienced [32:28] developers, kind of like I've seen this, [32:30] they suddenly start using an H1 tag in [32:32] code because you used an H1 style. So, [32:34] you're mixing semantic meaning with [32:36] visual appearance. And we always have [32:38] this, right? we have an an H2 [32:40] semantically that is visually an H1 kind [32:43] of like [32:44] >> and like so we we actually need to [32:46] abstract into a naming format that is [32:49] loosened up from the semantic meaning [32:50] kind of like [32:51] >> and that's really important kind of like [32:54] >> um what I normally do is kind of like I [32:56] have a factorization scale of my [32:57] topography so recently I tend to write [33:01] it up kind of like 1 2 3 4 5 and down 1 [33:04] 3 4 5 [33:06] >> Before I was using F with f minus and f [33:09] without a minus. But actually I got some [33:12] really good feedback that this is not [33:14] really cool because suddenly you have [33:15] semantic grouping in there because a [33:18] >> dash is actually a separator in CSS. So [33:22] you don't know what it actually means [33:23] and introducing [33:25] sub values is not really easy to do kind [33:28] of like I use this scale kind of the up [33:30] and down scale as the core and then I [33:32] reference them in my t-shirt sizes which [33:34] are more semantically grouped. [33:37] Oh, that's good. So, I I should ditch [33:39] these heading level one, two, three, [33:41] four, five, and six. And uh yeah, make [33:44] them something that is more of a an [33:48] actual scale and then we can use those [33:50] accordingly. That makes sense. [33:52] >> Yeah. I mean, you already have display, [33:54] right? You have display code, you have [33:56] good groups kind of like, [33:57] >> but what is the the differentiation [33:59] between a display font and a heading? [34:01] And do we really need six levels of [34:03] heading? Mhm. [34:04] >> Because semantically we sometimes have [34:06] headlines which are more page separators [34:09] and then we have titles which are more [34:10] like on a card on you know on an object [34:13] kind of like um that we use there kind [34:15] of like and I think that's good. And [34:17] then you can actually use t-shirt sizes [34:18] where the default title is medium and [34:20] then you have a large and a small one. [34:22] >> Yeah, I like that. [34:24] >> Yeah. Someone once said to me they they [34:25] thought I shouldn't use t-shirt sizes [34:27] because um it means that you can't [34:30] insert any half sizes or anything in [34:32] there in between them. But I was like [34:34] that's surely the point the point of [34:36] creating a hierarchal scale is that you [34:39] don't insert random numbers in between. [34:42] >> Exactly. Um so the moment you actually [34:45] have like for example I've seen this a [34:47] lot where tokens are suddenly having a [34:50] name like 16 for 16 pixels [34:53] >> there is absolutely zero use for that [34:55] token. [34:55] >> Yeah. [34:56] >> Because you don't abstract a hard value [34:58] to a semantic meaning. And the moment [35:00] you add a break point for example 16 is [35:01] not 16. Maybe 16 is 19 20. [35:04] >> So like never use a pixel value or RAM [35:07] value or something as the identifier if [35:09] you're not able to scale it. Um yeah, [35:11] when you use RAM for example, I love to [35:13] go with a 100 scale. [35:15] >> So one RAM is 100%. [35:17] >> And then you go [35:19] >> 1.5 RAM is 150 because then you actually [35:22] abstracted it into a layer and it [35:24] doesn't need to always stay at that RAM [35:25] value, but you have your mental model of [35:27] like hey on mobile that actually is the [35:29] scale. It might be different on a [35:30] different platform, but like the scaling [35:32] behavior is still a percentage based [35:34] scaling behavior. [35:35] >> Yeah, I think if you're someone that's [35:37] used to working in rims already and you [35:39] can kind of visualize what that REM size [35:41] is, that's really helpful, too. I think [35:42] that is [35:43] >> a part of using things in that way. Um, [35:46] right, I'm conscious of time because we [35:47] got so many cool other things to show. [35:49] So, uh, why don't we move on to talking [35:53] about practical design token color [35:55] palettes? [35:57] >> Awesome. [36:06] Now, one thing that I realized that I [36:08] hadn't actually shown anyone in a [36:10] previous hands-on, and I was like, I [36:11] better squeeze this into the color [36:13] section here, is that you can now apply [36:17] tokens um for colors using the design [36:20] panel. So, say I've got this little [36:22] button here, and maybe I want to add a [36:25] new fill color to it. If I go to the [36:27] color picker, I have this little icon [36:30] for tokens. And if I click it, I have [36:33] all of my tokens here. And what's really [36:36] handy is that I can filter them um [36:39] through search. So I can put in button [36:41] and then I can find the right button [36:43] token that I want to choose. This also [36:46] works if I select this button and then [36:51] it's showing me the token that's applied [36:53] to the button as a fill. Right now I can [36:55] open the tokens list from the token icon [36:58] and choose from there. So I it only is [37:02] showing me color tokens which is the [37:04] only thing I can apply to a fill. So I [37:06] think that's just really handy. Now I [37:10] wanted to this is some real deep nerdy [37:12] that I got into. So buckle up. Let me [37:16] get into the system library. [37:19] So I always click my token set. I should [37:23] start naming my pages something [37:25] different from my token sets to prevent [37:27] me getting confused. Okay, I've got some [37:29] color palettes in here. Great. And this [37:35] I've got a little reference for my hues. [37:36] This is just to show me what all of [37:38] these different palettes are, but um [37:42] I've got these colors um that I've [37:45] generated this these palettes from. So, [37:49] let's open up. We'll do like we did [37:51] before. Oh, I'm going to break down a [37:52] more exciting blue. There we go. Not one [37:55] that's white. So, I'm using functions [37:57] again. Um, actually, am I using No, I'm [38:01] using references. I'm not using [38:02] functions at all. It looks like a [38:04] function because it's uh using the color [38:08] space of hue, saturation, lightness, and [38:13] alpha. Uh, so HSL or HSL [38:17] A. And so what uh if you look inside the [38:21] color picker [38:24] and [38:25] you can see from if I go to the tab [38:29] there we go. Uh this is calling HSV but [38:32] value and lightness they're the same [38:34] thing. And so this is breaking down my [38:36] colors into the hue channel, the [38:38] saturation channel and the value or the [38:41] lightness channel and also the alpha [38:43] channel. Uh how much opacity it is. And [38:46] I'm generating all of these values [38:49] separately and pulling them together [38:51] into the design token. And we thought [38:55] this might be a good opportunity for [38:57] Marco because he has a much uh bigger [38:59] brain than me and understands these [39:01] things really well to explain a little [39:03] bit more about these different color [39:05] spaces that we might be using. Uh, so [39:07] HSL, uh, I guess RGB, um, OKLCH, uh, is [39:12] a pretty hot one of late. Uh, so yeah, [39:17] what's what should folks know about [39:19] these color spaces and the differences [39:21] between them? [39:22] >> So I think like one of the the [39:24] interesting pieces about color spaces is [39:25] you always need to think about it as a [39:27] threedimensional model. And let me show [39:29] there's like an amazing page that [39:30] actually like visualizes that and it's [39:32] called Hublot. [39:34] And if you look at sRGB, right, the the [39:36] one that most of us work with kind of [39:38] like it actually is a cube and it's the [39:40] one that [39:42] you have such a hard time to [39:43] understanding, right? And the hex value [39:45] is just an sRGB representation in hex, [39:48] it's nothing else. But how do you make [39:50] up a mixture of red and blue and like [39:52] yeah, okay, it's in the middle, but like [39:53] if it moves to the center of the cube [39:55] kind of like where is it? And in reality [39:57] like the three layers you just showed in [39:59] HSV or L kind of like they are just [40:02] coordinates in X Y and set on a [40:05] threedimensional space. So if we [40:07] actually move over to HSV it's a [40:09] cylindrical format. So it's a lot easier [40:11] to understand kind of like um it's [40:13] really cool. So if we actually go to the [40:15] grid view you can see right it's this [40:18] three dimensional model we're moving in. [40:19] So, we're moving in the rotation for the [40:22] hue kind of like and we're moving up and [40:24] down for um the lightness. So, on the [40:27] bottom there's a black. Let me make it [40:29] again. On the bottom it's black. On the [40:31] top it's white. And if we move out we [40:34] actually saturate saturated. You [40:36] mentioned okay uh LCH. Um why it's so [40:39] famous at the moment is because you get [40:41] a quite nice gradient output and a [40:45] really balanced um scale kind of from [40:47] it. [40:48] >> Yeah. But it's actually very tricky to [40:50] work with if you don't understand how it [40:51] looks like or what the limitations are [40:54] because OKCH is actually not a uniform [40:56] color space. It looks like this has [40:58] >> an ice cream. [41:01] >> So if you don't understand the [41:02] limitations of hey there's actually a [41:04] pretty steep peak here in green and blue [41:06] and pink and red but like oh damn what [41:09] is that valley here right? Like you're [41:10] not getting somewhere that you want and [41:12] like you can see that cut off here like [41:14] that is not fun. [41:17] So, if you're trying to generate [41:19] palettes where you every every time you [41:22] switch your hue or your color, you want [41:25] your blue and your red values to be kind [41:27] of the same level of darkness and [41:30] saturation. And that's the premise of [41:33] OKCH, unless you get caught up on one of [41:36] these cliffs. [41:37] >> Yeah. So, what happens, right, if you [41:39] like it goes actually up to 0.37 kind of [41:42] 37% of the full height. But if we set [41:45] the saturation to 0.7 37, it will just [41:48] clip it and go here. [41:49] >> In some other tools, it actually like [41:51] finds a different line. So there's [41:52] actually like some different [41:54] implementations of how it actually [41:55] works. So that's something you need to [41:57] really watch out with. [41:58] >> But if you have two colors in a [42:00] different hue and the same saturation [42:01] kind of like and lightness, they [42:03] actually look really uniform kind of [42:05] like next to each other. That's the [42:07] really nice thing. [42:09] >> And you just showed off that you [42:11] actually do math in the different [42:12] channels, right? [42:13] >> Yes. And maybe to explain this shortly [42:15] before we go into that in depth kind of [42:17] like just want to open up Poland here um [42:20] by David and and that is also like um it [42:23] just shows us kind of like a we're [42:25] building a gradient of colors a pallet [42:28] whatever you want to call it right [42:29] >> um and the cool thing is if we scroll [42:31] down he actually explains a lot of [42:33] things here of how things move kind of [42:35] like so it's an amazing page if you want [42:37] to learn more [42:39] >> but what he does here is kind of like it [42:40] defines what that curve actually looks [42:42] like Unfortunately, it's not a 3D [42:43] representation, but what we define is [42:45] kind of like we define an curve or like [42:48] not a curve. So, we can actually go to [42:49] linear [42:50] >> and linear and suddenly we have a [42:52] straight line. [42:53] >> But what we can do with sinus or quadric [42:57] or arc positions, we can actually bend [43:00] that curve how it moves through this 3D [43:02] space. And then what we do is we sample [43:04] points on that curve. So, if I move that [43:07] over here to the green, suddenly I'm [43:09] sampling a curve here in that. And let's [43:11] say we actually go with cubic to make it [43:13] a bit more round kind of like or go [43:15] there or let's go with sinus curve then [43:18] it goes like upwards asinus. This one's [43:21] the right one. Um so you can really [43:23] easily like change how that works. Um if [43:25] I change the saturation curve [43:27] unfortunately it doesn't have like an [43:29] impact because we are limited in that [43:31] space. [43:32] That is but that is that might be a good [43:35] use case for it is for example one of [43:38] the things I like to do is as I go into [43:39] the darker colors in a scale I do like [43:42] to bump up the saturation and maybe make [43:45] the hue slightly warmer. So that's where [43:48] these kind of curves can be really [43:49] valuable in creating much more nuanced [43:51] pallets as well. [43:53] >> Yeah, exactly. But at the end you are [43:56] doing something very similar right on [43:58] each channel of [43:59] >> Yeah. Let me show you how I've made up [44:02] these this different token. So, I have a [44:06] blue hue and what that's made up of, [44:10] it's actually a number and that's just a [44:13] random number between. So, if we're [44:15] looking at HSL, it's a number between uh [44:18] 0 and 360. It's that full circle. And [44:22] I've actually put made myself a little [44:23] reference here so that I could remember [44:25] what Q roughly maps to which value. And [44:28] so I'm using 203 there. And then I have [44:34] say in the saturation. So I have a [44:37] different saturation point for whether I [44:39] want a default palette or a color [44:42] palette because obviously these are very [44:44] saturated colors. These very desaturated [44:46] colors. And so that again is just a [44:49] value. And so so the default one oh [44:54] references desaturated. There we go. So [44:56] that's just five. And if I wanted to go [45:00] for the colored one, which references [45:02] the bright token, there we go. I need [45:06] grouping. And that's 80. So the [45:08] difference between 180 is pretty big in [45:11] there. And so I've used that to generate [45:15] all of these palettes because they're [45:18] just made up of combining. If I go to a [45:21] different color, say the green, the hue [45:23] for green, but it keeps the same [45:26] saturation level as the other palettes. [45:28] It keeps the same the lightness gets [45:30] stepped depending on which swatch we [45:32] are. And I have kept in there the option [45:35] to add an alpha channel even though I [45:38] I'm not using it currently in here. And [45:42] what that does enable is a very cool [45:46] little demo that I made. uh it's a [45:48] little bit hacky, but a random color [45:51] generator. And so if I switch between uh [45:55] these little options here, it generates [45:57] a completely random hue and pallet based [46:01] on that. And how I'm doing that is doing [46:05] exactly that same thing of creating [46:06] these stepped values, but I'm using [46:10] again a function. [46:13] And that's the random function. So, I'm [46:15] just saying pick me a random number [46:17] between uh 1 and 255. It actually should [46:20] be 360 [46:22] thinking about it. And then round that [46:25] to a whole number. Uh although I think [46:27] it could cope regardless. [46:30] So, that's just a silly little uh just [46:32] because I could situation. [46:36] >> Yeah. But like what I love here is [46:37] actually like if you build a white label [46:39] solution, that's exactly what you need [46:41] to validate against, right? you need [46:43] randomization like in the colors and so [46:45] that's like it's really awesome why you [46:47] always need to switch the modes is kind [46:48] of like because they resolve once right [46:50] and that's when you resolve again it [46:52] creates another random number so it's [46:54] nice to also understand hey why do I [46:55] actually like do this switch [46:57] >> yes [46:57] >> and the cool thing is this could be done [46:58] on any front end right you could [47:00] actually have a slider just to move that [47:01] because your token architecture actually [47:03] allows for this full switch because you [47:04] have built it correctly so this could be [47:06] run on any front end or you can build a [47:08] scene builder with it [47:09] >> and you've totally set me up to to show [47:13] you how I've done this here. So, uh, let [47:15] me close these up so I got a bit more [47:17] room. So, I've created I've added these [47:20] different palettes and scales that I've [47:21] got in here. And what I've done is I've [47:24] used them for my different brands and my [47:26] light mode and my dark mode. And so I [47:30] can switch between dark mode and light [47:32] mode. And this changes the value of the [47:35] token picking the different palette [47:37] colors for each value. So if I look at [47:40] this, say button primary background [47:42] default in light mode it references [47:45] primary uh 600 but in dark mode it [47:49] references oh 600 as well. That was a [47:52] bad example. The buttons are the same [47:53] color in light mode and dark mode. But [47:55] also if I wanted to switch between my [47:57] brands. So I want to switch to this Eco [48:00] Tools. It's a green brand. If I want to [48:03] switch between Neon Books, it's this [48:05] purple and pink. And the only difference [48:08] between those brands in these different [48:11] sections is that they've got a hu [48:15] default value set, a hue primary and [48:17] secondary. So that's the default palette [48:19] here, the primary here, secondary here, [48:22] some different font families as you [48:24] might have noticed, uh, and the [48:26] potential for a different stroke width. [48:28] I don't know why I would do that, but I [48:30] added the option in there. And that's [48:33] between these different brands. All [48:34] that's changing is these values, but all [48:37] of the rest of the tokens are remaining [48:40] exactly the same. [48:43] So, while we're on the topic of [48:45] branding, why don't we jump to our final [48:48] section on token structure and [48:52] performance? [49:02] Now, the reason I've jumped to this [49:04] section now is because when I was [49:07] showing Marco this demo before and you [49:10] said, Marco, hey, maybe you don't need [49:12] to have the brands separate. How would [49:15] you structure your tokens more [49:19] effectively than I've done here? [49:21] I think one thing like actually like I [49:23] complimented you first of all for your [49:25] architecture [49:26] start. [49:27] >> I'm making it sound like you were being [49:28] mean to me. You weren't. You were [49:29] helping me learn constructive systemism [49:32] is how we grow [49:33] >> because you actually have a quite well [49:35] structured system which a lot of people [49:37] actually then start in reality to to [49:39] kind of like run into walls when there [49:40] is like brands coming in. Hey, we [49:42] actually want that one component to look [49:44] a bit different than everything else in [49:45] the system. [49:46] >> And that's always the challenge. What I [49:48] outlined is kind of like you currently [49:49] have a foundation layer and then you [49:51] have a brand layer but what is actually [49:54] the shared foundation on a system like [49:56] that a multibrand system that needs to [49:58] live extracted from a brand. So what are [50:00] these values that need to live in a [50:02] foundation that don't belong to the [50:04] brand? So do we need that separation of [50:06] brand and foundation or can actually be [50:09] the one mother brand let's say like this [50:12] and then we just have overrides in the [50:14] other brands kind of like [50:16] >> and that would would maybe like already [50:18] take a bit out the complexity [50:20] unfortunately we have trained ourselves [50:22] into a three layer architecture of [50:24] foundation semant semantic and component [50:27] >> the reality is today we have seming [50:29] available and multi-dimensional seeming [50:31] right so this architecture doesn't hold [50:33] up anymore because what we really want [50:36] is a separation of concerns. We want one [50:39] layer to choose our brand. We want one [50:41] for our color mode, one for our [50:42] breakpoint and then at the end we want [50:44] one clean semantic layer for consumption [50:47] and everything before [50:49] >> we want to own as a design system [50:50] maintainers [50:52] >> that we actually can do changes how we [50:53] want. If we need to introduce a new [50:55] breakpoint, it shouldn't be a breaking [50:56] change for the users. should actually be [50:58] just like easy roll out and that's what [51:02] you already did very well but now [51:05] reality is always a bit challenging when [51:06] it comes to that because reality is not [51:08] the white label perfect system that we [51:11] are looking at here [51:12] >> similar like I mean the easiest piece [51:15] here is really like hey your color your [51:17] button on the top right right in one [51:19] brand it might be a dark navy [51:21] >> in the other one it might be a like [51:23] vibrant yellow [51:25] >> so a lot challenges that actually come [51:28] with that. And that's where kind of like [51:31] the algorithmic approach we looked at [51:33] today really comes in handy. What if we [51:36] have a function that lets me dynamically [51:38] choose the contrasting text color on top [51:40] of that background? Suddenly, I'm [51:42] reducing my token amount by at least 10 [51:45] to 20%. Just by removing that kind of [51:49] like specific token for each decision. [51:52] >> Yeah. [51:53] >> Yeah. How would you suggest that [51:54] designers and developers like because [51:57] that's really a collaborative effort [51:59] isn't it creating these like doing [52:01] design in this way like if you're coming [52:03] up with algorithmic curves you're [52:06] working out what can be automated [52:11] >> I don't know immediately if it's a [52:12] collaboration kind of like it's helpful [52:15] because developers tend to think more on [52:17] algorithms than designers designers are [52:19] like sometimes oh damn it's math I'm [52:21] going going to run um don't do [52:23] Yeah, [52:24] >> the important piece is you actually need [52:25] to understand and explain what you want [52:28] to achieve [52:29] >> because then you normally can put it [52:30] into something that is repeatable and [52:32] makes your decision tree kind of [52:33] reworkable. [52:35] >> You actually like it's not there but [52:37] like like we will share this soon kind [52:39] of like right there will be more [52:41] functions and there will be more complex [52:42] functions. There will be functions that [52:44] really help you do things kind of like [52:45] you just showed off the the minimal math [52:47] functions. Yeah, [52:49] >> but there's a ton more that we can use [52:51] algorithmically on the tokens kind of [52:52] like to really get super structured [52:56] output. And the cool thing is everything [52:58] works natively in penput. [53:00] >> Yeah. [53:00] >> So you can use these functions natively [53:03] and you don't need to build architecture [53:07] around kind of like decisions that can't [53:09] be done. [53:10] >> Yeah. Yeah. [53:10] >> And in code it just flattens down or we [53:12] can actually like even transpile it into [53:14] the right format [53:16] >> because what you showed off in math like [53:18] in your token that is a onetoone [53:21] translation into CSS and it just works. [53:23] >> Yeah. [53:24] >> Yeah. [53:24] >> So that's the cool things. These [53:26] functions suddenly reduce the package [53:28] size the complexity of our system and [53:31] they make it more maintainable and [53:32] easier to understand [53:34] >> down the road. [53:34] >> Yeah. And you can and [53:38] >> while these functions might seem quite [53:39] intimidating at first, what I did was I [53:42] went and looked some up and then I just [53:44] played with what penot [53:50] is you can play with it and see what [53:52] works and see what doesn't and instantly [53:55] get that visual feedback that you can't [53:56] necessarily get so easily if you're [53:58] having to learn how to write it in code [54:00] first as well. Uh, not that I'm scared [54:02] of code, but I think a lot of people [54:04] it's it is intimidating. You don't want [54:06] to have to necessarily learn someone [54:08] else's skill set in order to be able to [54:10] play with these things. Now, I'm [54:12] conscious of time, so should we jump [54:14] into the Q&A? You got something else you [54:15] want to say, Marco? [54:17] >> Yeah, [54:17] >> let's do it. [54:18] >> Great. Do we have any questions, folks? [54:26] >> Right. Oh, uh, hang on. I need to sort [54:28] out my interface so I actually see what [54:29] I'm reading. There we go. Is there a [54:32] best practice for naming tokens so it's [54:35] clear which ones are source/base tokens [54:38] and which ones are semantic/alias [54:41] tokens? I'll ask you that one, Marco, [54:43] because you've got an insight into a lot [54:44] of different customers setups as well. [54:48] >> That's true. Um, so scoping by name is [54:51] the first thing, right? kind of like add [54:53] the starting segment foundation color [54:56] dot something kind of like [54:58] >> um what I tend to do is I only scope [55:01] everything outside of semantic. The [55:03] semantic layer is something that I [55:05] actually consume. I want them short. I [55:07] want them recognizable. A semantic token [55:10] will not start with foundation. It will [55:11] not start with kind of like color mode. [55:13] It will not start with brand at the [55:14] beginning kind of like they will be [55:16] clean kind of tokens. So I try to make [55:18] it easier for the consumption because if [55:20] somebody always needs to write semantic [55:21] something in code they're getting [55:23] annoyed because you need to write that [55:25] long string or even if it's just s or s [55:27] or something you don't need it because [55:29] the consuming layer is exported [55:32] everything above nobody touches by hand [55:34] so we can make them a bit longer we [55:36] maintain them yes okay we have some more [55:38] work [55:39] >> but it's also really cool when you link [55:40] tokens the auto suggestion I immediately [55:43] like hey I actually need a token from my [55:45] color mode so I write color mode and it [55:47] just already scopes it down to what I [55:49] want. So I think that's kind of like [55:50] what I normally suggest is every [55:54] differentiation of a tier, right? Not [55:57] it's always tricky with using dimension. [56:00] Every tier you have brand, breakpoint, [56:03] color mode, density, I name them at the [56:07] beginning with a prefix and the semantic [56:09] I don't name. Components also have a [56:12] starting slug. [56:13] >> Great. Um, do we have any other [56:16] questions? [56:18] Oh, I can see here in the chat. [56:22] Where's the best place to go for seeing [56:24] the latest updates from Token Studio? [56:26] There was some really cool stuff they [56:27] demoed at Penotfest. Excited to see new [56:30] things roll out. [56:32] >> I would say one to two weeks in the [56:34] future maybe or like three. I think [56:36] that's a good point to go. Uh, we have [56:39] something really cool cooking up kind of [56:40] like we're preparing a lot of stuff. [56:42] there is really like some nice stuff [56:43] coming kind of like that that shows off [56:44] a lot more what we talked about today. [56:46] So I think that was a bit of the teaser [56:48] of what really kind of like will be [56:50] there down down the road kind of like. [56:52] So yeah. [56:53] >> Nice. Um is there any reference for all [56:56] the calculations that we can do? Uh is [56:59] that same as CSS? Is it going further [57:01] than that? To my knowledge it's not [57:04] exactly the same as CSS. I think it's [57:06] actually some JavaScript uh expressions. [57:10] I think um [57:12] >> there there's a lot of custom functions [57:14] kind of like and there will be more [57:15] coming. It's not yet documented [57:16] officially, but once that's released [57:18] kind of like you will have a quite nice [57:20] list of things you can work with. [57:22] >> I know that the PMPOT team is keen to [57:25] have everything really well documented. [57:27] So, I'm sure that will be there very [57:29] soon. And trust me, when it's there, I [57:31] will be shouting about it. So, we'll all [57:33] be able to mess around with functions [57:36] loads. Right. Well, I guess we're pretty [57:40] much up for time. So, is there anything [57:41] else that you wanted to share, Marco, [57:44] before we leave? [57:46] >> Um, well, we already said, right, like [57:47] there's something really cool cooking. [57:49] Um, we have been [57:51] >> not too loud about stuff kind of like we [57:54] have been heads down working like crazy, [57:56] but yeah, like there's something really [57:58] cool coming. I don't want to spoil too [57:59] much. Um, but we there Yeah, you will be [58:02] excited. [58:03] >> Let's go like that. [58:04] >> Yeah, there's so much potential that we [58:07] have with tokens. So remember folks to [58:10] follow and subscribe to be the first to [58:12] find out about our future hands-on [58:14] demos. We're already planning our next [58:16] one. Or join the penot community as [58:19] well. That's a great place to find out [58:20] about everything penot first. And [58:22] remember if you want to join the beta [58:25] testing team for the penmp mcp server. [58:28] Follow the link in the chat. It will [58:29] also be in the description for this [58:31] video if you're watching back later. [58:33] Thank you Marco for joining me. This was [58:35] really fun. Um, this was as good as [58:38] nerding out over drinks after Penamp [58:40] Fest about all things tokens and design [58:43] systems. [58:44] >> We also need that. [58:46] >> Yeah. And thank you to everyone who [58:48] joined us live. It's been so lovely to [58:50] actually see you in the chat this week [58:52] now that I can get it up on my screen [58:53] and it's on your screens, too. So, I'm [58:57] excited to see what we can do with this [58:59] in the future. And thank you so much, [59:01] everyone, for joining us. We will see [59:02] you again very soon. Goodbye. [59:04] >> Thank you for having me. Bye-bye.