Naming is hard. The language we use shapes not only the way we think about things, but also the conversations we have around them. That is why so much confusion persists regarding colors, icons, UI components, and features. It is also why designers and developers constantly struggle to establish clear names for design tokens, HTML classes, and variables.
Often, the names chosen are too generic, making it difficult to understand what is actually meant. At other times, they are too specific, leaving little room for flexibility and future reuse. Choosing the right names and finding which naming conventions work best remain central challenges in modern web development and product design. A comprehensive collection of practical resources, naming conventions, and structures has emerged to help teams tackle these very issues, streamlining workflows across the industry.
How To Name Things
For professionals seeking inspiration when naming HTML classes, CSS properties, or JavaScript functions, specialized resources like Classnames offer a wealth of ideas designed to encourage thinking outside the box. The platform provides thematically grouped lists of words tailored specifically for naming entities in code.
Users can find terms describing different kinds of behavior, likeness between things, order, grouping, and association. Furthermore, it features themed collections of words that might not instantly come to mind in a programming context, including terms drawn from nature, art, theater, music, architecture, fashion, and publishing.
How To Name Colors
Choosing the right name for a specific color can often feel like guesswork. Fortunately, David Aerne maintains a massive repository of color names featuring over 30,000 unique designations sourced from various references and thousands of user contributions.
This repository includes a fully functional color picker and name search tool alongside numerous alternative color pickers. This extensive collection serves as a fantastic reference for teams looking to establish consistent color palettes without relying solely on arbitrary hex codes or overly restrictive descriptions.
How To Name Layers and Groups
Establishing what makes a good name is crucial for maintaining organized project files. Javier Cuello previously summarized a set of naming best practices aimed at helping teams name their layers, groups, and components in a consistent and scalable way.
As Cuello points out, an effective name possesses a logical structure, remains short and meaningful, is universally understood by everyone on the team, and avoids direct ties to temporary visual properties. By outlining clear do’s and don’ts, these guidelines illustrate how to achieve structural clarity while accounting for the fine details required when naming sizes, colors, groups, layers, and components.
How To Name Design Tokens
Building a flexible design token taxonomy that functions seamlessly across multiple products presents a significant organizational hurdle. This was the exact challenge faced by the team at Intuit, the parent company behind major brands 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 infrastructure for a wide array of digital products.
Nate Baldwin detailed these efforts in a comprehensive case study sharing insights into the creation of Intuit’s design token taxonomy. The resource dives deeply into the pain points of older taxonomy systems, the criteria defined for the modern framework, and the implementation process, offering valuable takeaways for organizations building their own robust and flexible token taxonomies.
Frequent Names For UI Components
Examining established conventions used across other digital products is often the most effective way to start when struggling with nomenclature. Rather than getting lost navigating the broader design system landscape, researchers like Iain Bean have compiled extensive repositories such as the Component Gallery to aggregate standard practices from real-world design systems.
This collection includes concrete examples for more than 50 distinct user interface components, ranging from accordions to visually hidden elements, while also documenting alternative names commonly used across the industry. Additionally, visual dictionaries such as Name That UI provide a helpful reference point for identifying common interface components at a glance.
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 time: a capability must first be discovered, subsequently understood, actively tried, learned, and eventually integrated into a user’s existing workflow. Erin Gannon addressed these challenges in a practical guide outlining how to ensure new functionality actually reaches and engages users.
Effective feature names are ultimately driven by user needs and underlying problems. They should signal the explicit value or outcome of a feature—focusing on the job-to-be-done—while tapping directly into the language used by the audience. By asking users to explain a feature in their own words, product teams can align their naming conventions with actual user expectations.
How To Name Variables and Taxonomy Maps
Complex multi-brand and multi-themed design systems require sophisticated organizational frameworks. A prime example of this comes from the Vodafone UK Design System team, whose published Variables Taxonomy Map breaks down the anatomy and categorization of a design token into an orchestrated system of collections.
The map illustrates the four core collections required to support the system and maps out the connections between tokens, spanning from brand primitives to semantic tokens and page-level implementations. Building upon earlier foundational work by Nathan Curtis regarding design token nomenclature, this system enables team members to immediately understand where a token is utilized and what it represents simply by reading its name. Additional Figma kits and resources continue to emerge, offering alternative approaches to structuring design token architectures.
Romina Kavcic has also contributed to this space by developing specialized tools for naming design tokens. These resources guide practitioners through the mechanics of token structures, helping them configure customized naming hierarchies encompassing components, categories, states, and roles. Complementary spreadsheets, such as dedicated design token inventories, provide a bird’s-eye view of large-scale systems, allowing teams to seamlessly introduce new rows, themes, and modes without losing track of their architecture.
Naming Products and Services
Finding the right name for an overarching product or service requires a different set of methodologies altogether. Open-source repositories like Onym organize tools, brainstorming exercises, vetting frameworks, guides, sprints, and etymological resources to assist teams throughout the naming process. These resources encourage alternative ways of thinking, helping organizations navigate the complexities of product branding.
Wrapping Up
Ultimately, the right name is the one that is well-understood and consistently utilized by both the product team and the end users. Substantial amounts of time are frequently lost when different departments speak about the exact same concept using separate dialects—the designer’s dialect, the developer’s dialect, the product manager’s dialect, and the user’s dialect. This linguistic disconnect remains a primary source of workplace friction and confusion.
When digital features or components suffer from low adoption rates, the root cause is often as simple as unclear nomenclature. By actively identifying potential naming conflicts and maintaining a dedicated backlog to address them, cross-functional teams can significantly reduce confusion and improve overall collaboration.
