Intro to typography design tokens Penpot Hands-on Demo

Intro to typography design tokens | Penpot Hands-on Demo 🔗 **Source:** [Intro to typography design tokens | Penpot Hands-on Demo](https://www.youtube.com/watch?v=TTPfc9zFN5k) > [!note]+ Document Notes > tags: [design-tokens, typography, penpot, ui-design] > author: Laura > source: Penpot > reference: https://www.youtube.com/watch?v=TTPfc9zFN5k > date created: 2024-12-19 14:30 > > # 🏷️ Title: Intro to typography design tokens | Penpot Hands-on Demo >  ## 🧰 Action Inbox - [H1] Download design tokens starter kit from Penpot Hub — updated version with typography and shadow tokens #penpot - [H2] Try proportional typographic scales using mathematical relationships — use base × scale calculations #typography - [H3] Create semantic typography tokens for specific use cases — buttons, headings, labels #design-system ## 🧭 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 Hub Libraries and Templates](https://penpot.app/libraries-templates) - [Penpot User Guide](https://help.penpot.app) ## 📝 Summary - Laura demonstrates typography design tokens in Penpot, covering foundational tokens, composite tokens, and proportional scales - Shows how design tokens create consistency, shared language, and maintainability across design systems - Covers practical implementation including font families, weights, sizes, and semantic naming conventions - Introduces shadow tokens as bonus composite token type with similar principles - Emphasizes W3C design token standard compatibility for cross-platform use ## 📖 Main Content Design tokens in Penpot store reusable values with names, enabling consistent design systems. Typography tokens are composite tokens combining multiple properties (font family, size, weight, line height) into single reusable units. The video demonstrates creating foundational tokens (generic values like font-size.small) and semantic tokens (purpose-driven like text.default). Proportional typographic scales use mathematical relationships between font sizes for visual harmony. Penpot uses W3C design token standards, making tokens portable across platforms. The approach balances systematic consistency with practical flexibility, avoiding over-engineering while maintaining design coherence. ## 🗒️ Notes #### ⏱️ [00:00](https://youtu.be/TTPfc9zFN5k?t=0) — [H1] Introduction to Penpot and design tokens - Key idea: Penpot is open-source design platform for designers and developers - Evidence: "Design tokens are a way to store reusable values for your designs" #### ⏱️ [03:25](https://youtu.be/TTPfc9zFN5k?t=205) — [H2] Basic design token structure - Key idea: Each design token has a name and value, like color.black with hex value - Evidence: "So it's really as simple as that. And so for here you can see I've got color.black" #### ⏱️ [06:45](https://youtu.be/TTPfc9zFN5k?t=405) — [H3] Design tokens create shared language - Key idea: Named tokens enable teams to communicate consistently about design values - Evidence: "They create a shared language between all of the designers using the same tokens" #### ⏱️ [08:30](https://youtu.be/TTPfc9zFN5k?t=510) — [H2] W3C design token standard compatibility - Key idea: Penpot uses W3C standard JSON format for cross-platform compatibility - Evidence: "Penpot uses the native design tokens, the W3C design tokens community group standard" #### ⏱️ [11:20](https://youtu.be/TTPfc9zFN5k?t=680) — [H2] Token theming capabilities - Key idea: Multiple token sets enable light/dark modes and theme variations - Evidence: "You can turn them on and off using themes... I can change between vibrant and muted themes" #### ⏱️ [14:15](https://youtu.be/TTPfc9zFN5k?t=855) — [H1] Typography token types overview - Key idea: Typography tokens include font size, family, weight, letter spacing, case, decoration - Evidence: "Font weight is similar except... whether your font is bold or light... also whether your font is italic" #### ⏱️ [18:40](https://youtu.be/TTPfc9zFN5k?t=1120) — [H1] Typography composite tokens introduction - Key idea: Composite tokens combine multiple design token types into single reusable unit - Evidence: "Typography token is a special one... it is a composite token made up of other design tokens" #### ⏱️ [20:50](https://youtu.be/TTPfc9zFN5k?t=1250) — [H2] Token referencing system - Key idea: Tokens can reference other tokens using curly braces for maintainability - Evidence: "I can reference it by putting it in curly quotes and say font weight 600" #### ⏱️ [23:10](https://youtu.be/TTPfc9zFN5k?t=1390) — [H2] Foundational vs semantic tokens - Key idea: Foundation tokens are generic values, semantic tokens are purpose-driven - Evidence: "Semantic token is named for the purpose of the token... what is this token actually for" #### ⏱️ [26:30](https://youtu.be/TTPfc9zFN5k?t=1590) — [H2] Creating typography composite tokens - Key idea: Combine font family, size, weight, line height into single typography token - Evidence: "Typography tokens are really about how you're using the token during your design process" #### ⏱️ [33:45](https://youtu.be/TTPfc9zFN5k?t=2025) — [H3] Avoiding over-engineering tokens - Key idea: Don't create foundational tokens for unique values used only once - Evidence: "Not overusing design tokens when you don't need them... this title is completely unique" #### ⏱️ [37:20](https://youtu.be/TTPfc9zFN5k?t=2240) — [H1] Proportional typographic scales - Key idea: Mathematical relationships between font sizes create visual harmony - Evidence: "Proportional typographic scale... making those values mathematically related to each other" #### ⏱️ [42:15](https://youtu.be/TTPfc9zFN5k?t=2535) — [H2] Scale calculation methodology - Key idea: Use base size multiplied by scale factor for each level in hierarchy - Evidence: "For each value I am multiplying the next lower down font size in the hierarchy" #### ⏱️ [46:30](https://youtu.be/TTPfc9zFN5k?t=2790) — [H1] Shadow tokens introduction - Key idea: Shadow tokens are composite tokens for drop shadow and inner shadow effects - Evidence: "Shadow design tokens... composite token... has all of these different values that are made up to create a shadow" #### ⏱️ [52:10](https://youtu.be/TTPfc9zFN5k?t=3130) — [H2] Consistent light source principle - Key idea: Shadows should have consistent direction to mimic single light source - Evidence: "You probably usually have one light source... you want that to be consistent across all of your design" ## 📚 References - [Penpot Design Tokens Starter Kit](https://penpot.app/libraries-templates) - [Penpot User Guide](https://help.penpot.app) - [Penpot Community](https://community.penpot.app) - [W3C Design Tokens Community Group](https://www.w3.org/community/design-tokens/) ## 🗣️ Paraphrase - Design tokens store reusable design values with meaningful names, enabling consistency and maintainability across design systems while creating shared vocabulary for design teams - Typography composite tokens combine multiple font properties (family, size, weight, line height) into single reusable units that reflect how designers actually think about typography holistically - Proportional typographic scales use mathematical relationships between font sizes to create visual harmony, typically using a base size multiplied by a consistent scale factor for each hierarchy level ## 📰 Newsletter Laura from Penpot demonstrates the power of typography design tokens in this hands-on session. Learn how composite tokens combine font properties into reusable units, discover proportional typographic scales for visual harmony, and explore the new shadow tokens feature. The updated design tokens starter kit now includes typography and shadow examples, all following W3C standards for cross-platform compatibility. Key takeaways: Create foundational tokens for generic values, semantic tokens for specific purposes, and avoid over-engineering by not tokenizing unique values. Typography tokens reflect how designers actually work - considering font family, size, weight, and line height together rather than separately. Resources: [Penpot Hub](https://penpot.app/libraries-templates), [User Guide](https://help.penpot.app), [Community](https://community.penpot.app) ## ✅ Action Items #### DevRel - Developer advocacy: Create tutorials showing design token integration with code workflows - Education: Develop workshops on design system token architecture patterns - Developer experience: Document token export formats and development handoff processes - Developer marketing: Showcase W3C standard compatibility and cross-platform workflows - Community management: Support design token discussions and feature requests #### WordPress - Design: Integrate design token concepts into WordPress design system documentation - Documentation: Create guides for design token usage in theme development - Community: Share design token best practices at WordCamp design track sessions ## 🧪 Hypotheses - Teams using semantic token naming will have better design system adoption rates than those using only foundational tokens - Proportional typographic scales will reduce design decision time while improving visual consistency - Composite tokens will decrease token management overhead compared to individual property tokens - W3C standard compliance will increase design-to-development workflow efficiency ### 📊 Methodology - Survey design teams on token naming conventions and adoption rates - A/B test proportional vs arbitrary font size scales for design speed - Measure token count and maintenance overhead across different architectures ### ❓ Questions - How do proportional scales perform across different font families and use cases? - What's the optimal balance between foundational and semantic token ratios? - How can design token architecture evolve with growing design system complexity? ### 🔮 Future Research - Advanced token aliasing and referencing patterns for complex design systems - Integration patterns between design tokens and component libraries - Automated token generation from existing design patterns ### 💡 Implications - Practice: Typography tokens change how designers approach text styling workflows - Policy: W3C standards adoption affects tool selection and workflow decisions - Security: Token export formats need validation for sensitive design system data - Education: Design system education must include token architecture principles - Funding: Open source design tools require sustainable development models ### 🧠 Learning Styles Assessment Reading level estimate: 10th grade #### 👀 Visual learners - Present: Live design tool demonstrations, before/after token applications - Improve: Diagram showing token relationships and hierarchy structures #### 🔊 Aural learners - Present: Live narrated demonstration with explanations - Improve: Audio summary of key token concepts and principles #### 🗣️ Verbal learners - Present: Clear definitions, analogies to code variables, naming conventions - Improve: Glossary of design token terminology and comparison tables #### 🧩 Kinesthetic learners - Present: Hands-on demonstration, downloadable starter kit for practice - Improve: Step-by-step checklist for token creation workflow #### 🧠 Logical learners - Present: Mathematical relationships in proportional scales, systematic naming - Improve: Decision tree for choosing token types and architecture patterns #### 🧑‍🤝‍🧑 Social learners - Present: Live Q&A, community forum mentions, team collaboration context - Improve: Collaborative token creation exercises and peer review guidelines #### 🧘‍♀️ Solitary learners - Present: Downloadable resources, self-paced demonstration format - Improve: Reflection questions about token organization and personal workflows #### 🌿 Naturalistic learners - Present: Analogies to light sources for shadow consistency - Improve: Ecosystem thinking about design token relationships ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear heading structure, descriptive alt text for UI elements - Improve: ARIA labels for complex token relationships in demos #### Keyboard navigation - Present: Standard browser controls for video playback - Improve: Transcript with timestamp navigation links #### Contrast and readability - Present: High contrast in design tool interface - Improve: Ensure token color examples meet WCAG standards #### Text resizing and reflow - Present: Responsive video player interface - Improve: Scalable text in design tool demonstrations #### Media and captions - Present: Audio narration throughout demonstration - Improve: Professional captions with technical terminology accuracy #### Forms and interactions - Present: Clear token creation workflows - Improve: Keyboard shortcuts documentation for accessibility ### 🌍 DEIB Assessment #### Cultural breadth - Present: Universal design principles, international typography considerations - Improve: Examples from non-Latin scripts and different cultural design approaches #### Inclusive language - Present: Clear technical explanations, defined jargon - Improve: Plain language summaries of complex token concepts #### Neurodiversity support - Present: Logical structure, consistent demonstration pace - Improve: Content warnings for rapid UI changes, summary sections #### Representation - Present: Focus on technical content over personal representation - Improve: Diverse use case examples beyond Western design patterns #### Psychological safety - Present: Encouraging tone, acknowledgment of mistakes during demo - Improve: Explicit welcome for questions and different experience levels ### ✅ Logical Validity #### Strong reasoning - Deductive strength: Token architecture principles lead to specific implementation benefits - Inductive strength: Multiple examples support general token usage patterns - Causal reasoning: Clear cause-effect between token organization and design consistency - Analogical strength: Code variable analogy effectively explains token concepts #### Fallacies - Appeal to authority: W3C standard mentioned without explaining specific benefits - False dilemma: Implies foundational vs semantic tokens are either/or choice #### Tone of voice - Overall tone: Conversational, educational, encouraging with authentic acknowledgment of demo challenges ### 🛡️ DARVO Analysis - Deny: No concerning denial patterns present - Attack: No attacks on other approaches or tools - Reverse victim/offender: No victim/offender dynamics present - Emotional cues and rhetoric: Positive, supportive educational tone throughout ## 🎯 Conclusion Typography design tokens in Penpot provide a powerful foundation for consistent, maintainable design systems. The combination of foundational tokens (generic values) and semantic tokens (purpose-driven) creates both flexibility and clarity. Proportional typographic scales add mathematical harmony while composite tokens reflect real design thinking. The W3C standard compliance ensures cross-platform compatibility, making Penpot tokens a solid choice for design-to-development workflows. Key next step: download the updated starter kit and experiment with proportional scales in your own projects. ## 🧱 Refactor Appendix ### 📚 Literature Split Pad Purpose: Stage CEE units that become Literature notes. Split level: H3 ### [H1] Design tokens create systematic design consistency > [!quote] [Intro to typography design tokens](https://youtu.be/TTPfc9zFN5k) by [[Laura]] via [[Penpot]]. Published 2024. Accessed 2024-12-19. > "Design tokens are a way to store reusable values for your designs." Foundation for scalable design systems and cross-team collaboration. [view highlight](https://youtu.be/TTPfc9zFN5k?t=205#H1) #design-system #consistency ID:rw_dt001 ### [ --- ## Full Transcript [00:00] [music] [00:08] Hello, my friends, and welcome to [00:10] another PimpPot hands-on session. In [00:13] these sessions, I'll show you exactly [00:15] how I do design work with PenPot, and [00:18] we'll dig into the practical details. [00:21] And I'm here to answer any of the [00:23] questions you might have along the way. [00:26] Remember, if you like these sessions, [00:28] please follow us, like, subscribe, [00:30] whatever you do on whatever platform [00:31] you're watching this on, and then you'll [00:33] be the first to know about the next one. [00:36] Today, we will be exploring typography [00:39] tokens. It's very exciting. So, please [00:42] do ask questions. We've got other folks [00:44] from the PenPot team here live as well. [00:46] So, if I don't get round to your [00:48] questions, they can answer them in the [00:50] chat, and we'll make sure we answer them [00:51] afterwards if we don't get round to them [00:53] at all. At the end, we'll have a little [00:57] design token doctor in session. Uh, [00:59] that's me. That's basically just the [01:01] Q&A. And you can also ask questions [01:04] throughout. So, what is Pemot? In case [01:08] you don't already know, Pempot is the [01:11] open-source design platform for both [01:13] designers and developers. And what are [01:17] design tokens? Well, let's get into it. [01:30] So, this here is my design tokens [01:32] starter kit. You might be familiar with [01:35] it already. It's had a bit of a font [01:37] upgrade. Um, but there's a new version [01:40] of it now in the penot hub under [01:43] libraries and templates. So, if you go [01:46] to the um resources and you can find [01:50] libraries and templates from the penmpot [01:52] site in there and you can find my design [01:55] token starter kit in there and this [01:58] contains demos of all of the different [02:00] token types that you can use and demos [02:04] of them in use and it's a great kit to [02:06] get started with. So, I thought I would [02:09] get started showing you that. So, what [02:12] is actually a design token? Design [02:14] tokens are a way to store reusable [02:18] values for your designs. So each design [02:21] token, if I go to the tokens tab here, [02:24] and so let's do this black color. It's [02:27] right here very conveniently. [02:29] So each design token is made up of a [02:32] name and a value. So it's really as [02:36] simple as that. And so for here you can [02:38] see I've got color.black. And if you are [02:41] a nerd like me and you can read a hex [02:43] code, you can also see from the swatch [02:46] maybe that this isn't exactly black. [02:49] That would be 000000. [02:53] And but I've decided that I actually [02:55] want my black color to be slightly off [02:58] black, slightly softer black. And so [03:01] I've set this as a design token that's a [03:04] color type design token. and I have [03:07] applied it to this swatch here. So, how [03:10] might I apply that token? If I create a [03:13] rectangle, any other object, I select it [03:16] on the canvas or I can select it in the [03:19] layers panel here. And if I go to tokens [03:22] and I find a token that I want to apply, [03:25] I can rightclick it and then I can [03:27] choose which property I want to apply [03:29] that token to. So here I might say fill [03:33] and that will fill it and then you can't [03:35] really see it against the background as [03:37] well. Now one of the benefits of design [03:40] tokens is that if you apply a token to [03:44] multiple objects and then you want to [03:46] change say that shade of black later on [03:48] you only need to update the token value [03:51] to update it across the whole of your [03:53] design. So I decide now I wouldn't do [03:57] this. I would, this is called black, so [03:58] I wouldn't [04:00] change the color to something that [04:02] wasn't black. But, you know, just in [04:03] case I decided to be a bit wild and I [04:06] want to go change this value to this hex [04:09] code, which is blue, and save it. [04:13] And oh, is that not that didn't have the [04:16] token applied and it'll will update it [04:18] throughout. Let's try that again now [04:20] that I've actually applied the token to [04:22] the swatch. edit the color and say I [04:26] update it to purple and save it. There [04:30] we go. [laughter] That's what it looks [04:32] like when it works. There's always a [04:33] little bit of chaos in my demos. It [04:36] wouldn't be a hands-on session without [04:39] it. So design tokens are a really [04:42] valuable tool for your designs, but [04:45] they're also a really great foundation [04:46] for design systems because they create a [04:49] shared language between all of the [04:51] designers using the same tokens because [04:54] these values have a name assigned to [04:56] them. You can talk about them in the [04:58] same way. You can say, "Hey, um, are you [05:00] using the blue 100 color for this? I [05:03] think maybe it would be slightly better [05:06] contrast if we used, say, blue 500." and [05:09] you have that shared language and you're [05:11] not just talking in hex codes which [05:13] could be quite hard to read and [05:15] understand. And they also translate [05:18] really well into the development process [05:20] because they're essentially just like [05:22] code variables. [05:24] The benefit of pimpot and design tokens [05:27] is that penmpot uses the native design [05:30] tokens, the W3C [05:33] design tokens community group uh [05:36] standard for design tokens and that [05:38] standard format. And so that means that [05:40] any platform that supports design tokens [05:43] will be able to support the tokens that [05:45] you've created in penmpot. And you can [05:48] also import the tokens you've created on [05:51] other platforms into pimpot if they are [05:54] in that same JSON format. It's a JSON [05:57] format. So if I hit export here, you can [06:00] actually see a little preview of this [06:01] JSON format. And so uh that scales, [06:04] which is not something I'm going to get [06:05] into right now, but if I scroll down, [06:07] there we go. Colors. So this is a 300 [06:10] color for if I scroll up purple. And you [06:14] can see it's got a value and a type. And [06:16] you can add a description as well. And [06:20] one of the other benefits of tokens is [06:22] once you've created these tokens and [06:25] assigned values to them, you can use [06:29] different sets of tokens turning them on [06:31] and off. We go to tokens. So these are [06:34] all my different sets of tokens and you [06:37] can turn them on and off using themes. [06:38] So if I just switch to this different [06:41] page. [06:43] There we go. So, this is a little demo [06:45] page and I switch between light and dark [06:51] mode [06:53] and I can change between vibrant and [06:55] muted themes. So, you can do all of [06:59] these things and create very advanced [07:01] theming just with tokens. Now, that's [07:04] all examples to do with colors, but [07:07] there are a lot more different token [07:09] types. So, in this foundations set that [07:12] I've got here, I have color tokens, I [07:15] have opacity tokens, I have rotation [07:19] tokens, sizing, stroke width, and you [07:24] can see there's even more token types [07:25] down here. Border radius, dimensions, [07:28] and some others that we'll get to in a [07:31] minute. And each token can only be [07:34] applied to the relevant properties of [07:36] your design elements. So, for example, [07:39] you can't apply font size and font [07:42] weight to a rectangle. That wouldn't [07:44] make any sense. But if I say selected a [07:47] rectangle or a group or a container and [07:50] then I open up the tokens, I can see [07:54] that this line token is already applied. [07:57] That's shows in the panel here. That's [08:00] the highlighted show that's applied to [08:01] this object. But only the highlighted [08:06] ones can be applied. In fact, it would [08:07] be helpful if I open one with typography [08:10] because then you can see I can't apply [08:13] these typography tokens to this [08:16] rectangle, but I could apply them to the [08:19] text. And if I wanted to, I would [08:21] rightclick and choose to apply to the [08:24] typography properties. [08:27] So when you just select the object on [08:30] the canvas, I'm using that really handy [08:33] little option shortcut to pick direct [08:35] objects here. Then I can see what I can [08:38] use and what's already applied in the [08:40] panel. Colors are also already shown in [08:44] the design panel as well. And other [08:46] tokens will be shown in the design panel [08:49] soon. [08:50] So let's have a look at typography [08:53] tokens. I'm going to jump into a [08:56] different file for that. [08:59] Now, [09:01] in this here, I've got back into my [09:04] tokens. This is a much simpler file with [09:06] much simpler tokens. So, I think it's a [09:08] good example. [09:13] Now, here I have a global set and I have [09:17] this scratch set that I've created for [09:20] us to play with. And what I want to do [09:23] is I'm just going to go into this [09:28] scratch file [09:30] and let's look at typography tokens in [09:32] more detail. In fact, I'm going to [09:33] disable the global set while I'm doing [09:35] that just so it doesn't mess with what [09:37] I'm doing in here. So, typography [09:40] related tokens. Maybe I'm going to [09:42] create a text box. [09:46] Here's my nice text that is tiny. I'm [09:50] just going to whack that size up so that [09:52] you can all see it a bit better. Okay. [09:56] In fact, as good as an idea that is. Set [09:59] it to a normal size. And I'm going to [10:00] use the zoom level [laughter] to so we [10:03] can see it a bit better. I realize if [10:05] I'm going to create font sizes, I might [10:07] come across shortly. Right. [10:11] So, what's a typography token I might [10:14] use? Let's start with font size. [10:17] So, I might create a font size token. [10:24] And I'm going to I'm going to call it I [10:29] create a range of font sizes. Uh [10:31] thinking about how you usually use font [10:33] sizes in a design. And I'm going to use [10:36] t-shirt sizes for this. So, I might say [10:38] font size. So, this is the beginning [10:41] part of my token. It's going to be part [10:43] of a sort of a grouping for the tokens [10:45] called font size. And I'm going to start [10:48] with [10:50] SM small. And the dot is how you [10:53] separate the different sections of the [10:55] name in a token. And my small one, I'm [10:58] going to make it 16. A nice default font [11:02] size is 16. Nice and accessible as a [11:04] general rule. [11:06] So I have a small font size and I want [11:08] to apply it to my nice text. Let's just [11:11] shrink that bounding box. And I can just [11:15] hit the uh token without right clicking [11:18] it. But it's good to get into the habit [11:20] of right clicking it if you want to be [11:21] able to choose the property [11:24] if it's a uh token that can be applied [11:27] to multiple properties [11:29] and choose font size and it will apply [11:31] it. It was already 16 so it's not really [11:34] made a change. Let's do another one. [11:37] A slightly smaller font size. [11:40] So we'll do XS extra small 14. So I [11:45] apply that. There we go. Bit smaller. [11:48] And I can continue on like that. Medium [11:51] will be 18. I do actually have these [11:53] written down for myself because I cannot [11:55] remember numbers to save my life. Large [11:59] would be 21 [12:02] and extra large [12:06] would be 30. You could also duplicate [12:09] these tokens and just edit the name of [12:11] them if you want to make it nice and [12:13] fast. That's a good technique for later. [12:15] So, changing that to large by just [12:18] clicking it or right clicking and [12:21] selecting in there. The idea of naming [12:25] tokens like this with sort of a [12:27] restricted number of sizes is this idea [12:30] of foundation or core design tokens. And [12:34] the benefit of these is you're creating [12:37] a narrow range of values that you can [12:40] then use across your design. I think if [12:42] you're a designer with any level of [12:44] experience, what you've probably found [12:46] is repeating the same value over and [12:48] over again can create consistency and [12:52] can create a nice visual hierarchy [12:55] inside of your design work. And not only [12:58] does it really maintain that consistency [13:00] across the entirety of your design [13:01] system, but it also makes a more [13:04] consistent visual language for your [13:06] users. If you think about every time a [13:10] heading text is the same size and every [13:12] time the label text is the same size, [13:15] it's going to over time teach your user, [13:18] oh, that's a label. Oh, that's a heading [13:20] if they're able to see it. So it might [13:23] seem quite restrictive to have to pick [13:25] from a very limited number of values, [13:29] but really think about it creating that [13:31] cohesive visual language. You want to [13:35] choose those initial values very [13:37] carefully. So let's go to font family. [13:40] That's quite an exciting one. That will [13:41] be the font itself, I guess, as a lot of [13:44] people would say, or the type face. And [13:46] so I'm going to say font family [13:49] and I'm going to call this default. Am I [13:52] going to call it default? [13:55] I'm thinking about how this is what you [13:57] do when you're creating design tokens. [13:58] I'm thinking about how fonts are used in [14:03] designs. And I would say that [14:07] you probably don't use that many fonts. [14:10] You might have a default one and a [14:11] special one. You might have a sans serif [14:14] font and a saraf font. You know what? [14:16] I'm going to go sands. I haven't [14:18] pre-planned this. So, let's see. And the [14:20] value. Uh. Oh, I'm doing this in font. [14:23] Wait. [14:25] Lucky. I just noticed that when I [14:26] couldn't pick from the font. Went to do [14:28] it again. Gosh. There we go. Right. So, [14:31] font family. Sands. Now, I can type my [14:34] value in. So, the name of a font family [14:36] in here. If you're used to creating CSS, [14:39] you could do this with a stack um the [14:41] same way you usually would with [14:43] commaepparated list of font names. And [14:46] in theory, they would uh fall back to [14:50] the first one in the stack is the one [14:53] that gets used. If that's not available, [14:54] the next one gets used. Um that doesn't [14:57] work that way necessarily in penpop, but [14:59] you would have that all set up nicely [15:00] already in your design token. Or I can [15:03] pick from the dropdown of the fonts that [15:06] I have in pimpot. Whether that's a [15:09] Google font or a custom font that I've [15:11] already uploaded. Oh, what's a nice [15:13] choice of font? Oh, I'm quite keen on [15:16] inclusive sands lately. [15:18] That's a nice sand saf. And so I'm going [15:22] to save that. And so now my font [15:24] family.Sands I can apply it by clicking [15:27] the token or by right-clicking the token [15:32] and selecting font family. Now you can [15:35] see where this is going. Font weight is [15:38] similar except you have to bear [15:40] something in mind. Little clue in here. [15:43] If you are coming from CSS you expect [15:46] font weight and font style to perhaps be [15:49] separate values. Here they are combined. [15:51] They're both in font weight. So whether [15:54] your font is bold or light or medium, [15:58] that's in here. But also whether your [16:01] font is itallic or Roman, that's the [16:04] term if something isn't italic, just in [16:06] case you didn't know. So you can specify [16:08] all of that inside of this token. So I [16:12] might have a font weight [16:15] of [16:17] bold and I can specify that as just bold [16:21] or I can specify that as 600 or maybe I [16:24] want a really heavy bold and I would [16:26] specify it as 700. You can use any [16:30] weight and itallic or Roman that is [16:33] supported by the font family. So bear in [16:36] mind that if you've set uh say [16:41] I don't know 900 here [16:43] and I apply this to this font I happen [16:46] to know and I get an error for that that [16:49] there is no 900 weight for the inclusive [16:52] sands font family. So I'm going to set [16:56] that to 600. [16:58] And maybe I'll set one for bold itallic. [17:03] not going to cover all bases right now [17:05] because that would take us forever. So I [17:07] might say 600 itallic in that case and [17:10] so then if I selected that it would [17:12] change it to 600 itallic. [17:15] We also then have tokens for letter [17:18] spacing. So this is the equivalent of [17:21] what you get in this field here. uh text [17:25] case as well that's at the bottom which [17:28] is the equivalent of what you get in [17:29] this field whether it's uppercase [17:32] capitalized or lowerase and text [17:35] decoration which is if you press these [17:39] it is like either your underline or your [17:42] strike through or none as well. Uh, if [17:46] you want to learn more about the other [17:49] design tokens, you can check out my [17:51] previous hands-on on design tokens um, [17:54] as well as I've written loads of [17:56] tutorials on the penot blog and there is [18:00] an excellent reference in the penot user [18:02] guide. Really, that's my first place I [18:05] go when I want to know something in [18:07] detail about penot. The user guide is so [18:10] good, so well written. So, [18:14] let's get to our first Q&A. [laughter] [18:16] Do we have any questions so far about [18:19] design tokens in PMPOT? [18:25] Then we can jump straight into creating [18:29] typography composite tokens. [18:35] [music] [18:40] Now, I didn't mention just them. If you [18:43] do want to ask any questions throughout, [18:45] just jump on whatever platform you're on [18:47] and ask questions in there and hopefully [18:50] they'll filter through somehow or we'll [18:52] pick them up later. [18:54] Most of them do come through live, I [18:56] believe. Right. So, the typography token [18:59] is a special one. [19:04] This is this type token down here. So [19:08] what's special about a typography token [19:11] is that it is a composite token. That [19:15] means it's a token made up of other [19:19] design tokens. And so it [19:23] includes you see here we've got font [19:26] family, font size, font weight, line [19:28] height. and they enable you to add all [19:31] of these styles to your text with just [19:34] one click and just assign all of these [19:36] things. And it really does reflect more [19:38] how we tend to design typography. We [19:41] don't tend to think of the font weight [19:44] and the line height separate from the [19:46] font family. We tend to when we're [19:48] designing things consider all of these [19:50] decisions together. So it really makes [19:52] sense to combine them into one token. [19:55] The composite part of a typography [19:58] composite token is it is composed of [20:01] those different tokens. [20:04] So let's think about naming a typography [20:06] token. So we've already kind of looked a [20:08] little bit at the idea of foundation or [20:12] core or base tokens. The idea that [20:15] they've got these quite generic names [20:17] and then you can reference those names [20:19] in other tokens. In fact, I'm just going [20:22] to show you that very quickly. [20:25] So, say I wanted to I decided uh [20:31] let's do this in [20:33] I don't know I wanted to create a font [20:37] weight [20:38] uh 600 and I'm actually going to be [20:42] using the 600 value. So, I've got a very [20:44] specific name for my token. And then [20:48] I've got a font weight bold and instead [20:50] of saying 600 again I can reference it [20:53] by putting it in curly quotes and say [20:55] font weight 600 and it references that [20:59] value and then if I choose to update [21:01] that value why I would I don't know in [21:04] the future then it will also update the [21:07] value of this token too and then of [21:10] course update any object on the canvas [21:12] that is referencing that token. So [21:15] that's what references are for. Uh I'll [21:18] leave those be right there. It's not [21:19] going to cause me any harm, I don't [21:21] think. So when we come to naming our [21:25] typography tokens, if we think that [21:26] typography tokens are really about how [21:29] you're using the token during your [21:32] design process. So when you're naming [21:34] them, think about that. like think about [21:37] how should I make it really easy for [21:40] anyone in my team or my future self even [21:45] to use this token. So, you want to be [21:49] consistent and you want to be [21:51] descriptive, but you also want to be [21:53] pretty concise with it. So sometimes [21:55] it's easiest to plan your token names [21:58] and your token design once you've [22:01] already got and established some of [22:04] those design patterns in your system [22:06] already and you have an idea of the [22:08] system that you already have in your [22:10] hands. And so [22:14] I explained foundational base core [22:16] tokens. Now we're going to look at what [22:18] is called a semantic token. So semantic [22:21] token is named for the purpose of the [22:25] token. So they're useful when you're [22:27] actually doing the design work because [22:29] they tell you what is this token [22:32] actually for. So different types of [22:36] headings, different types of labels. I [22:38] might have this as my [22:40] text dodee default. It's my default text [22:43] that I use across my design. [22:48] So let's get started with creating our [22:51] typography token. [22:53] Now I've start off my font family and [22:56] I'm going to reference that token that I [23:00] already created for font family sans. [23:03] And so that is going to use inclusive [23:06] sans as my default text font family. And [23:11] that means if I change my mind in the [23:12] future and I'm like, nah, actually I [23:15] want to make the default SANS family [23:18] into say DM SANS, I will change that in [23:23] the font family SANS token and it will [23:26] bubble through to my typography token [23:28] and I'll only have to update it in one [23:30] location. So it's really great thing to [23:32] get into the habit of doing. [23:35] The default font size. Well, that will [23:37] be font size small. [23:40] I find it quite handy when I'm creating [23:42] tokens like this to have the panel and [23:45] the relevant tokens open in the left [23:48] panel because I cannot remember how I [23:51] wrote things to begin with. [23:53] Now, font weight. Oh, we don't want a [23:57] bold font weight, do we? Well, you know [23:59] what? I don't have to use a reference. [24:01] I'm just going to say 400. [24:03] That's a reasonable font weight there [24:06] for a default text. [24:08] Okay. [24:16] And then it comes to line height. Now, [24:19] you might be looking at line height and [24:20] thinking, "But Laura, there isn't a line [24:23] height token type." [24:26] And that's because it doesn't really [24:28] make sense to have one. If you think [24:30] about your line height, it's usually in [24:33] when you're designing line height, it's [24:34] usually relative to the font family, the [24:38] font size, the weight of the font, and [24:42] to some degree where it's being used. [24:44] Let's think about, say, paragraph text. [24:47] you're going to use a much looser line [24:51] height for readability, [24:53] uh, a much bigger line height than you [24:56] would for, say, heading text where when [24:58] it runs onto two lines, you don't want [25:00] too much of a space between it. So, it [25:02] makes sense to keep it in here. [25:05] With line height, you can do it like you [25:08] would um, in the design panel in penot. [25:11] And you can just say one, which is a [25:13] multiplier of the current family. I [25:15] would say maybe 1.2 two would be quite [25:17] nice. You can also use percentages. [25:21] Obviously, you don't want line height of [25:23] 0.012. [25:25] Maybe do like 150% or something like [25:28] that. Um, but I'm just going to do 1.2 [25:31] for now. And then we have letter spacing [25:35] and our uh case and text case and our [25:40] text decoration. [25:42] I'm just going to leave these empty [25:44] because [25:47] the defaults will be fine. I don't want [25:49] to adjust the letter spacing from its [25:50] default. I don't want to change the case [25:55] from its default. I don't want to add [25:57] underlines to my default text. So, [26:00] that's going to do. And I can always add [26:01] a description saying default text. [26:07] Oh, that's a bug I discovered earlier in [26:09] the week, actually. So, you know what? [26:12] I'm going to save descriptions for [26:13] later. [laughter] [26:14] And then I will save that. And now I [26:18] have my typography here. And that means [26:21] if I create some new text, [26:25] which is in a completely different text [26:27] style, and then I set text default to [26:30] it. [26:31] It has then got all of those properties [26:34] applied that I specified inside of my [26:37] typography token. [26:40] So I think that's a good point to ask. [26:42] Do we have any questions about creating [26:46] typography composite tokens? [26:49] Is there a way to carefully define [26:51] particular characters/glyph banks of a [26:54] font so only those will load via CSS? [26:58] There isn't right now, but I think [27:00] that's a pretty cool feature request. [27:02] So, I'd really recommend uh either going [27:04] to the PMPOT GitHub, putting your [27:08] feature requests in there, or going to [27:09] the PMPOT community. I think that's a [27:11] really great place to share your feature [27:12] requests because then you can include [27:15] your use case, maybe an example of how [27:18] you would use it and what you would rely [27:20] on because I can see that I don't know, [27:23] for example, you've got a specific font [27:26] family and you want to use the alternate [27:29] glyphs in that font family. And so that [27:32] I can definitely see a use case for that [27:34] maybe as a part of the custom font area [27:37] or something like that. [27:40] Okay, if you do have any questions at [27:42] any time, make sure that you just ask [27:45] them on the platform that you're on. You [27:47] can also jump into the penop community [27:49] and ask them there later on. Come find [27:51] me. I'm in there all the time. [27:54] So, next up, let's look at using [27:57] typography composite tokens in real [28:01] projects. [28:05] [music] [28:10] So, I'm going to disable this scratch [28:12] set for now. And I'm going to go back to [28:15] my global set and enable that. And I'm [28:18] going to jump onto this little demo. [28:22] Now, uh if you like this little uh demo [28:26] design that I've done, I have got a [28:28] version of it available also from the [28:31] pimpot libraries and templates. [28:34] Um, if you search for it, you can search [28:38] top typography. [28:41] And here we go. A simple demo topography [28:44] design tokens. And from the penot hub, [28:47] you can download these files to import [28:48] or just directly pull them into your [28:51] penot. [28:52] And so you can play along with me if you [28:55] want. And uh, so look, go back to the [28:58] right page. [29:00] I got too many tabs open. All right. [29:04] So here is as you see a nice grid demo [29:07] that I've got. This is a the idea of [29:09] maybe a fashion magazine kind of [29:12] situation. So let's have a look at the [29:14] tokens that I'm using here. [29:17] So I have [29:19] a font family. So like I explained [29:22] before I have a SAS and a serif. I do [29:26] quite like pairing the Sans and Serif [29:29] versions of one uh like font family that [29:34] can make quite a nice um consistency [29:37] across a design. [29:39] I have some font sizes here. I've tried [29:41] to use a slightly different scale which [29:43] personally I find incredibly confusing, [29:45] but I just wanted to mix it up a bit. [29:49] So, uh these are font sizes that are [29:51] multiples of each other or multiples of [29:53] the base font. [29:55] I have my font weights in here. So I [29:57] have bold, regular, regular, itallic, [30:00] and here here are my typographies. So [30:03] I've created a different typography for [30:07] each different purpose of the text on [30:09] the page. So up here I have my link [30:12] navigation. So that's making use of the [30:15] if I open it up, [30:18] scroll down, I've got underline in there [30:20] for my text decoration. And you can see [30:22] I'm referencing the SANS font uh family [30:27] and the font size one, a regular font [30:30] weight and a line height of 1.2. [30:34] I've got my headline in here. And so [30:38] that's using serif and different things [30:40] as well. [30:43] Uh, [snorts] this is a bit more [30:44] interesting, a pull quote because that's [30:47] using regular itallic. [30:50] And here, can I select it? It's the [30:54] photo getting in the way. There we go. [30:56] The title. [30:58] I think this is quite an interesting use [31:00] case because with the title typography, [31:05] I'm not referencing any other design [31:08] tokens because really, why do I need to? [31:12] One of the things I think it's important [31:14] to think about is not overusing design [31:16] tokens when you don't need them. This [31:18] title is completely unique. It's using a [31:20] different font from every other aspect [31:22] of my design. It's using a dramatically [31:25] different font size. It's using a [31:27] dramatically different letter casing. [31:29] It's using an unusual [31:31] um spacing and an unusual case. And so I [31:35] don't need to create foundational tokens [31:38] for each of these values because I won't [31:40] use them again. So there's no point. But [31:43] the typography token still allows me to [31:46] create that semantic meaning that [31:48] purposeful [31:50] uh token so that I it so it appears in [31:54] the list. I know how it differentiates [31:56] from all of the other tokens, but I'm [31:59] just putting in those specific values [32:02] without using any references. You see [32:04] here, I've even put used for the [32:05] magazine title in my description. And so [32:09] I think that is it can especially if you [32:12] are someone with a very systemsoriented [32:15] brain, you can often get into the habit [32:18] of wanting to put everything into a tiny [32:21] little token and reference it. It looks [32:24] really nice and complete and tidy, but [32:27] it's just not necessary and it can be [32:28] overengineering [32:30] to a degree and unless you're likely to [32:33] create more titles in the future of [32:36] different variations, you probably don't [32:39] need to do that. Uh, so I've told you [32:42] about [32:44] foundational tokens. I've told you about [32:46] the typography composite tokens here. [32:48] I've told you you can download this demo [32:50] file from the penot hub. So, this was a [32:53] quick section. [laughter] [32:54] Do you have any questions about anything [32:57] so far? I'm not going to restrict you [32:59] just to composite tokens. Okay. Right. [33:04] Should we get into some really nerdy [33:07] stuff? Let's look at proportional [33:10] typographic scales. [33:24] Now, I don't know if you've heard of a [33:26] proportional typographic scale before. [33:28] This is the idea where your typographic [33:31] hierarchy. So, for example, the size of [33:34] your title is bigger than your subtitle, [33:36] which is bigger than your default text. [33:39] Um, your subheading is bigger than your [33:41] default text. This is a hierarchy. This [33:43] is using font size to indicate what is [33:46] the most important information on the [33:49] page. That's a hierarchy. A proportional [33:53] typographic scale is the idea of making [33:57] those values mathematically related to [34:00] each other in order to create a harmony [34:04] across your design. Let's go back to our [34:07] scratch and let's uh delete these [34:12] and I'm going to go into my tokens. Oh [34:14] no, I don't want those tokens. [34:16] [laughter] I hate doing sizing like [34:18] that. I don't know why I even did it. [34:20] Just to be different. Okay, let's go to [34:22] our scratch tokens. T-shirt sizes I'm [34:25] finding much more comfortable right now. [34:28] If anyone does have any other [34:30] suggestions for scales, for font sizes [34:32] and things like that, I'd love to hear [34:33] it because I am genuinely interested [34:35] about what works for you. And so, let's [34:40] here make um I just do some demo text [34:43] for each of our font sizes. So, I'm just [34:45] going to say this is large. [34:48] This is the exciting part where you [34:49] discover that Laura can't type. Yep, [34:51] there we go. [laughter] Knew it was [34:53] going to happen. Extra large. [34:58] and small and [35:02] extra [35:03] small. [35:05] Um, I'm going to make all of those [35:10] bounding boxes fit their text. And let's [35:14] just pop those a little flex layout for [35:17] prettiness. [35:19] Just going to make them. [35:22] Then I'll just order them by size. [35:25] Flex layouts are so useful, aren't they? [35:28] If you don't know about flex layouts [35:29] yet, watch some of the other hands-on [35:32] videos. They're so useful for laying [35:34] things out really quickly. Right. So, [35:37] I'm going to apply my extra large font [35:39] there, my large font there, my medium [35:43] there, my small, and my extra small. So, [35:47] we got a nice little demo going on. Now, [35:50] right now, as you know from when we [35:53] created these tokens, they have kind of [35:55] arbitrary values assigned to them. What [35:59] I want to do is I want to make all of my [36:02] font sizes [36:04] relative to this small font size. I'm [36:07] doing it from the small font size [36:08] because I consider this to be my default [36:11] font size. [36:13] I'm going to do that using some [36:15] calculations. [36:16] So I go in here and if I wanted [36:21] I could just uh go to medium. Say I want [36:25] it to be a multiplied version of small [36:29] and I could say 18 time uh 16 is what [36:32] the value of small is or [36:35] font size [36:38] multiplied [36:40] by say 1.2 two and then I'll get a new [36:44] value. And so I can use a calculation to [36:46] calculate the size of my medium text. [36:50] But then I have to go through and do [36:52] that for each of these individually. And [36:55] what if I decide I don't want it to be [36:57] 1.2 anymore. [36:59] So if I I can't remember what it was [37:02] now. Uh was 18. It doesn't really [37:06] matter. Let's start off by making a [37:08] number token. This is a relatively new [37:10] token. It's a token that is just a [37:13] number. And I'm going to call this my [37:16] space. [37:18] I'm going to say it is [37:20] 16. So this [clears throat] is going to [37:24] be my initial value from which all of my [37:28] font sizes stem. So it's going to be the [37:32] equivalent of small right now. But I [37:33] might change my mind. Maybe if I use a [37:35] different font family. Some font [37:37] families render much smaller, some [37:39] render much bigger. I might decide, oh [37:41] no, I've changed it to this Sarah font [37:43] where the X height is really tiny. I [37:45] need to bump up my base font size to [37:48] accommodate that. So I'm going to make [37:50] my base of 16. [37:53] And then I want my scale. [37:56] So the higher the number for the scale, [37:59] the more extreme the difference between [38:01] my font sizes will be. The lower the [38:03] number, the less extreme. [38:06] You can get into really nerdy like [38:09] musical scales. You can do golden ratio. [38:12] You can look all these numbers up and [38:14] they are actually in the starter kit if [38:16] you're interested in doing that kind of [38:17] thing. And so let's say for now my scale [38:20] is going to be [38:22] 1.2. [38:25] So I'm going to set my small token to be [38:30] base [38:32] multiplied by scale. [38:38] So that resolves as a value of 19.2. [38:42] So maybe you think, oh that's quite a [38:44] big [38:47] uh [38:49] is that what I want to do? [38:51] Ah, it makes sense for now. Okay. Um, so [38:55] when I come to generating my medium font [38:58] size, in order to make it proportional, [39:01] I'm going to reference my small font [39:04] size. and then multiply that [39:07] by my [39:09] scale. [39:12] And then I'm going to keep going. [39:15] Tell you what is sometimes easier to do [39:19] on typing things badly [39:22] is to [39:24] copy the value. And so for the large one [39:29] to use that same value, but I'm actually [39:31] multiplying medium. So for each value I [39:34] am multiplying the low the next lower [39:37] down [39:39] uh font size in the hierarchy. [39:43] And so when we get to extra large we are [39:45] going to multiply it by large. For my [39:50] extra small I'm going to go the other [39:52] direction. So I'm taking font size small [39:55] and I'm going to divide it by the scale. [40:00] And actually that worked out well with [40:01] that base size. So now I have all of [40:05] these different font sizes [40:07] relating to each other. [40:11] And some of them are not entirely [40:14] rounded. Um that's something you can do [40:16] in development if if it really matters [40:19] to you. Doesn't really matter to me [40:22] unless you're worrying about things [40:24] rendering cross pixel. But at this font [40:26] size it's not really an issue. And so [40:29] then if I want to play with the scale [40:32] and the bass multiplier, I can try out [40:36] different hierarchies. [snorts] [40:38] So I could go really extreme. And you [40:40] see here, if I've made my scale 1.6, my [40:45] small is still reasonably small, but my [40:46] extra large is enormous. [40:49] Those kind of scales can work quite well [40:50] if you're thinking about a lot of [40:52] display typography, like landing pages [40:54] and things like that. Um, maybe you want [40:57] to go a bit more in the middle and with [41:00] 1.3. [41:02] Maybe you want to adjust the base token [41:04] size to something a bit different in [41:07] order to get sizes that you want. So [41:09] that makes our extra small size 12 or [41:13] 15.6 for small, 20.28 for medium, 26.36 [41:19] for large, and 34.27. [41:22] So that's pretty large. And of course, [41:25] if you have a lot of different text [41:27] sizes you want to accommodate inside of [41:29] your design or inside of your system, [41:31] you might create [41:33] 2 XS or the equivalent of XXS or 3 XS, [41:38] which is the equivalent of X XS. [41:43] It's hard to say. Um, or the same for [41:45] the XL's. You could have 2 XL, 3XL. [41:49] I probably wouldn't go beyond that. It's [41:52] quite a lot of variety in there. Um [41:54] could create quite confusion inside of [41:57] your hierarchy if there are so many [41:59] fonts in different sizes in there. [42:03] So that is the basics of how you might [42:06] want to create a proportional [42:08] typographic scale. Do we have any [42:12] questions about [42:15] typographic scales or anything related [42:17] to design t? You're a really quiet bunch [42:20] today. Is anyone actually out there? If [42:23] you are, um, let me know. Uh, give me a [42:26] shout. Uh, let me know. Where are you? [42:29] Where are you from? Um, what what kind [42:32] of work do you do? Um, I'm in Ireland. I [42:35] know that's really confusing because my [42:36] accent isn't Irish, but that's where I [42:38] am. That's where I live. Well, okay. I [42:42] think let's jump into something else [42:44] really exciting and new which is a bit [42:46] of a bonus because I know that I said [42:48] this was about typography tokens but why [42:51] not let's have a look at shadow tokens. [42:58] [music] [43:03] So I'm going to make a little different [43:05] object inside of my scratch. [43:09] So shadow design tokens are exactly what [43:12] you might think they are. They're [43:14] another type of composite token. If you [43:16] think about a shadow, if you create a [43:17] shadow in pimpot, it has all of these [43:22] different values that are made up to [43:24] create a shadow. So of course it makes [43:26] sense that we need a composite token for [43:29] that. So I've just made a nice uh drop [43:33] shadow going on there. You can also have [43:36] inner shadows. And basically these are [43:39] effects that you might use to mimic [43:41] light in real life. And often you would [43:44] use it to bring content forward away [43:48] from the base level or push it backwards [43:52] uh so it looks less important. Or you [43:54] could use it for skephism if you wanted [43:57] to make a button that really looked like [43:59] something you could press in real life. [44:01] Um I remember a phase when we all went [44:03] through doing that in design maybe 15 [44:05] years ago. Oh, the things we did. Did [44:08] you ever We had stitching effects on web [44:12] pages so they look like they were sewn [44:14] together. H the good old days, right? [44:18] Tokens. Let's concentrate, Laura. Okay. [44:21] So, we want to create a shadow token. [44:25] This is very similar to these typography [44:30] uh tokens. You have a shadow token name. [44:32] And so [clears throat] maybe I will call [44:33] this shadow dots [44:36] uh outer because I might have a [44:38] different inner and outer shadow. And [44:41] then you can add the color. You can add [44:44] the xaxis. So that is um the distance [44:48] that the shadow is from your object in [44:51] across the x-axis. So it can take [44:53] negatives as well. And then for the [44:55] Y-axis, [44:57] uh the blur is how many uh pixels [45:02] outside of the object does the shadow um [45:07] expand or does it blur? The spread is [45:10] how it expands. I hadn't thought ahead [45:13] about explaining all of these [45:14] individually, but we're we're making it [45:16] through. So, uh I might decide I'm going [45:20] to create I don't know. It's most [45:22] shadows are fairly gray. Although in art [45:25] school, they always taught me that a [45:26] shadow is never black. It is the a [45:29] darker version of the surface it is on [45:31] with a little of the color of the [45:33] objects that are alongside it. Uh so in [45:37] that spirit, well, we're on a white [45:39] canvas, so it's got to be gray. Um I [45:43] tend to make most of my shadows come [45:45] from the top. So, no X or Y positioning [45:50] because it can get very quickly [45:52] confusing otherwise. And then blur. Um I [45:56] like a nice uh fuzzy blur so it feels [46:00] quite far away uh from the object it's [46:02] on and no spread uh because that can [46:06] create a line effect around which is [46:08] quite useful if you want to mimic a [46:09] border using a shadow. [46:14] And then I can apply my shadow by right [46:17] clicking and selecting shadow like that. [46:20] So you can see I've got this kind of [46:22] fuzzy [46:24] blurriness around my object. That might [46:25] be easier to see if I make this a [46:28] lighter color. There we go. And in the [46:31] same way as with typography tokens, you [46:35] can do things like I'm going to make a [46:36] color token. I want all of my shadows to [46:39] be across my whole design to be the same [46:42] color. So that's a great thing to use a [46:45] design token for to create that level of [46:48] consistency. So I go for this grayish [46:50] color. Um in fact I'm going to also give [46:54] it an alpha value. Make it slightly [46:57] have a lower opacity so that the [47:00] background behind it color will come [47:02] through. That's more realistic as well. [47:05] And so now I've got my color. Let's come [47:08] up here. And so now in shadow.outer [47:11] outer. I'm going to reference my shadow [47:14] dot color. [47:17] I also think it would be really useful [47:19] to add the X and Y values. I do those [47:25] with number tokens, I think. So, my [47:29] shadow [47:32] X. [47:34] Okay, maybe let's think about doing it [47:37] from the top isn't very interesting. [47:39] If you're using shadows to mimic the use [47:42] of light inside of a design, it makes [47:46] sense that you probably usually have one [47:49] light source. So, one direction that the [47:52] light is coming from, which throws the [47:54] shadows in the opposite direction. And [47:56] so, you want that to be consistent [47:58] across all of your design because [47:59] otherwise it's going to be very [48:00] confusing to the eye. you're mimicking [48:02] this very human effect that we used to [48:05] seeing in real life and it's going to [48:07] look odd if you're not using it in the [48:09] same way in your design. And so maybe I [48:13] decide that I want it to come from a [48:14] corner and I'm going to give this X a [48:19] value of five [48:21] and I'm going to do Y a value of five. [48:24] So creating these as number tokens means [48:26] that I can change it later. [48:29] And then I'm going to reference those [48:32] tokens. [48:35] Oh, not Z doesn't exist. X and shadow [48:40] doy. [48:43] And possibly the same for the blur as [48:45] well. [48:47] We want it to be our items to maybe on a [48:49] similar plate. Maybe you create a scale [48:51] for it. Maybe you create shadow depth [48:56] um shallow. [48:58] This is me completely improvising this. [49:01] So five would be shallow, I suppose. Uh [49:04] maybe I'm going to actually say close. [49:07] Think that makes more sense. I'm not [49:09] using the token yet, so it doesn't [49:11] matter that I might break the reference. [49:13] And shadow depth [49:18] far. [49:19] Okay, so that will suggest that the [49:22] object is further away from the canvas. [49:24] So, I make that really extreme. [49:27] But maybe in my shadow. [49:31] I'm going to use [49:33] shadow.epth [49:35] dot close. [49:41] And you see that's now I've adjusted [49:43] that shadow token. It has already [49:45] updated the object that's using the [49:47] shadow token on the canvas. That's kind [49:50] of a fun effect, isn't it? I make that [49:52] slightly different color so we can see [49:54] it a little bit better. [49:56] There we go. [49:59] And then maybe if I created a inner [50:02] shadow [50:07] and I want that to use the same color. [50:11] So that would be color dot shadow [50:15] uh shadow color, wasn't it? That's why [50:17] it's [snorts] [50:19] can't even remember what I've named my [50:20] tokens. Um, and [50:24] let's just stick them with uh let's do [50:26] some default values right now. Oh, you [50:29] know what I didn't do? Uh, I didn't [50:32] remember to choose inner shadow from the [50:33] dropdown. And I can apply that inner [50:36] shadow there as well. Oh, I'm That's the [50:40] mistake. This is why I told you right [50:42] click the tokens rather than [50:43] conditioning yourself into just left [50:45] clicking them because of course I just [50:47] went and applied that to oh all of the [50:50] properties. I actually want to like that [50:53] as well. [50:56] Oh right I'm it's cuz it's on the same [50:57] object. Ignore me. Right. So I have an [51:01] outer shadow there and an inner shadow. [51:05] So I can choose between them. And maybe [51:08] I actually did this in the right way [51:09] because if you think about it, if the [51:11] light direction was coming from there, [51:12] the inner shadow would be on this side. [51:16] And so I can use the same X and Y [51:22] values. [51:25] I think that should work [51:31] as the other as the outer shadow. No, [51:35] not blue. Blur. [51:38] No depth. [51:41] And this is why you name your tokens. [51:43] Well, depth shallow. [51:48] No. No. [51:50] Uh, close. [51:54] Right. She got there eventually. Okay. [51:57] And so, yeah. So, now whether it's inner [51:59] or outer, it feels real. In fact, I'm [52:02] going to put two objects side by side [52:03] using the different shadows so we can [52:06] see them like that. [52:08] Now, if we then decide, okay, well, I've [52:12] got this kind of purpley color. Maybe I [52:14] want to change the shadow color. I can [52:16] go into shadow color [52:19] and I can change that to maybe a more [52:23] purpley gray. So, it's picking up a [52:26] little bit of the color of the object. [52:28] That'll especially look good for the [52:29] inner. [52:31] And so I've updated shadow color. And [52:34] maybe I didn't change it to an extreme [52:36] enough color. Okay. I'm going to do I I [52:39] was trying to be subtle and clever and [52:41] pretty, but for visibility sake, I'll [52:44] make it a bit more extreme. [52:46] Okay. So then I update the shadow color [52:48] and it updates across all of my shadows. [52:52] What you can also do in shadow tokens [52:56] given that I have given these the same [53:00] uh values if they were both also if I [53:04] want to create another shadow [53:07] um I'll give it a more semantic name. So [53:10] maybe this is shadows for button. So [53:13] it's shadow.button. [53:14] And then I can use this here to [53:17] reference another token. So to all of my [53:20] button shadows, I want them to use the [53:23] shadow outer style. And you see it's got [53:25] a nice little preview of those styles [53:27] that are going to be applied there. So [53:29] that's also a really useful feature that [53:31] you can reference other tokens, other [53:34] composite tokens inside of your shadow [53:39] composite tokens. [53:41] Right. So let's get to the final Q&A. [53:45] Come on, let's have some questions, [53:47] please. Does anyone have any final [53:50] questions for our final Q&A? [53:58] Please, can I clip or mask a large bold [54:02] text with an image to have an image [54:05] fill? So, you want large bold text with [54:07] an image fill. It's not related, but I [54:10] can show you how. Okay. So, let me [54:14] create I was actually just doing a demo [54:16] that did this the other day, [54:18] coincidentally. [54:20] So, large bold text for the sake of [54:24] relevance to design tokens. I'm going to [54:27] use one of my design tokens [54:30] for this. Oh, the font style does not [54:32] exist in this current one. Uh, it's cuz [54:35] I haven't applied. There we go. [54:39] make it actually large by zooming in. [54:42] Right, let's find an image. Uh, this is [54:44] the plugins panel if you haven't used it [54:46] before. Uh, good place to find some [54:48] images. Um, I've got some plugins for [54:51] this. Uh, free stock image search [54:53] plugin. It's a handy one. Okay. What's a [54:56] cool image? Let's look for a color [54:59] palette related image. Let's put [55:01] palette. [55:02] See, we get some nice painty looking [55:04] things. Okay. Makeup palette as well. [55:07] Oh, that was a bad choice. [55:09] I want something a bit more textured. [55:11] Uh, how about rainforest? [55:16] There we go. Okay. So, I'm going to grab [55:20] this image [55:22] and it should put it on the canvas. It's [55:25] absolutely [55:26] enormous. [55:28] So, I'm going to shrink that down a [55:30] little bit. [55:32] So, it's roughly the size of my text. [55:36] Make sure. Oh, I managed to get it [55:37] twice. So much good. There we go. [55:42] Shrink that down. [55:46] Shrink it down so it just about covers [55:49] the text. [55:51] Okay. Now, there are a couple of ways [55:53] that you could do this. Um, but I'm [55:55] going to show you the way using masking. [55:57] And so, I want to put that underneath [56:00] and select both uh layers. And then I'm [56:05] going to choose to mask. Oh, I always do [56:08] that the wrong way around for some [56:10] reason. There we go. [56:13] So, I've used mask in the layers. It's [56:16] maybe not the best image to show how you [56:20] do that, but if you zoom in, you can see [56:24] my text is being masked inside of the [56:28] text. I hope that answered your [56:30] question. Let me know if it didn't. Do [56:33] we have any other questions? [56:40] Can typography composite tokens [56:42] reference other typography composite [56:44] tokens? Hey, we can jump in and actually [56:46] see. So, we go into the tokens panel and [56:50] we'll go to our typography token. You [56:53] see we have that button there the same [56:56] as we do have in the composite shadows [57:00] and we can reference another typography [57:02] token in that way. So that's useful if [57:06] you are [57:08] you maybe have a text default theme but [57:11] I want to create a typography for labels [57:16] and so I might have text label. It uses [57:19] the same style as text.default default [57:21] for now. And so I reference [57:24] text.default. And then maybe later on I [57:26] decide that maybe I want to treat my [57:28] labels differently. And then I can just [57:31] edit that text. [57:34] And I can break the reference to the [57:38] text. Default. That was a lot of talking [57:40] without showing. So I hope that made [57:42] sense. Um great. Well, oh, does Pampot [57:48] provide a font table so particular [57:50] glyphs can be selected? That's a very [57:51] similar question to what we had earlier. [57:54] So, you can either rewind back, but I [57:57] can tell you not right now. It doesn't. [58:00] Um, but I do think that is a really cool [58:02] feature request. It would make a lot of [58:03] sense for folks working on the web. And [58:07] so, if uh if you want to request that as [58:11] a feature, like I'll plus one you on [58:14] that one. If you go to the penot [58:15] community, it's a really great place to [58:17] share any feature requests you have. Um, [58:21] anything that you're struggling to [58:23] create in penot. I like to hang out [58:25] there quite a lot as well. And so that's [58:28] a great place to be able to share your [58:30] use cases and a bit more information as [58:32] well to help the team understand exactly [58:35] what you need. So, um, that's time to [58:40] wrap up, I suppose. Um, so don't forget [58:42] to check out shadow tokens in pimple as [58:45] well. Typography tokens have been in for [58:47] a little bit, but shadow tokens, they [58:49] are very, very new. Um, there is also, [58:52] as I mentioned earlier, an update to the [58:54] starter design tokens kit now in [58:58] libraries and templates that now has [58:59] typography tokens and it has shadow [59:02] tokens as well. I've also created some [59:05] starter kits for color tokens and color [59:09] assets. You can find that there. And if [59:11] you hop on over to the penot blog, you [59:14] can find me doing a deep dive into what [59:16] are the differences between color tokens [59:19] and color assets. I know that's a common [59:21] question in penot, so I've tried to [59:23] answer it. I even did a nice comparison [59:25] table for you. Uh the next hands-on will [59:29] be next month, so you haven't got long [59:31] to wait. Make sure that you follow us or [59:34] subscribe to us or whatever you do on [59:37] whatever platform you're watching this [59:39] on. and you will be the first to know [59:41] about the topic of the next section. [59:44] Thank you so much for joining me. Thank [59:46] you to those of us who joined us live [59:48] and ask questions. I really appreciate [59:50] it. You mean that I'm not just sitting [59:52] here talking to myself. Have a great [59:55] rest of your week. Goodbye.