In the digital product ecosystem, a persistent, silent friction costs teams countless hours of productivity, introduces bugs, and alienates users: the art and agony of naming things. Whether trying to pin down a hexadecimal color value, sorting a labyrinth of Figma layers, defining a resilient design token taxonomy, or introducing a brand-new feature to an enterprise platform, language is the primary medium of software engineering and design. Yet, it remains one of our most poorly managed resources.
The core dilemma stems from a semantic balancing act. Choose names that are too generic, and they immediately lose contextual meaning, muddying the codebase and design system alike. Choose names that are too specific, and you trap yourself in rigid silos, crippling future flexibility, component reuse, and scalability. This chronic miscommunication frequently manifests as a Tower of Babel within organizations: designers speak in one dialect, developers in another, product managers in a third, and users in an entirely different vernacular altogether.
Fortunately, the web development and design communities have increasingly rallied to solve this universal challenge. A robust wave of open-source repositories, strategic case studies from tech giants like Intuit and Vodafone, curated component galleries, and theoretical frameworks have emerged to standardize our vocabularies. This comprehensive guide synthesizes the ultimate toolkit for naming UI components, colors, design tokens, layers, features, and even products—providing a definitive roadmap to establish clarity, reduce cognitive load, and harmonize cross-functional teams.
Detailed Chronology: The Evolution of Naming Standards in Digital Design
To understand how the industry arrived at today’s sophisticated taxonomies, we must look backward at how we evolved from chaotic, ad-hoc naming conventions to systematic, tokenized architectures.
Phase 1: The Wild West of Web and UI Design (Early 2000s – 2010s)
In the early days of modern web design and digital prototyping, naming conventions were largely an afterthought. CSS classes were populated by visual descriptions (.red-box, .big-font, .float-left) rather than semantic or structural intent. In design tools like Photoshop and early Sketch, layers were famously left as Rectangle 402 or Group Copy 3. This lack of standardization created massive maintenance debts. When a brand color changed from red to blue, teams had to manually hunt down every instance of .red-box across hundreds of files, leading to cascading styling bugs and profound developer frustration.
Phase 2: The Methodology Boom (2010s – 2020)
As digital products scaled in complexity, the industry recognized that structure was required. This era birthed prominent methodologies such as BEM (Block, Element, Modifier), OOCSS (Object-Oriented CSS), and Atomic Design by Brad Frost. These frameworks attempted to impose rigorous grammatical structures onto HTML and CSS. Simultaneously, design systems began to formalize. Teams started treating UI components as first-class citizens, though they still struggled with cross-platform consistency—designers called an element a "dropdown" in Figma while engineers referred to it as a "select" or "picker" in the codebase.
Phase 3: The Tokenization Era and Modern Taxonomy (2020 – Present)
Today, the conversation has matured beyond simple class selectors into the sophisticated realm of design tokens and multi-brand taxonomies. Propelled by multi-brand design systems at scale—such as those managed by Intuit, Vodafone, and Shopify—the focus has shifted to deep, scalable hierarchies. Modern tooling allows for automated token synchronization between design files (like Figma variables) and code repositories (via tools like Style Dictionary). Naming is no longer just about writing clean code; it is about establishing a shared enterprise vocabulary that bridges design tokens, component architecture, and human psychology.
Supporting Context & Metrics: The Anatomy of Effective Naming
Why do naming conventions fail so frequently, and what separates an intuitive identifier from an obscure one? Javier Cuello, in his definitive guidelines on design best practices, outlines the foundational blueprint for naming layers, groups, and components. According to Cuello, an effective name possesses four distinct characteristics:
- Logical Structure: It follows a predictable, hierarchical pattern.
- Conciseness: It is short and digestible.
- Semantic Meaning: It reflects purpose or structure, never visual properties.
- Universal Recognition: It is instantly understood by everyone on the cross-functional team.
The Cost of Poor Feature and Component Naming
Data from product analytics consistently shows that low feature adoption rates are rarely a sign of a flawed underlying algorithm; instead, they are almost universally symptoms of poor discoverability driven by confusing nomenclature. Feature adoption follows a strict psychological pipeline: discovery, comprehension, trial, habituation, and integration into existing workflows. If a feature’s name fails to signal its core value or "job-to-be-done" in the user’s native language, the pipeline breaks down immediately.
When product teams fail to establish a unified vocabulary, they pay a severe tax in "dialect translation time." Engineers waste cycles translating product requirements into implementation variables; designers waste time reverse-engineering component states; and stakeholders talk past one another because they are using identical terms to describe fundamentally different architectural layers.
Official Strategies, Tools, and Resources
To alleviate these pain points, industry leaders have open-sourced a treasure trove of resources. Below is an inventory of the definitive tools available to modernize your team’s naming strategy across every touchpoint of digital product development.
1. General Inspiration and HTML/CSS Classes
- Classnames (by Paul Robert Lloyd): When you are stuck trying to name a tricky CSS property, JavaScript function, or HTML class, Classnames is an indispensable resource. It provides thematically grouped lists of words that encourage developers to think outside the box. Beyond standard programming terminology, it indexes thematic collections inspired by nature, art, theater, music, architecture, fashion, and publishing.
- Access it here: Classnames
2. Color Naming Systems
- Color Names (by David Aerne / meodai): Naming colors is notoriously subjective. Should a hex code be
#317873orteal-ish? Aerne maintains a massive repository containing over 30,355 unique color names harvested from diverse references and thousands of community contributions. Paired with interactive pickers and search utilities like Color Parrot, this repository eliminates ambiguity in color tokenization. - Access it here: Color Names Repository & Color Parrot
3. UI Component Taxonomies
- The Component Gallery (by Iain Bean): Before reinventing the wheel—or worse, inventing a confusing new name for a standard UI element—consult how top-tier design systems handle it. Iain Bean’s gallery aggregates real-world examples for over 50 UI components, from basic accordions to complex composite widgets, detailing the alternative names each component goes by across different tech stacks.
- Name That UI: A visual dictionary designed specifically to help practitioners quickly identify and correctly label common interface components.
- Access it here: The Component Gallery & Name That UI
4. Design Token Architecture & Taxonomies
Designing a scalable token taxonomy that functions smoothly across a multi-brand, multi-themed ecosystem is a monumental undertaking. Two standout frameworks guide this process:
- Intuit’s Token Case Study: Nate Baldwin details how Intuit engineered a flexible token system serving diverse powerhouse brands like Mailchimp, QuickBooks, and TurboTax, migrating away from legacy pain points toward a bulletproof structural taxonomy.
- Vodafone UK Variables Taxonomy Map: A masterclass in Figma variables structure, illustrating how collections flow seamlessly from brand primitives and semantic tokens down to page-level implementations, building directly upon Nathan Curtis’s foundational token research.
- Design Token Naming Guide & Builder (by Romina Kavcic): An interactive tool and accompanying spreadsheet inventory that provides a clear, four-level bird’s-eye view of design tokens, allowing teams to seamlessly filter, scale, and structure their tokens without losing track of states, roles, and categories.
- Access them here: Intuit Taxonomy Case Study, Vodafone Variables Taxonomy Map, and Design Token Naming Guide.
5. Feature and Product Naming
- "What Do We Call This Thing?" (by Erin Gannon): An illustrated practical guide focused on feature naming. Gannon emphasizes that names must be driven by user research, reflecting the user’s mental model and actual vocabulary rather than internal engineering jargon.
- Onym: An open-source repository organizing brainstorming tools, vetting methodologies, etymologies, and book recommendations specifically tailored for naming digital products and services.
- Access them here: Erin Gannon’s Guide and Onym Guide.
Future Outlook: The Next Frontier of Semantic Harmonization
As artificial intelligence and automated design-to-code pipelines become deeply integrated into software development, the importance of rigorous naming conventions is accelerating rather than diminishing. AI models rely heavily on semantic context, clean variable hierarchies, and consistent token naming structures to accurately generate accessible UI code, interpret design intent, and maintain design system integrity.
In the near future, we can expect automated linting tools to flag not just syntax errors, but semantic drift—alerting teams when a newly introduced component name violates existing system taxonomies or diverges from the user’s natural language patterns. Furthermore, as multi-modal design systems expand to support spatial computing, augmented reality (AR), and voice-driven interfaces, our naming models will need to evolve beyond traditional two-dimensional UI metaphors (like "buttons" and "containers") into spatial, behavioral taxonomies.
To future-proof your workflows, organizations must treat their nomenclature as a living design asset. Establish a dedicated naming backlog, audit your design tokens regularly, bridge the vocabulary gap between engineering and design, and leverage open-source inventories. By curing the chronic confusion of "speaking in different dialects," teams can drastically reduce friction, foster seamless collaboration, and build products that are infinitely more intuitive for both creators and consumers.