Smashing Magazine - #456: How to Name Things

How to name design tokens, colors, UI components, HTML classes and variables. Issue #456 May 14, 2024 View in the browser

Smashing Newsletter

Konbanwa Smashing Friends,

Naming is hard. As designers and developers, we often struggle finding the right name — for design tokens, colors, UI components, HTML classes and variables. Sometimes names are too generic, so it’s difficult to understand what they mean. Or too specific, leaving little room for flexibility and re-use.

In this newsletter, we want to get to the bottom of this. This issue is dedicated to naming — how to choose the right names, naming conventions and with common names for UI components.

Smashing Online Workshops
Meet Front-End & UX Online Workshops, the smashing way.

If you’d like to dive deeper into naming and design tokens, we have an upcoming design token workshop with Nathan Curtis starting on June 6–14, along with a few other online workshops for designers and front-end engineers.

And, of course, we also have our lovely SmashinConfs 2024 coming up later this year, now with more speakers and workshops announced:

Perhaps your friends and colleagues would love to join as well? Please spread the word — and of course, we’ll be absolutely delighted to welcome you to a very special Smashing experience later this year!

Vitaly


1. Inspiration For Naming

Naming things needn’t be hard. If you’re looking for some inspiration for naming HTML classes, CSS properties, or JavaScript functions, Classnames provides you with ideas that get you thinking outside the box.

Classnames

The site provides thematically grouped lists of words perfect for naming. You’ll find terms to describe different kinds of behavior, likeness between things, order, grouping, and association, but also themed collections of words that wouldn’t instantly come to one’s mind when it comes to code, among them words from nature, art, theater, music, architecture, fashion, and publishing. (cm)


2. Naming Conventions

What makes a good name? Javier Cuello summarized a set of naming best practices that help you name your layers, groups and components in a consistent and scalable way.

Naming Conventions

As Javier points out, a good name has a logical structure, is short, meaningful, and known by everyone, and not related to visual properties. He shares do’s and don’ts to illustrate how to achieve that and also takes a closer look at all the fine little details you need to consider when naming sizes, colors, groups, layers, and components. Useful tips that make naming a lot more straightforward. (cm)


3. Naming Design Tokens

So, how to build a flexible design token taxonomy that works across different products? That was the challenge that the team at Intuit faced. Intuit, the company behind popular products such as Mailchimp, Quickbooks, TurboTax, and Mint has developed a flexible token system that goes beyond the brand theme to serve as the foundational system for a wide array of products.

Creating a flexible design token taxonomy for Intuit’s Design System

Nate Baldwin wrote a case study in which he shares valuable insights into the making of Intuit’s design token taxonomy. It dives deeper into the pain points of the old taxonomy system, the criteria they defined for the new system, and how it was created. Lots of takeaways for building your own robust and flexible token taxonomy are guaranteed. (cm)


From our sponsor

Streamline Your Survey And Form Management With SurveyJS

SurveyJS
This suite of open-source JavaScript libraries provides fully customizable survey solutions and seamlessly integrate with any backend system, using JSON for survey metadata and results. Ensure data security and compliance while reducing time-to-market and resource requirements. Try our free demo or explore step-by-step guides to experience the power of SurveyJS!


4. Naming Colors

When you’re creating a color system, you need names for all its facets and uses. Names that everyone on the team can make sense of. But how to achieve that? How do you bring logic to a subjective topic like color? Jess Satell, Staff Content Designer for Adobe’s Spectrum Design System, shares how they master the challenge.

Naming colors in design systems

As Jess explains, the Spectrum color nomenclature uses a combination of color family classifier (e.g., blue or gray) paired with an incremental brightness value scale (50–900) to name colors in a way that is not only logical for everyone involved but also scalable and flexible as the system grows.

Another handy little helper when it comes to naming colors is Color Parrot. The Twitter bot is capable of naming and identifying the colors in any given image. Just mention the bot in a reply, and it will respond with a color palette. (cm)


5. Upcoming Front-End & UX Workshops

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:


6. Common Names For UI Components

Looking at what other people call similar things is a great place to start when you’re struggling with naming. And what better source could there be than other design systems? Before you end up in the design system rabbit hole, Iain Bean did the research for you and created the Component Gallery.

The Component Gallery

The Component Gallery is a collection of interface components from real-world design systems. It includes plenty of examples for more than 50 UI components — from accordion to visually hidden — and also lists other names that the UI components go by. A fantastic resource — not only with regards to naming. (cm)


From our sponsor

From Design Director To Chief Design Officer

Future London Academy
Take your career to the next level with Future London Academy’s MBA for Design Leaders. Learn Business Strategy, Finance and Leadership from Amazon, Dropbox, Zaha Hadid Architects, AKQA, Pentagram, Google and others. A 9‑week immersion with modules in London and California. Only 30 spots. Applications closing soon. Apply today.


7. Variables Taxonomy Map

A fantastic example of naming guidelines for a complex multi-brand, multi-themed design system comes from the Vodafone UK Design System team. Their Variables Taxonomy Map breaks down the anatomy and categorization of a design token into a well-orchestrated system of collections.

Vodafone Variables Taxonomy Map

The map illustrates four collections required to support the system and connections between tokens — from brand and primitives to semantics and pages. It builds on top of Nathan Curtis’ work on naming design tokens and enables everyone to gather insight about where a token is used and what it represents, just from its name.

If you want to explore more approaches to naming design tokens, Vitaly compiled a list of useful Figma kits and resources that are worth checking out. (cm)


8. Design Token Names Inventory

Romina Kavcic created a handy little resource that is bound to give your design token naming workflow a power boost. The Design Token Names Inventory spreadsheet not only makes it easy to ensure consistent naming but also syncs directly to Figma.

Design Token Names Inventory

The spreadsheet has a simple structure with four levels to give you a bird’s-eye view of all your design tokens. You can easily add rows, themes, and modes without losing track and filter your tokens. And while the spreadsheet itself is already a great solution to keep everyone involved on the same page, it plays out its real strength in combination with the Google Spreadsheets plugin or the Kernel plugin. Once installed, the changes you make in the spreadsheet are reflected in Figma. A real timesaver! (cm)


9. 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
It’s here, and it’s shipping! Success At Scale, a new book by Addy Osmani. Get the book or browse the complete library.


10. Recent Smashing Articles


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 Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#455: CSS

Tuesday, May 7, 2024

CSS Masonry Layout, Self-Modifying CSS Variables and Hanging Punctuation Issue #455 • May 7, 2024 • View in the browser Smashing Newsletter Dobryi vechir Smashing Friends, When I first encountered CSS

#454: JavaScript

Tuesday, April 30, 2024

Front-End Engineer Handbook, JavaScript Cheatsheet, File System APIs and Invokers. Issue #454 • Apr 30, 2024 • View in the browser Smashing Newsletter Labas vakaras Smashing Friends, Let's talk

#453: Design Systems

Tuesday, April 23, 2024

Design system generator, types of design systems and how to consolidate design systems. Issue #453 • Apr 23, 2024 • View in the browser Smashing Newsletter Buổi tối vui vẻ Smashing Friends, Ah, design

#452: Design Workflow

Tuesday, April 16, 2024

How to choose the right idea, navigate difficult conversations and communicate design. Issue #452 • Apr 16, 2024 • View in the browser Smashing Newsletter Iyi akşamlar Smashing Friends, Design workflow

#451: Interface Design

Tuesday, April 9, 2024

100 Figma Design Tips, UX challenges, Icon design, context menus, Confirm or Undo. Issue #451 • Apr 9, 2024 • View in the browser Smashing Newsletter Dobrý večer Smashing Friends, If you spend a lot of

You Might Also Like

The Color Trends to Watch: See Our New Trend Report

Wednesday, July 24, 2024

View in your browser | Update your preferences ADPro Image may contain: Furniture, Chair, Interior Design, Indoors, Home Decor, and Rug Inside Our Newest Trend Report “We're in a renaissance of

The One Color Risk Rodman Primack Is Always Willing to Take

Tuesday, July 23, 2024

View in your browser | Update your preferences ADPro Anne Crawford and Dudley DeZonia's Ojai refuge has been on the lips of us editors ever since we first caught a peek at the layouts earlier this

A design business story we can't stop thinking about

Tuesday, July 23, 2024

Hi ya'll, It's been a while since we sent a newsletter outside our standard formats. But last week we were so captivated by a story @Pern Bann's founder @sukrachand told on Instagram that

#466: UX Writing and Content Design

Tuesday, July 23, 2024

Error messages UX, content design system, voice and tone, experience mapping and placeholders. Issue #466 • July 23, 2024 • View in the browser Smashing Newsletter Sveiki Smashing Friends, Content

Accessibility Weekly #406: D & D and Alt Text

Monday, July 22, 2024

July 22, 2024 • Issue #406 View this issue online or browse the full issue archive. Featured: Dungeons & Dragons taught me how to write alt text "The narrative is shared amongst everyone by

The Fog of War of company onboarding

Sunday, July 21, 2024

Issue 204: How a Real-Time Strategy game concept teaches you new hire onboarding ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

168 / Feeling stuck? Open this email to get your creative juices flowing

Friday, July 19, 2024

Product Disrupt Logo Product Disrupt Half-Monthly Jul 2024 • Part 1 View in browser Welcome to Issue 168! I took a short break from publishing as I was in the US last month for Figma's Config,

100 Interior Photographers to Hire Now

Thursday, July 18, 2024

View in your browser | Update your preferences ADPro Ready, Set, Shoot! You've spent months—years, even!—perfecting your client's space. Now it's time to capture it for your portfolio, or (

Do this in your next PR pitch subject line...

Tuesday, July 16, 2024

Exciting announcement before we jump into subject line tips! Along with Nora, Kirsten is now also available for 1-1 consulting. Since we founded Wolf Craft, Nora has worked 1-1 with creatives to help

#465: CSS

Tuesday, July 16, 2024

CSS container queries, style queries, custom functions, native CSS mixins, inline conditionals, transition to auto. Issue #465 • July 16, 2024 • View in the browser Smashing Newsletter Grüezi Smashing