Smashing Newsletter: Issue #507

Editorial

Some little helpers stay with you forever. I vividly remember discovering Eric Meyer’s Color Blender around a decade or so ago, which was just a helpful little tool to generate mid-point hex values between two colors. I’ve been using this little tool repeatedly throughout these years, and it saved me days — if not weeks — of my life.

Tools just like that — useful little helpers — can really boost workflow. In this newsletter, we highlight a few helpful tools and references. Hopefully, they will become your regular companions in generating design tokens and motion primitives, looking up dashboard layouts, or checking WCAG guidelines.

In Smashing news, I’d love to warmheartedly invite you to our upcoming in-person workshops at SmashingConf New York and SmashingConf Antwerp later this year.

Of course, until then, we also have a few other wonderful workshops and conferences coming up:

🌍 Online: Accessibility for Designers (June 16–24) with Stéphanie Walter
🌍 Online: How To Measure UX and Design Impact (May 12–20) with Vitaly Friedman
🇺🇸 New York (June 23): Design Patterns For Complex UIs and AI (in-person) with Vitaly Friedman
🇺🇸 New York (June 24): The New CSS Toolkit (in-person) with Kevin Powell

Also, coming up on May 29: Meets for Work. We’ll be talking about a topic very close to everyone: work! How do you find the job you’ve always wanted? How can you work best with difficult folks? Christine Vallaure, Silke Bochat, Jason Mesut, and Geoff Graham share their experiences and pointers on achieving your work goals in life.

Happy designing, everyone — and sending you lots of good vibes and positive thinking your way!

— Vitaly

1. 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 handy 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, the tool 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)

2. InspoGen

Looking for some fresh inspiration? Then InspoGen might be for you. Created by Envato, the tool lets you explore design inspiration. No stock assets, only completed projects, handpicked by designers.

InspoGen presents the design artifacts in a 3D space where you can scroll, drag, and zoom until something catches your eye. When you click on an artifact — or “spark,” as InspoGen calls it — you see similar ideas. You can share a spark, view its source, and save your favorites to a board. InspoGen is free to explore. A wonderful source to discover new design inspiration. (cm)

3. UI Kit For Animated Interfaces

When Julien Thibeaut struggled to find animated components that are suitable for real-world projects, he decided to fill this gap. The result of his efforts is Motion-Primitives, an open-source UI kit that makes it easy for engineers and designers to create animated interfaces.

From core components like accordions and carousels to text and number effects, interactive elements, and toolbars, each component in the UI kit has examples and a detailed documentation. You can copy and paste the code to use the components as they are or easily modify them to align with your design system or project’s requirements. The animated components are built with Motion and Tailwind CSS. New ones are released regularly. (cm)

4. Website Headlines Inspiration

Writing a good headline is a challenge. You have only a few words to get your message across and show your product’s personality and what it can offer to users. If you’re looking for some inspiration, Websiteheadlines.com collects good headline examples from across the web. And not only that. It also has got your back if you’re looking for a specific kind of headline.

All the headlines in the library are tagged. You can filter them by structure to see only headlines that use a certain rhetorical device, stylistic technique, or formula to shape their form and style, or, if you prefer, filter by underlying message and emotional appeal. A treasure chest of copywriting inspiration. (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.

Smashing Online Events — With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s a quick overview:

Figma Unlocked: What’s New from Config Free
with Christina Vallaure. May 23
Design Patterns For AI Interfaces UX
with Vitaly Friedman. Jun 4–18
Accessibility for Designers UX
with Stéphanie Walter. Jun 16–24
Figma Workflow Masterclass Design
with Christina Vallaure. July 23–29
Building Interactive, Accessible Components with Modern CSS & JS Dev
with Stephanie Eckles. Aug 18–27
UX Strategy Masterclass UX
with Vitaly Friedman. Aug 20–29
A Practical Guide To UX Metrics & Design KPIs UX
(8h Videos + Live Training) with Vitaly Friedman.
Jump to all workshops →

6. Charts And Dashboards Cheat Sheets

A good chart doesn’t just visualize data. It provides accurate and meaningful insights and is easy to understand and accessible. A fantastic overview of guidelines and best practices on data visualization is the Data And Analytics Songbooks Miro Board that Anastasiya Kuznetsova and Alex Barakov created.

The board puts together the wonderful work that Lisa Charlotte Muth, Aurélien Vautier, and Piotr Czarnas share on all things data visualization — from color choice and color scale to colorblindness, text and data requirements. Some creators write books, release tools, record courses, and run training sessions, so please follow them and support their incredible work in every way you can. (cm)

7. WCAG In Plain English

Do you struggle with the official WCAG documentation? You are not alone! WCAG in Plain English makes the WCAG accessibility standards approachable for everyone, not just experts. It is, of course, not a replacement for the official guidelines but a great way to finally make sense of them.

Created by the team at accessibility testing tool AAArdvark, “WCAG in Plain English” makes each accessibility criterion easy to understand, with a rundown of why it matters and who is affected, implementation tips, and examples. You can filter the criteria by responsibility (code, content, design) and who is affected. A handy little helper. (cm)

8. Recently Published Books 📚

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.

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. Have you checked them out already?

Success at Scale by Addy Osmani
Understanding Privacy by Heather Burns
Touch Design for Mobile Interfaces by Steven Hoober
Check out all books →

Meet our newest book: Success At Scale by Addy Osmani. Get the book or browse the complete library.

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).

May 13, 2025 Smashing Newsletter: Issue #507

Previous Issues