October 14, 2025 Smashing Newsletter: Issue #529
This newsletter issue was sent out to 183,702 subscribers on Tuesday, October 14, 2025.
Editorial
Design systems! In today’s newsletter, we dive into practical techniques that prioritize work on design systems, naming structures for your design tokens, and adding handy additions to your design system toolbox. If you’re working on or with a design system, this newsletter might be useful for you.
This month, we’re launching two new online workshops and in-person workshops in Berlin — a great opportunity to sharpen your skills in a hands-on, collaborative setting:
- 🎛️ Designing For Complex UI in 2026 (Oct 27)
- ⏳ How To Measure UX and Design Impact (Oct 28)
For now, though, let’s dive into obscure but impressive design systems out there! Happy designing, everyone!
— Vitaly
1. Design System Tactics
How do you set up a strategy for a design system? How to introduce new components? And how to document and validate the system? Whether you’re at the very beginning of your design system journey or maintaining a mature system, Ness Grixti’s growing collection of Design System Tactics helps you make progress at every stage of the process.
The tactics are divided into seven categories, ranging from strategy and setup to system validation. Covering the very basics, just like the more nuanced problems you might encounter when working on a design system, they help you reduce friction, improve collaboration, and create a design system that people will love to use. (cm)
2. Design System Inventory Workshop
Which components in your product can be reused effectively? And which should be replaced with standardized options from the design system? A design system inventory helps you determine exactly that, and Farid Sabitov created a useful FigJam template to help you run a design system inventory workshop with your team.
The inventory workshop focuses on analyzing your product by mapping out a product sitemap, taking screenshots of its various pages, and reviewing them together to uncover inconsistencies that can be streamlined into standardized versions. A great foundation to prioritize which components to develop, refine, or unify.
Farid is currently working on yet another useful design system resource: an open-source design system maturity model and process map that captures the key stages, actors, activities, and deliverables involved in building and scaling a design system. If you’re interested in early access or want to help refine it with real-world feedback, you can get in touch with Farid on LinkedIn. (cm)
3. Prioritizing Design System Work
Once a design system has been well-adopted by designers and engineers, there’s a new challenge that design system teams often face: prioritizing requests. Alexander Fandén and the design system team at Agoda were in the same situation and developed a prioritization framework that not only helps them prioritize requests but also improves internal communication with the teams who rely on the design system for their day-to-day work.
In his article “Prioritizing Design Systems,” Alexander walks you step by step through his team’s approach and shares key learnings and tips to help you get started with a similar process if you’re facing similar challenges. If you plan to set up your own framework and processes, also take a look at the templates and references that the Agoda team prepared to get you started. (cm)
4. A Different Approach To Type Systems
Getting typography on the web right can be quite challenging, given all the unpredictabilities that a responsive environment brings along. Systemized solutions like 4px grids or component libraries help designers restore order, but as convenient as a tidy set of tokens and ratios can be, there are certain nuances that can’t be captured by standardizations and measurements: human perception, balance, and subtle adjustments, for example.
When the team at Daybreak Studio set out to design a type system for the prompt engineering tool Adaline, they put a special focus on these often-underestimated nuances to create a system that achieves optimal precision. They published a case study in which they share valuable insights into their approach and how they managed to get text readability, balance, vertical rhythm, baselines, and naming just right to serve meaning and respond thoughtfully to the needs of the product. A must-read for everyone who wants to lift their typography to the next level. (cm)
5. Upcoming Workshops and Conferences
That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.
As always, here’s a quick overview:
- Live UX Training + video course UX
with Vitaly Friedman. Oct 17 – Nov 17 - Designing Better Products Masterclass UX UX
with Stéphanie Walter. Oct 21 – Nov 4 - Design Patterns For AI Interfaces UX UX
with Vitaly Friedman. Oct 30 – Nov 13 - Design Patterns For AI Interfaces.
Video course with Vitaly Friedman (+ live UX training). - Jump to all workshops →
6. Design Tokens Name Generator
Naming things can be hard, particularly in a design system where you want to create naming conventions that are consistent and scalable. Romina Kavcic created a useful tool to make experimenting with different naming structures for your design tokens easy: the Design Tokens Name Generator.
To create a naming convention, the tool lets you adjust different parameters, then add components, categories, and specific roles, as well as the states you want to include in your token structure. Based on these settings, it instantly generates a list of tokens, with appropriate random values and proper token types. Perfect for anyone who wants to refine their token naming strategy or establish one from scratch. (cm)
7. Design System Component Audit
How to maintain consistency in a design system? Luis Ouriach built a powerful Figma widget that does the heavy lifting for you. It audits and analyzes your design system components to ensure consistency and identify potential issues in your component library.
The Figma Component Audit Widget can run a quick scan to give you a summary of your component library across all pages. You can also view total pages, unique components, variants, and missing metadata, identify components with hardcoded values instead of design tokens, and check for missing descriptions and documentation links. A handy addition to your design system toolbox. (cm)
8. Meet Accessible UX Research, A Brand-New Smashing Book 📚
In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. For our newest book, we have teamed up with Dr. Michele A. Williams: Meet “Accessible UX Research.”
“Accessible UX Research” is your practical guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. Print edition shipping Fall 2025. eBook also available for download in Fall 2025. Pre-order the book, and save off the full price.
That’s All, Folks!
Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!
This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.