Naming is fundamentally hard, yet it shapes the very way we think about digital products and dictates the quality of conversations among cross-functional teams. Across the software development and design landscape, widespread confusion persists around how to label colors, icons, user interface components, and features. This perennial struggle extends into the technical stack, complicating the task of assigning clear, scalable identifiers to design tokens, HTML classes, and variables.
Often, the labels chosen during the design and development phases fall into two extremes. They are either too generic, making it exceedingly difficult to understand their precise intent or context, or they are too specific, leaving little room for flexibility, maintenance, and reuse down the line. To address these systemic hurdles, a growing collection of industry guides, inventories, and community-driven repositories have emerged to help designers and developers choose the right nomenclature and establish robust, scalable naming conventions.
How To Name Things
When developers and designers search for inspiration when naming HTML classes, CSS properties, or JavaScript functions, resources like Classnames offer a creative departure from conventional terminology. Created by Paul Robert Lloyd, the platform provides thematically grouped lists of words designed to encourage teams to think outside the box.
The site curates terms that describe behavior, likeness, order, grouping, and association, alongside unexpected thematic collections drawn from nature, art, theater, music, architecture, fashion, and publishing. By looking beyond standard technical jargon, teams can discover descriptive and evocative language that brings clarity and personality to their codebase without sacrificing readability.
How To Name Colors
Choosing the right name for a specific color value remains one of the most subjective challenges in digital design. To bring standardization and creativity to color palettes, David Aerne maintains a massive repository of color names known simply as color-names. The project currently catalogs over 30,000 unique color names, synthesized from various historical references and thousands of individual user contributions.
Accompanied by interactive tools such as color pickers and name search utilities, the repository serves as a critical reference point for teams striving to move away from arbitrary hex codes or overly literal numbering systems. By establishing a shared vocabulary for hues and shades, developers and designers can bridge the gap between visual aesthetics and code implementation.
How To Name Layers and Groups
Establishing consistency within design files is just as crucial as maintaining clean codebases. Javier Cuello recently synthesized a comprehensive set of naming best practices aimed at helping teams structure their layers, groups, and components in a consistent, scalable manner.
According to Cuello, an effective name possesses a logical structure while remaining concise, meaningful, universally understood, and detached from transient visual properties. His guidelines outline specific do’s and don’ts that examine the fine details of organizing sizes, colors, component states, and nested layouts, ensuring that design files remain navigable as products scale.
How To Name Design Tokens
As design systems grow to support multiple brands and platforms, building a flexible token taxonomy becomes an organizational imperative. This exact challenge was faced by the team at Intuit, the parent organization behind products like Mailchimp, QuickBooks, TurboTax, and Mint. To unify these diverse ecosystems, the company developed a flexible token system designed to serve as a foundational architecture stretching far beyond individual brand themes.
Nate Baldwin detailed the creation of Intuit’s design token taxonomy in a comprehensive case study, outlining the friction points of their legacy systems and establishing new criteria for modern token architecture. The insights provide valuable takeaways for organizations looking to construct robust, resilient token taxonomies that can adapt to future product expansions.
Frequent Names For UI Components
When teams struggle to name interface elements, examining how other mature design systems handle identical patterns is often the most pragmatic starting point. To save practitioners from getting lost in the design system research rabbit hole, Iain Bean developed the Component Gallery.
The gallery collects interface components from real-world design systems, providing concrete examples for more than 50 distinct UI components—ranging from standard accordions to complex accessibility patterns like visually hidden content. Crucially, the platform also catalogs the alternative names these components go by across different organizations, serving as an invaluable cross-reference for both designers and developers. Additional visual dictionaries, such as Name That UI, further assist teams in identifying common interface elements at a glance.
How To Name New Features
Low feature adoption is frequently tied not to the utility of the feature itself, but to poor discoverability and confusing nomenclature. Achieving feature adoption requires a deliberate journey: users must first discover a feature, understand its value, try it out, learn its mechanics, and eventually integrate it into their existing workflows.
Erin Gannon addressed this challenge in a practical guide examining how to name features so that users can actually discover, understand, and use them. Gannon argues that successful names are fundamentally driven by user needs and underlying problems. They must signal the ultimate value or outcome of a feature—tapping directly into the user’s "job-to-be-done"—while adopting the everyday language of the user base rather than internal corporate terminology.
How To Name Variables and Taxonomy Maps
Complex multi-brand and multi-themed ecosystems demand sophisticated structural approaches to variable management. 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 design tokens into a meticulously organized system of collections.
The map illustrates the four core collections required to support a modern multi-brand architecture, charting the connections between brand values, primitives, semantics, and page-level implementations. Building upon foundational frameworks established by industry experts like Nathan Curtis, the Vodafone taxonomy enables team members to instantly understand where a token is utilized and what it represents based solely on its structured name. Additional resources, such as Romina Kavcic’s Design Token Naming Guide and Token Names Inventory spreadsheet, provide practitioners with interactive tools and bird’s-eye spreadsheet structures to manage tokens across multiple themes and modes.
Naming Products and Services
Moving beyond code and interface components, naming an overarching product or service requires an entirely different strategic approach. Open-source repositories like Onym aggregate tools, brainstorming methodologies, vetting frameworks, sprints, etymological guides, and cautionary industry tales to assist teams through the high-stakes process of naming new ventures.
Wrapping Up
Ultimately, the correct name for any UI component, token, or feature is the one that is universally understood and actively shared between the team and its users. Vast amounts of time are frequently lost when stakeholders speak about identical concepts using disconnected dialects—the designer’s dialect, the developer’s dialect, the product manager’s dialect, and the user’s dialect. This linguistic fragmentation is a primary driver of workplace friction and confusion.
Recognizing that low feature adoption or integration friction can stem entirely from poor nomenclature allows teams to address these roadblocks proactively. By maintaining a backlog for resolving naming conflicts and standardizing terminology across disciplines, organizations can significantly reduce confusion and foster more collaborative, efficient workflows.
