Naming things in design and software development is notoriously difficult. The language teams use shapes not only how they think about digital products, but also the conversations they have during the creation process. This underlying challenge is often the root cause of frequent confusion surrounding colors, icons, user interface components, and features. It is precisely why designers and developers alike struggle to agree on names for design tokens, HTML classes, and code variables.
When choosing names, teams often fall into two distinct traps. Sometimes, the names chosen are far too generic, making it difficult to understand what is actually meant within a specific context. On other occasions, they are far too specific, leaving little room for flexibility, scalability, and reuse across different parts of a project. Addressing this persistent industry hurdle requires examining the best strategies, resources, and mental models currently available for naming everything from basic code snippets to comprehensive multi-brand design systems.
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, developer Paul Robert Lloyd created Classnames, a resource jam-packed with alternative ideas. The platform provides thematically grouped lists of words that are ideal for naming elements in code.
Users can find terms to describe different kinds of behavior, visual likeness between elements, order, grouping, and association. Beyond standard technical terminology, the site features themed collections of words drawn from nature, art, theater, music, architecture, fashion, and publishing—vocabulary that would not instantly come to mind when writing code, but which can inject fresh clarity and poetic logic into a codebase.
How To Name Colors
Choosing the right name for a specific color value is another common obstacle in digital design. Fortunately, David Aerne maintains a massive repository of color names known as Color Names, which currently catalogs over 30,000 unique color designations sourced from various references and thousands of user contributions.
The repository features an integrated color picker and name search tool, alongside a variety of related pickers. This extensive database serves as a fantastic reference to keep nearby, helping teams move away from monotonous hex codes or overly simplistic color labels toward a richer palette of descriptive terminology.
How To Name Layers and Groups
Establishing consistency in digital files is vital for collaboration. Javier Cuello recently summarized a comprehensive set of naming best practices designed to help teams name layers, groups, and components in a consistent, scalable manner.
As Cuello outlines, an effective name possesses a logical structure, remains concise and meaningful, is universally understood across the team, and avoids direct ties to temporary visual properties. By establishing clear do’s and don’ts, Cuello addresses the fine details creators must consider when naming sizes, colors, groups, layers, and components within modern design tools.
How To Name Design Tokens
Building a flexible design token taxonomy that functions seamlessly across vastly different products is a complex organizational challenge. This was the exact hurdle faced by the team at Intuit, the parent company behind major brands such as Mailchimp, QuickBooks, TurboTax, and Mint. The organization developed a flexible token system designed to extend far beyond a single brand theme, acting as a foundational system for a wide array of digital products.
Nate Baldwin published a detailed case study sharing valuable insights into the creation of Intuit’s design token taxonomy. His work dives deep into the pain points of their legacy taxonomy system, the rigorous criteria defined for the new architecture, and the step-by-step creation process, offering substantial takeaways for organizations looking to build robust and adaptable token structures of their own.
Frequent Names For UI Components
When struggling with nomenclature, examining what other design systems call similar elements is often the most effective starting point. To help teams avoid falling down a research rabbit hole, Iain Bean developed the Component Gallery, an exhaustive library dedicated to real-world interface components.
The collection features concrete examples for more than fifty UI components—ranging from basic accordions to visually hidden utility classes—while also cataloging alternative names that these components go by across various digital products. Additionally, tools like Name That UI serve as a visual dictionary of common interface elements, helping bridge the gap between design and development teams.
How To Name New Features
New features frequently suffer from low user adoption due to poor discoverability. Feature adoption is a gradual process: a new addition must first be discovered, then understood, tried, learned, and eventually integrated into a user’s existing workflow. Erin Gannon addressed these challenges in a practical guide focused on ensuring features achieve their intended purpose.
According to Gannon, effective feature names are driven by user needs and problems. They should clearly signal the value or outcome of a feature—focusing on the job-to-be-done—and tap directly into the user’s own language. By asking users to explain a feature in their own words and adopting that vocabulary, product teams can drastically improve clarity and engagement.
How To Name Variables and Taxonomy Maps
Complex multi-brand, multi-themed design systems require sophisticated structural mapping. An exemplary model comes from the Vodafone UK Design System team, whose Variables Taxonomy Map breaks down the anatomy and categorization of a design token into an orchestrated system of collections.
The map illustrates the four distinct collections required to support their ecosystem—moving gracefully from brand and primitives to semantics and pages. Building upon Nathan Curtis’s foundational work on naming design tokens, this approach enables team members to instantly understand where a token is used and what it represents simply by reading its name. Additional approaches can be found across various community Figma kits and resources dedicated to design token architecture.
Design Token Naming Guide and Inventory
To further assist practitioners, Romina Kavcic created an interactive tool for naming design tokens. The platform guides users through the fundamentals of how tokens work and how to name them effectively, allowing them to configure custom naming structures incorporating components, categories, states, and roles.
Complementing this guide is the Design Token Names Inventory spreadsheet, which utilizes a simple four-level structure to provide a bird’s-eye view of an entire token library. The layout allows teams to easily incorporate new rows, themes, and modes without losing track of their data, while offering robust filtering capabilities.
Naming Products and Services
For teams searching for the right name for an entirely new product or service, Onym serves as an open-source repository organizing tools, brainstorming methodologies, vetting strategies, guides, design sprints, and etymological resources. It also highlights cautionary tales and introduces specialized naming agencies alongside recommended reading materials for brand architects.
Wrapping Up
Ultimately, the right name is simply the one that is universally understood and actively used by both the internal team and the end users. A significant amount of working time is frequently wasted when colleagues speak about the exact same concept using different dialects—the designer’s dialect, the developer’s dialect, the product manager’s dialect, and the user’s dialect. This linguistic disconnect is often the root cause of workplace frustration and confusion.
When digital products experience low user adoption, the underlying issue may stem entirely from confusing terminology. Identifying and addressing potential naming conflicts by maintaining a dedicated backlog can significantly reduce friction and help multidisciplinary teams collaborate more effectively.
