In the realm of digital product creation, few challenges are as ubiquitous yet persistently vexing as naming things. Whether codifying a complex multi-brand design system, structuring variables for a scalable application, labeling intuitive user interface (UI) components, or introducing an entirely new product feature, the words we choose dictate how we think, communicate, and build. Language acts as the invisible architecture of software development. When nomenclature fails, communication fractures, leading to prolonged misalignment between designers, developers, product managers, and, ultimately, the end users.
The core dilemma of naming typically swings between two problematic extremes: names that are too generic, rendering them ambiguous and prone to misunderstanding, and names that are too specific, stripping away necessary flexibility, scalability, and reusability. This comprehensive, practical guide explores the multifaceted world of digital taxonomy. Drawing upon industry-tested resources, proven naming conventions, and real-world case studies from leading design systems, this report outlines actionable strategies to bridge the communicative gaps across multidisciplinary teams, eliminate operational friction, and establish an authoritative, unified vocabulary for the web.
Detailed Chronology: The Evolution of Naming in Digital Design
To understand how modern digital organizations approach nomenclature, it is helpful to trace the evolution of design systems and component architecture over the past decade.
Phase One: The Wild West of Web Development (Early 2000s – Early 2010s)
In the early days of structured web design, naming conventions were largely ad-hoc. Developers relied heavily on localized cascading style sheets (CSS) with unstructured classes (.box1, .red-text, .sidebar-left). Because design systems were rarely conceptualized at scale, teams operated within silos. Designers named layers in Photoshop or Sketch using whatever default nomenclature the software provided (Rectangle copy 4, Group 2), while developers translated those visual assets into code using completely independent internal vocabularies. This disconnect generated immense technical debt and continuous friction during handoff meetings.
Phase Two: Modular Systems and Methodologies (Mid 2010s)
As web applications grew in complexity, the industry recognized the urgent need for systemic organization. Methodologies such as BEM (Block, Element, Modifier) emerged to bring order to CSS class naming, attempting to establish predictable, hierarchical patterns. Concurrently, Atomic Design—pioneered by Brad Frost—introduced a chemical analogy to UI development (Atoms, Molecules, Organisms, Templates, Pages), fundamentally shifting how teams thought about component composition and structural naming.
Phase Three: The Rise of Design Tokens and Multi-Brand Systems (Late 2010s – Present)
Today, digital products must scale across multiple platforms, devices, white-label brands, and dynamic themes (such as dark and light modes). This necessity birthed Design Tokens—agnostic variables storing design decisions like colors, spacing, and typography. Managing tokens across large enterprises quickly became an immense logistical undertaking. Organizations like Intuit, Vodafone, and widespread open-source communities began formulating rigorous token taxonomies, shifting naming from an afterthought into a foundational engineering and design discipline.
Supporting Context & Metrics: Why Naming Matters
The friction caused by poor nomenclature is not merely an aesthetic annoyance; it carries measurable productivity costs. When teams speak different "dialects"—designers using visual jargon, developers relying on technical abbreviations, product managers focusing on business metrics, and users speaking in plain, functional terms—misalignment occurs daily.
The Cost of Disconnected Vocabularies
Low Feature Adoption: According to UX research metrics, low feature adoption is frequently tied not to poor utility, but to poor discoverability and confusing naming. If a feature’s label does not signal its core value or map onto the user’s mental model, discovery fails, usage plummets, and time-to-value stretches indefinitely.
The Dialect Gap: Studies in cross-functional team dynamics indicate that up to 30% of sprint grooming and handoff discussions are spent resolving ambiguities regarding component definitions, states, and variable hierarchies.
By standardizing nomenclature, organizations can drastically reduce onboarding times for new hires, accelerate code review cycles, and ensure that accessibility requirements (such as clear screen-reader labels and ARIA attributes) are naturally met through precise, semantic naming.
Practical Frameworks: How to Name Everything in Your Tech Stack
To assist practitioners in overcoming writer’s block and architectural confusion, the design community has cultivated a wealth of specialized resources and mental models. Below is a curated breakdown of how to approach naming across different layers of the digital product ecosystem.
1. General Inspiration for Code and Classes
When naming HTML classes, CSS properties, or JavaScript functions, designers and developers often fall into repetitive patterns. To encourage creative, outside-the-box thinking, resources like Classnames (developed by Paul Robert Lloyd) offer thematically grouped lists of words.
Beyond standard technical terms, these collections draw inspiration from nature, art, theater, music, architecture, fashion, and publishing.
Terms describing behavior, likeness, order, grouping, and association provide developers with fresh semantic choices that remain clean, descriptive, and maintainable.
2. Standardizing Color Palettes
Color names have historically been plagued by subjectivity (e.g., is a hex code #2a75bc "Dodger Blue," "Ocean Navy," or simply "Brand Blue 500"?). To bring order to chromatic chaos, David Aerne’s comprehensive repository, Color Names, catalogs over 30,000 unique color names sourced from diverse references and thousands of user contributions. Accompanied by interactive color pickers and name-search utilities like Color Parrot, these tools allow teams to establish stable, memorable linguistic anchors for color tokens rather than relying solely on raw numerical values.
3. Layer and Group Structure in Design Files
In design tools like Figma, messy layers destroy collaboration. Javier Cuello’s guidelines on design naming best practices establish clear rules for layers, groups, and components:
Logical Structure: Names should follow a predictable sequence (e.g., Component / State / Variation).
Conciseness and Meaning: Names must be short, universally understood, and devoid of transient visual properties (avoiding terms like Big or Red in favor of functional terms like Primary or Critical).
Strict Do’s and Don’ts: Clear guardrails prevent designers from leaving unflattened, auto-generated asset names in production-ready files.
4. Architecting Design Token Taxonomies
Scaling design tokens across multi-brand environments requires a bulletproof architecture. A prime example is the approach implemented by Intuit—parent company to Mailchimp, QuickBooks, TurboTax, and Mint—which developed a flexible token taxonomy capable of serving vastly different brand themes under a single foundational system.
Similarly, the Vodafone UK Design System team published a robust Variables Taxonomy Map in Figma. This map breaks down design token anatomy across four core collections:
Brand / Primitives: Raw foundational values (e.g., base color palettes, core spacing units).
Components: Specific bindings for individual UI elements (e.g., button-bg-danger).
Pages / Contexts: Page-specific or theme-specific overrides.
Building upon Nathan Curtis’s foundational work on token naming, these hierarchical models ensure that any team member can instantly determine where a token is used and what it represents simply by reading its name. For teams seeking interactive configuration, tools like Romina Kavcic’s Design Token Naming Guide + Builder and the accompanying Design Token Names Inventory spreadsheet provide bird’s-eye visibility into complex token architectures.
5. Identifying UI Components
When designing or coding standard interface elements, reinventing the wheel is counterproductive. Iain Bean’s Component Gallery aggregates more than 50 UI components (ranging from accordions to visually hidden utilities) collected directly from real-world design systems. It documents not only standard implementations but also the varied aliases and alternative names each component goes by across different corporate ecosystems. Additionally, visual dictionaries like Name That UI offer rapid visual confirmation for ambiguous interface patterns.
6. Naming New Features for Discoverability
Erin Gannon’s practical framework for feature naming highlights that feature adoption relies heavily on a multi-stage cognitive journey: discovery, understanding, trying, learning, and integration into existing workflows.
Job-to-Be-Done Focus: Feature names should signal the value or outcome delivered to the user.
User-Centric Language: Rather than using internal corporate jargon or clever marketing codenames, teams should ask users to explain the feature in their own vernacular and adopt those exact words.
7. Naming Products and Services
At the highest macro level, naming a product or service requires balancing brand identity with market clarity. Open-source repositories like Onym organize brainstorming methodologies, vetting techniques, etymological guides, sprint structures, and cautionary tales to help brand architects navigate the treacherous waters of commercial nomenclature.
Official Statements & Industry Perspectives
Industry leaders continue to emphasize the profound operational impact of intentional nomenclature. Reflecting on the systemic nature of design tokens and UI architecture, design systems advocates note:
"The right name is the one that is well-understood and actively used by both the team and the users. So much time is wasted speaking about the very same concept but in different dialects—the designer’s dialect, the developer’s dialect, the product manager’s dialect, and the user’s dialect. That fragmentation is the silent killer of project momentum."
— Design Systems Community Consensus
Furthermore, experts underline that naming conflicts should never be swept under the rug. Establishing a dedicated backlog for nomenclature refinement helps teams systematically eliminate ambiguities, reducing cognitive load and fostering a more harmonious cross-functional engineering culture.
Future Outlook: The Next Horizon in Digital Nomenclature
As artificial intelligence, automated code generation, and multi-modal design tools become deeply integrated into the software development lifecycle, the importance of structured naming conventions will only escalate. AI-driven coding assistants and design-to-code pipelines rely heavily on semantic clarity. If variable names, component structures, and design tokens lack rigorous, logical taxonomies, AI models will struggle to generate accurate, accessible, and maintainable code.
Looking ahead, the future of digital product creation points toward hyper-standardized, machine-readable taxonomies that seamlessly map human-centered language directly to machine execution. By investing time today in robust naming guides, collaborative dictionaries, and disciplined token architectures, organizations future-proof their systems against chaos, ensuring that their digital products remain adaptable, scalable, and effortlessly intuitive for both creators and consumers alike.
