Navigating the Complexities of UI Naming: New Resources Aim to End Industry Confusion

Naming things remains one of the most persistent challenges in software development, design systems, and digital product management. Whether deciding on HTML classes, JavaScript functions, design tokens, color variables, or new product features, the language teams choose fundamentally shapes how they think, collaborate, and communicate. Poor nomenclature frequently leads to systemic confusion, with designers, developers, and product managers speaking entirely different dialects about the exact same elements. To combat this friction, a wave of new resources, open-source directories, and industry case studies has emerged to help digital creators establish a shared, scalable vocabulary.

A Practical Guide To Naming Things — Smashing Magazine

The root of the problem often lies in finding the right balance. Names that are overly generic make it difficult to determine an element’s precise function or intent, while names that are excessively specific strip away necessary flexibility and reuse potential. This tension spans across multiple disciplines, affecting how teams name visual components, color palettes, layout layers, and underlying structural variables.

A Practical Guide To Naming Things — Smashing Magazine

To address code-level nomenclature, developer Paul Robert Lloyd created Classnames, a resource designed to push developers and designers to think outside the box when naming HTML classes, CSS properties, or functional functions. Rather than relying on repetitive or predictable terms, the platform offers thematically grouped lists of words categorized by behavior, likeness, order, grouping, and association. It also incorporates unexpected thematic collections drawn from nature, art, theater, music, architecture, fashion, and publishing, providing fresh linguistic angles for complex code architectures.

A Practical Guide To Naming Things — Smashing Magazine

Color naming presents a similarly steep challenge across digital design. Maintaining consistency across large-scale applications requires robust color taxonomies. To assist with this, David Aerne maintains a massive open repository of color names sourced from various historical references and thousands of user contributions. Housing over 30,000 unique color names, the repository features integrated color pickers, name search utilities, and companion tools like Color Parrot. This extensive reference library provides teams with precise, memorable terminology for design tokens and stylesheets, moving away from rigid hexadecimal codes toward semantic color naming.

A Practical Guide To Naming Things — Smashing Magazine

Moving upstream into visual design tools, establishing consistency in layer and group nomenclature is vital for scalable systems. Design expert Javier Cuello has outlined a comprehensive set of naming best practices aimed at keeping design files organized and intuitive. According to Cuello, an effective name possesses a logical structure, remains concise and meaningful, uses universally understood terminology, and avoids relying on ephemeral visual properties. His framework addresses common pitfalls and outlines clear guidelines for naming sizes, colors, groups, layers, and components, ensuring that design files translate smoothly into production environments.

A Practical Guide To Naming Things — Smashing Magazine

At an enterprise scale, the challenge multiplies when building flexible design token taxonomies that must function harmoniously across multiple brands and product portfolios. This exact hurdle was tackled by the design systems team at Intuit, the parent company behind major financial and productivity platforms such as Mailchimp, QuickBooks, TurboTax, and Mint. Facing limitations with their legacy architecture, the team engineered a flexible token system capable of serving diverse brand themes while maintaining a cohesive foundational structure. Nate Baldwin detailed this transition in an extensive case study, highlighting the pain points of the previous taxonomy and outlining the criteria used to build a robust, scalable system.

A Practical Guide To Naming Things — Smashing Magazine

Similarly, the Vodafone UK Design System team addressed multi-brand complexity by releasing their Variables Taxonomy Map via the Figma community. Building upon foundational token-naming methodologies established by industry experts like Nathan Curtis, the Vodafone map breaks down token anatomy across four distinct collections ranging from brand primitives to semantic page implementations. This structural map allows teams to instantly trace where a token originates, how it connects across themes, and where it is applied, purely based on its name. Romina Kavcic has further supported this space by developing the Design Token Naming Guide and an accompanying token names inventory spreadsheet, giving teams a structured, bird’s-eye view of their design systems without losing track of custom themes or modes.

A Practical Guide To Naming Things — Smashing Magazine

When teams struggle to name common interface components, looking at established design systems offers an efficient shortcut. To streamline this process, Iain Bean developed the Component Gallery, an exhaustive collection that maps out more than 50 UI components from real-world design systems. By showcasing alternate names for components ranging from basic accordions to accessibility-focused utility classes, the gallery acts as a cross-industry reference to help teams align their internal naming conventions with broader ecosystem standards. This is complemented by visual dictionaries like Name That UI, which provide visual representations of common interface patterns.

A Practical Guide To Naming Things — Smashing Magazine

Beyond internal code and design architecture, naming consumer-facing features presents unique business challenges. Low feature adoption is frequently tied to poor discoverability and misaligned terminology rather than a lack of utility. UX writer Erin Gannon addressed this dynamic in a practical guide examining how features move through discovery, comprehension, trial, integration, and workflow adoption. Gannon emphasizes that successful feature names must be rooted in user needs, reflecting the jobs-to-be-done and incorporating the exact language users naturally employ. By asking users to describe functionality in their own words, product teams can bridge the gap between internal engineering jargon and customer understanding.

A Practical Guide To Naming Things — Smashing Magazine

For broader product and service nomenclature, creators can turn to community-driven repositories like Onym, which aggregates brainstorming tools, vetting methodologies, etymologies, and case studies. By bringing together disparate resources into a single hub, the platform encourages multidisciplinary teams to explore alternative avenues for naming new ventures.

A Practical Guide To Naming Things — Smashing Magazine

Ultimately, industry experts note that the most effective name is simply the one that is universally understood and actively adopted across an organization. When designers, developers, and product managers utilize different dialects for identical concepts, operational friction and user confusion inevitably follow. Recognizing and addressing these naming discrepancies early can significantly improve cross-functional collaboration and long-term product maintainability.

Share:

Dwi Wanna writes for Tech Maze.

Leave a comment