Skip to main content

Navigating the Naming Dilemma: How Digital Design Systems and Development Teams Are Standardizing UI Nomenclature

In the evolving landscape of digital product development, few challenges prove as persistent or as subtle as the act of naming. The terminology selected by product teams directly shapes how software components are conceptualized, constructed, and discussed across cross-functional departments. Yet, across engineering and design organizations, widespread confusion continues to stem from how teams identify colors, icons, user interface components, and system features. This ambiguity frequently carries over into technical implementation, creating friction when structuring design tokens, styling HTML classes, and declaring programmatic variables.

When digital teams create terms for software elements, they frequently fall into two distinct structural traps. In many instances, the chosen names are overly generic, rendering it difficult for team members to understand the exact purpose or context of an element. In other cases, names are defined with excessive specificity, leaving virtually no room for flexibility, modularity, or multi-context reuse. Bridging this gap requires structured conventions, contextual vocabularies, and systemic frameworks designed to align designers, developers, product managers, and end-users around a shared language.

Addressing the Core Principles of Naming Code

To overcome creative blockages and technical ambiguity when defining HTML classes, CSS properties, or JavaScript function signatures, software creators are increasingly looking toward external linguistic structures for inspiration. A notable resource addressing this need is Classnames, an open repository created by Paul Robert Lloyd designed to encourage unconventional and structured thinking when naming technical artifacts.

A Practical Guide To Naming Things — Smashing Magazine

Classnames offers creators access to thematically grouped collections of vocabulary specifically curated for software design. Rather than relying on repetitive or overly literal descriptions, the platform organizes words based on relationships, behaviors, sequence, grouping, and comparative likeness. Beyond conventional technical vocabulary, the platform incorporates curated word sets drawn from diverse non-technical fields, including natural sciences, fine art, theater, music, architecture, fashion, and print publishing. By drawing from these structured domains, developers and designers can establish semantic relationships in code that remain distinct, expressive, and adaptable.

Establishing Precision in Color System Nomenclature

Standardizing color names within design systems presents a unique challenge, particularly as digital interfaces scale to accommodate complex palettes, dynamic dark modes, and multi-brand themes. Selecting an appropriate and memorable term for a specific color value requires moving beyond simple hex codes or basic primary descriptions.

To address this challenge, developer David Aerne maintains an extensive color naming repository that cataloged over 30,355 unique color names. This comprehensive database synthesizes references from diverse established archives alongside thousands of community-contributions. To facilitate practical application within active workflows, the repository is supported by dedicated utility tools, including the Color Parrot interface and specialized color pickers. These tools allow developers and designers to input exact color values via search queries or web links to immediately retrieve dedicated, standardized terms, providing a reliable reference point for design token creation and global style guides.

A Practical Guide To Naming Things — Smashing Magazine

Best Practices for Layers, Groups, and Interface Structure

Establishing consistent layer organization within design software is vital for maintaining scalable UI libraries. Interface designer Javier Cuello compiled a comprehensive set of naming best practices aimed at standardizing how designers label layers, component groups, and structural elements within design files.

According to Cuello’s framework, an effective naming system must adhere to specific core criteria: it should possess a clear logical hierarchy, remain brief yet meaningful, be universally understood across disciplines, and remain strictly detached from temporary visual properties. The framework outlines explicit tactical recommendations and practical warnings regarding how to label design assets. By analyzing specific edge cases, Cuello details how teams should approach fine-grained structural decisions, such as defining

component sizes, semantic colors, grouping layers, and structuring primary UI elements. By separating an element’s structural name from its momentary visual style—such as avoiding labels like "RedButton" in favor of functional roles—design teams can ensure that asset libraries remain stable even as visual brand guidelines evolve.

A Practical Guide To Naming Things — Smashing Magazine

Building Flexible Token Taxonomies for Multi-Brand Enterprise Systems

As organizations grow to manage multiple distinct digital products, maintaining a unified design language becomes infinitely more complex. This exact structural challenge was faced by the design engineering team at Intuit, the parent organization behind major digital platforms including Mailchimp, QuickBooks, TurboTax, and Mint. To serve a diverse ecosystem of products without forcing every brand into an identical visual mold, Intuit undertook a comprehensive redesign of its core design token architecture.

Design system specialist Nate Baldwin documented the creation of Intuit’s updated design token taxonomy in a detailed enterprise case study. The project addressed critical pain points embedded within the company’s legacy taxonomy, establishing a refreshed set of structural criteria required to support multi-product scalability. Baldwin’s analysis demonstrates how enterprise design systems can construct token architectures that extend far beyond high-level brand themes. The resulting framework provides a adaptable foundational layer capable of supporting distinct user experiences across disparate products while preserving unified design token logic under the hood.

Standardizing UI Component Terminology Across Design Systems

When establishing UI component libraries, engineering teams often struggle to determine whether an element should be named an accordion, an expandable panel, or a disclosure widget. Researching existing industry practices provides essential clarity when establishing cross-team naming standards.

A Practical Guide To Naming Things — Smashing Magazine

To eliminate the need for manual cross-referencing across disparate design system documentation, developer Iain Bean created The Component Gallery. The project functions as a centralized index of real-world design systems, cataloging design patterns and interface elements from leading digital organizations worldwide. The repository provides concrete implementation examples for more than 50 distinct UI component types, ranging from accordions to visually hidden utility elements. Crucially, the platform maps out the secondary names and alternative labels that different design teams assign to identical UI patterns. Complementing this structural taxonomy, visual references such as Name That UI offer interactive visual dictionaries, helping team members rapidly pair interface patterns with their standardized industry terms.

Aligning Feature Nomenclature with User Discovery and Adoption

Naming challenges extend well beyond internal design tokens and code variables; they directly impact product performance and user engagement. Digital product features frequently suffer from surprisingly low adoption rates due to poor in-app discoverability. Successful feature adoption typically requires a multi-stage user journey: the functionality must first be noticed, correctly understood, actively tested, successfully learned, and ultimately integrated into the user’s established daily workflow.

User experience strategist Erin Gannon authored an practical framework titled "What Do We Call This Thing?" to help product teams successfully guide users through this adoption pipeline. Gannon emphasizes that effective feature naming must be driven explicitly by user needs and underlying problem contexts rather than internal company jargon. Optimal feature names clearly signal the intended outcome or core value—aligning directly with the user’s specific "job-to-be-done." To achieve this alignment, product teams are advised to observe target users describing software functionality in their own unprompted language. By directly adopting the organic vocabulary used by real customers, product teams can drastically reduce cognitive friction and significantly improve feature discovery.

A Practical Guide To Naming Things — Smashing Magazine

Structuring Design Tokens with Advanced Taxonomy Mapping

For complex, multi-brand organizations requiring systematic token structures, structural blueprints serve as essential operational guides. A notable example of advanced variable architecture comes from the Vodafone UK Design System team, which created a open-source Variables Taxonomy Map.

Designed to accommodate a complex multi-brand, multi-themed design ecosystem, Vodafone’s mapping system dissects the precise anatomy and taxonomy of design tokens across well-defined component collections. The framework illustrates four distinct system layers required to link abstract design properties to concrete page layouts, spanning from foundational brand primitives to semantic utility tokens and page-specific overrides. Built upon foundational design system research conducted by industry expert Nathan Curtis, the taxonomy map provides a clear visual hierarchy. By reading a token’s structured name, developers and designers can immediately determine both its exact semantic purpose and its precise context of use within the codebase.

Interactive Tools and Inventories for Token Management

To assist design system creators in establishing structured naming hierarchies from scratch, designer Romina Kavcic developed the Design Token Naming Guide and interactive Builder tool. The utility leads teams through the core mechanics of token architecture, offering actionable frameworks to structure design variables based on components, functional categories, interactive states, and semantic roles.

A Practical Guide To Naming Things — Smashing Magazine

To complement the interactive builder, Kavcic also released the Design Token Names Inventory, a specialized spreadsheet framework designed to maintain clear high-level oversight of design tokens. The inventory utilizes a structured four-level hierarchy that allows system maintainers to review all active tokens simultaneously. The framework enables teams to seamlessly introduce new global themes, color modes, and component variations without destabilizing existing naming structures, while providing robust filtering capabilities to track variable relationships across large-scale software projects.

Frameworks for Naming Products, Services, and Digital Assets

When product teams need to expand their focus beyond interface mechanics to name entire digital products, services, or internal platforms, structured creative methodologies become indispensable. Onym, an open-source resource repository, compiles specialized tools and strategic frameworks specifically geared toward organizational naming initiatives.

The Onym toolkit organizes resources across every phase of the naming lifecycle, offering curated assets for initial brainstorming sessions, linguistic etymology research, legal vetting procedures, and dedicated naming sprints. The repository collects cautionary case studies outlining past corporate naming missteps, alongside directories of specialized naming agencies and recommended reference literature. By applying these structured brainstorming methodologies, product leaders can navigate naming decisions using systematic criteria rather than subjective personal preference.

A Practical Guide To Naming Things — Smashing Magazine

Eliminating Dialects to Improve Team Efficiency

Ultimately, the most effective name for any interface component, design token, or product feature is the one that is accurately understood and consistently adopted by both internal team members and end-users. Significant organizational time and engineering velocity are routinely lost when different disciplines speak about identical digital assets using conflicting terminology—often oscillating between the designer’s dialect, the developer’s dialect, the product manager’s dialect, and the end-user’s language.

When software features experience low user adoption or internal component libraries suffer from low team usage, the root cause can frequently be traced back to poor naming choices. Systematically identifying potential naming conflicts and logging them within product backlogs allows teams to gradually eliminate ambiguity. Addressing these subtle linguistic details reduces daily operational friction, builds clearer mental models, and fosters seamless collaboration between design and engineering departments.

Supporting these community-driven projects and open-source frameworks reflects a broader industry commitment to making the web more structured, accessible, and user-friendly. Platforms like Smashing Magazine continue to champion these creative tools, educational guides, and technical workshops to help digital creators build better collaborative environments across the global web ecosystem.

Asro

Author at DesignEnt.

Flash News