Naming is universally acknowledged as one of the hardest challenges in software development and digital design. The language teams use shapes not only how they think about digital architecture, but also the conversations they have around building products. This fundamental friction frequently leads to widespread confusion regarding colors, icons, user interface components, and features. Ultimately, it explains why designers and developers alike constantly struggle to agree on nomenclature for design tokens, HTML classes, and variables.
Often, the names chosen are either far too generic, making it difficult to understand the exact intent, or excessively specific, leaving little room for flexibility, scaling, and reuse. Navigating this delicate balance requires understanding which naming conventions work best and leveraging established resources across the industry.
How To Name Things
Finding inspiration for naming HTML classes, CSS properties, or JavaScript functions can often feel like hitting a creative wall. To help professionals think outside the box, Paul Robert Lloyd created Classnames, a resource jam-packed with alternative ideas. The site provides thematically grouped lists of words that are ideally suited for coding environments.
Users can find terms describing different kinds of behavior, likeness between things, order, grouping, and association. Furthermore, the platform offers themed collections of words that might not instantly come to mind in a technical context, drawing inspiration from nature, art, theater, music, architecture, fashion, and publishing.
How To Name Colors
Choosing the right name for a given color value presents another unique challenge. Fortunately, David Aerne maintains a massive repository of color names known as color-names, which currently boasts over 30,300 unique color monikers sourced from various references and thousands of user contributions.
This comprehensive repository comes equipped with an integrated color picker and name search functionality through tools like Color Parrot, originally launched via social media and accessible via direct URL inputs. This robust ecosystem serves as an invaluable reference to keep nearby when establishing color palettes for digital products.
How To Name Layers and Groups
Establishing consistency in file architecture requires clear guidelines for organizing visual assets. Javier Cuello summarized a comprehensive set of naming best practices designed to help teams name layers, groups, and components in a consistent and scalable way.
As Cuello points out, an effective name possesses a logical structure, remains concise and meaningful, is universally understood across cross-functional teams, and avoids direct ties to temporary visual properties. By outlining clear do’s and don’ts, Cuello’s guidelines illustrate how to handle the fine details required when categorizing sizes, colors, groups, layers, and components within modern design software.
How To Name Design Tokens
Building a flexible design token taxonomy that functions seamlessly across multiple products presents a major organizational hurdle. This was the exact challenge faced by the team at Intuit, the parent company behind major financial and productivity products such as Mailchimp, QuickBooks, TurboTax, and Mint. To solve this, the company developed a flexible token system extending far beyond a single brand theme, serving instead as a foundational architecture for a wide array of products.
Nate Baldwin detailed these efforts in a comprehensive case study sharing valuable insights into the creation of Intuit’s design token taxonomy. The resource dives deep into the pain points of older taxonomy systems, the criteria established for the new structure, and the step-by-step creation process, offering substantial takeaways for organizations seeking to build their own robust and flexible token systems.
Frequent Names For UI Components
Observing the terminology used by other organizations is often the most effective starting point when struggling with component nomenclature. To prevent teams from getting lost down the design system rabbit hole, Iain Bean conducted extensive research to curate the Component Gallery.
This repository collects interface components derived from real-world design systems, offering plenty of real-world examples for more than fifty UI components—ranging from basic accordions to accessibility-focused visually hidden elements. Alongside visual examples, the gallery lists alternative names that these UI components go by in different organizations, making it a critical reference for product teams. Additionally, Name That UI functions as a helpful visual dictionary for these common interface elements.
How To Name New Features
New features frequently suffer from low user adoption due to poor discoverability. Feature adoption is a gradual process that requires a feature to be discovered first, then understood, tried, learned, and eventually integrated into an existing user workflow. Erin Gannon addressed this challenge by publishing a practical guide focused on ensuring that every phase of this journey succeeds.
According to Gannon, effective feature names are driven by actual user needs and problems. They should signal the core value or outcome of a feature—effectively addressing the job-to-be-done—and tap directly into the language used by the audience. By asking users to explain a feature in their own words, product teams can adopt natural terminology that resonates immediately with consumers.
How To Name Variables and Taxonomy Maps
Complex multi-brand and multi-themed design systems demand advanced organizational structures. A prime example comes from the Vodafone UK Design System team, whose Variables Taxonomy Map breaks down the anatomy and categorization of design tokens into an organized system of collections.
The map illustrates the four core collections required to support a scalable system, mapping connections between tokens from brand foundations and primitives down to semantics and page-level implementations. Building upon Nathan Curtis’s foundational work on naming design tokens in design systems, this approach ensures that anyone can instantly gather insight into where a token is used and what it represents based solely on its name. Additional approaches can be found across various Figma kits and community resources.
Design Token Naming Guide and Inventory
Romina Kavcic developed a practical tool focused on naming design tokens, helping teams understand how they function and how to configure custom naming structures incorporating components, categories, states, and roles.
Complementing this guide is the Design Token Names Inventory spreadsheet, which utilizes a straightforward four-level structure to provide a bird’s-eye view of all design tokens within a system. This framework allows teams to easily add rows, themes, and modes without losing track of their architecture, enabling seamless filtering across complex token libraries.
Naming Products or Services
When searching for the right name for a new product or service, Onym serves as an open-source repository organizing tools and resources for brainstorming, vetting, methodology guides, sprints, and etymologies. It aggregates cautionary tales, lists of naming agencies, and recommended literature to assist teams through the naming lifecycle.
Wrapping up these insights, industry experts emphasize that the ideal name is ultimately the one that is clearly understood and actively used by both the internal team and the end users. A significant amount of time is frequently wasted when designers, developers, product managers, and users speak about the exact same concept using entirely different internal dialects. Recognizing and addressing these communication silos and potential naming conflicts can significantly reduce frustration, eliminate confusion, and improve cross-functional collaboration across modern product teams.
