Executive Overview
In the realm of digital product creation, few challenges are as universally acknowledged yet persistently frustrating as naming things. Whether trying to label a newly minted CSS class, establishing a coherent taxonomy for a multi-brand design token library, or picking an intuitive label for an elusive software feature, the process of naming shapes how teams think, converse, and execute. As the old adage in computer science goes, there are only two hard things in computer science: cache invalidation and naming things.
The core difficulty lies in finding the precarious middle ground: names that are too generic fail to communicate intent, rendering codebases and design systems ambiguous, while names that are overly specific strip away flexibility, preventing reuse and scalability. When designers, developers, and product managers speak in disparate dialects, friction builds, leading to workflow inefficiencies, poor feature discovery, and user confusion.
This comprehensive guide investigates the multifaceted world of nomenclature in UI design and engineering. Drawing from community-driven resources, industry case studies, and advanced mental models, we explore how modern teams tackle naming across UI components, color systems, design tokens, layers, features, and enterprise-level architecture.
Detailed Chronology: The Evolution of Naming Conventions in Digital Design
The maturity of the web development and product design industries can be directly mapped to how teams have evolved their approach to naming conventions over the years.
The Wild West Era (Early Web & UI Design)
In the early days of digital creation, naming conventions were largely ad hoc. Developers relied on idiosyncratic shorthands (left-col-2, red-button), while designers named layers sequentially (Rectangle 1, Group Copy 4). This informal approach worked for small-scale projects, but as digital products ballooned in complexity, these practices caused maintenance bottlenecks. Codebases grew brittle, and handoffs between design and engineering turned into translation nightmares.
The Rise of Methodologies (BEM, SMACSS, and Atomic Design)
Recognizing the unsustainable nature of arbitrary naming, the industry pivoted toward systematic methodologies in the 2010s. Block Element Modifier (BEM) introduced strict rules for CSS class structures, ensuring predictability and scoping. Concurrently, Brad Frost’s Atomic Design framework transformed how designers thought about UI hierarchy, categorizing elements from atoms to templates. However, these systems still left teams grappling with subjective vocabulary choices—what one team called a "card," another called a "panel" or a "tile."
The Multi-Brand, Design Token Era (Present Day)
Today, the digital landscape is dominated by sophisticated design systems operating at enterprise scale. Multi-brand companies like Intuit, Vodafone, and global tech platforms must manage design tokens that propagate across disparate frameworks, themes, and platforms. Naming is no longer merely an aesthetic choice or a developer convenience; it is a foundational architecture that dictates whether a digital ecosystem can scale efficiently or collapse under its own weight.
Supporting Context & Metrics: Resources, Frameworks, and Methodologies
To address the perpetual struggle of nomenclature, the global design and engineering community has curated a wealth of open-source resources, utilities, and structured frameworks.
1. Expanding the Vocabulary: General Naming Utilities
When struggling to look past standard programming vernacular, resources like Classnames (curated by Paul Robert Lloyd) offer a lifeline. The platform provides thematically grouped lists of terms that encourage teams to think outside the box. Beyond standard behavioral or structural descriptors, it introduces themed collections drawn from nature, art, theater, music, architecture, fashion, and publishing—injecting fresh linguistic inspiration into codebases.
2. Standardizing Color Nomenclature
Colors present a notoriously tricky naming challenge. While hex codes and RGB values are precise, they are entirely uncommunicative to humans. David Aerne’s Color Names repository—boasting over 30,000 unique color names sourced from community contributions—coupled with utilities like Color Parrot, bridges this gap. By giving precise mathematical color values intuitive, memorable names, teams can build more readable design tokens and CSS color palettes.
3. Layer and Group Hygiene in Design Tools
Consistency in design files is just as critical as consistency in code. Javier Cuello’s guidelines on design naming best practices highlight that an effective layer or group name must possess a logical structure, remain concise, carry clear semantic meaning, and avoid being tied to transient visual properties. Establishing clear do’s and don’ts prevents cluttered Figma canvases and ensures seamless design-to-development handoffs.
4. Structuring Design Tokens: The Intuit & Vodafone Case Studies
Scaling design tokens across complex corporate ecosystems requires rigorous taxonomy.
- Intuit’s Approach: Facing the challenge of unifying disparate brands like Mailchimp, QuickBooks, and TurboTax, Nate Baldwin and the Intuit team designed a flexible token taxonomy. This system abstracts foundational values beyond single-brand themes, creating a robust, multi-product architecture.
- Vodafone UK’s Variables Taxonomy Map: Operating within a complex multi-brand environment, Vodafone’s design system team released a comprehensive taxonomy map in Figma. Built upon Nathan Curtis’s foundational token-naming methodologies, the map breaks down tokens into four distinct collections—moving seamlessly from brand primitives and semantics to component-level application.
- Romina Kavcic’s Guide & Inventory: For practitioners seeking actionable templates, resources like the Design Token Naming Guide + Builder and the Design Token Names Inventory spreadsheet offer step-by-step methodologies to configure naming structures encompassing components, categories, states, and roles without losing track of dependencies.
5. UI Component Standardization: The Component Gallery
When designing or coding standard interface patterns, reinventing the wheel—or the name—is counterproductive. Iain Bean’s Component Gallery aggregates real-world examples of over 50 UI components from established design systems, documenting alternate names and structural variations. This is complemented by Name That UI, a visual dictionary designed to align cross-functional teams on standard interface terminologies.
Official Statements and Industry Insights
Industry leaders consistently emphasize that naming is fundamentally a communication tool rather than a technical afterthought.
"The language we use shapes the way we think about things, but also the conversation we have about it. That’s why we have so much confusion about colors, icons, UI components, and features." — Industry UX consensus.
Experts stress that feature adoption directly correlates with nomenclature. As UX writer Erin Gannon highlights in her framework “What Do We Call This Thing?”, features often suffer from low adoption not because they lack utility, but because of poor discoverability and opaque naming.
- The Job-to-Be-Done Framework: Feature names should be driven by user problems and signal clear outcomes.
- User-Centric Lexicon: Rather than relying on internal corporate jargon or engineering-centric terminology, product teams should prompt users to describe workflows in their own words, adopting that exact vocabulary into the product interface.
Future Outlook: The Next Frontier in Digital Nomenclature
As artificial intelligence, automated code generation, and multi-platform design tokens become standard industry practice, the importance of disciplined naming will only accelerate.
- AI-Driven Taxonomy Management: Future design systems will likely leverage large language models to audit codebases and design files automatically, flagging naming inconsistencies, deprecated token references, and semantic drift across multi-brand repositories.
- Semantic Interoperability: The barrier between design tools (like Figma) and code repositories (like GitHub) will continue to dissolve through unified token formats (such as W3C Design Tokens). Standardized naming taxonomies will serve as the universal API connecting design intent directly to production code.
- Cross-Disciplinary Ubiquitous Language: Inspired by Domain-Driven Design (DDD), forward-thinking product organizations will increasingly establish a single "ubiquitous language" shared equally by product managers, designers, engineers, and end users—eliminating internal silos and bridging the gap between digital products and human comprehension.
Wrapping Up
Ultimately, the right name is simply the one that is universally understood and actively utilized by both the multidisciplinary team and the end user. Countless hours of engineering and design time are squandered daily not due to technical complexity, but because teams speak in fragmented dialects—the designer’s dialect, the developer’s dialect, the product manager’s dialect, and the user’s dialect.
By investing time in robust naming conventions, addressing naming conflicts early in the product backlog, and leveraging community-driven resources, organizations can drastically reduce friction, eliminate confusion, and foster an environment where digital products can scale seamlessly and intuitively.