Navigating the Complexities of UI Naming: A Comprehensive Guide to Industry Standards, Taxonomies, and Resources

Naming things in design and development is notoriously difficult. The language teams use not only shapes how they conceptualize digital architecture, but it also dictates the conversations happening across disciplines. Whether it is identifying conflicting labels for colors, icons, UI components, and features, or struggling to establish clear terminology for design tokens, HTML classes, and variables, communication breakdowns frequently stem from ambiguous vocabulary.

Industry professionals often find themselves caught between two extremes when selecting names. Sometimes, the chosen labels are far too generic, making it nearly impossible to understand the exact intent or function of an element. On other occasions, names become overly specific, drastically limiting flexibility and preventing code reuse across scalable systems. Addressing this persistent industry challenge requires a closer look at established conventions, emerging resources, and structured taxonomies designed to streamline workflows for developers, designers, and product managers alike.

A Practical Guide To Naming Things — Smashing Magazine

How to Name Things

For professionals seeking inspiration when naming HTML classes, CSS properties, or JavaScript functions, resources like Classnames provide a repository of ideas designed to encourage thinking outside conventional parameters. Developed to help bridge the vocabulary gap, the platform offers thematically grouped lists of words tailored for coding contexts.

Rather than relying on repetitive technical jargon, teams can explore terms that describe behavioral patterns, likeness, order, grouping, and association. Furthermore, the resource curates themed collections drawn from diverse fields such as nature, art, theater, music, architecture, fashion, and publishing. Expanding the linguistic palette helps developers and designers formulate class names that are both descriptive and memorable, reducing the cognitive load required to maintain large codebases.

A Practical Guide To Naming Things — Smashing Magazine

How to Name Colors

Color management presents another significant hurdle in digital design, particularly when bridging the gap between raw hex codes and semantic tokens. To combat inconsistent color nomenclature, developer David Aerne maintains a repository of color names sourced from various references alongside thousands of contributions from the user community.

Featuring over 30,000 unique color entries, the repository serves as a robust reference tool complemented by integrated color pickers and name search functionality. Projects like Color Parrot further simplify the process by assigning intuitive, human-readable names to specific chromatic values. Having a standardized vocabulary for colors prevents duplicate entries in design systems and ensures that designers and engineers speak the same language when referencing brand palettes.

A Practical Guide To Naming Things — Smashing Magazine

How to Name Layers and Groups

Maintaining order in design files such as Figma or Sketch requires disciplined governance, particularly as collaborative projects scale. Javier Cuello has summarized key naming best practices aimed at bringing consistency and scalability to layers, groups, and components.

Effective naming conventions rely on a logical structure that remains short, meaningful, and universally understood across cross-functional teams. Crucially, Cuello emphasizes that layer and group names should avoid tying themselves directly to superficial visual properties, which frequently change during iterative redesigns. By establishing clear do’s and don’ts, organizations can prevent design files from devolving into unorganized collections of ambiguous default names like "Rectangle 4 copy," thereby smoothing the handoff process to engineering teams.

A Practical Guide To Naming Things — Smashing Magazine

How to Name Design Tokens

As design systems expand to support multiple brands and platforms, building a flexible design token taxonomy becomes a critical architectural challenge. This exact hurdle was faced by the team at Intuit, the parent company behind major financial and productivity products including Mailchimp, QuickBooks, TurboTax, and Mint. To unify these diverse offerings, the organization developed an adaptable token system that transcends individual brand themes to serve as a foundational infrastructure.

In a detailed case study, Nate Baldwin shared insights into the creation of Intuit’s design token taxonomy, outlining the pain points of legacy systems and the criteria established for the modern architecture. Similarly, the Vodafone UK Design System team addressed multi-brand complexity by introducing a comprehensive Variables Taxonomy Map. Built upon foundational work by Nathan Curtis, Vodafone’s system illustrates the intricate connections required across four distinct collections—spanning brand primitives, semantics, and page-level applications. This structured approach ensures that stakeholders can immediately identify a token’s origin, purpose, and application simply by reading its identifier.

A Practical Guide To Naming Things — Smashing Magazine

Frequent Names for UI Components

When teams struggle to name interface elements, looking at established design systems provides a reliable starting point. To help practitioners navigate existing nomenclature without getting lost in endless research, Iain Bean created the Component Gallery.

This curated collection compiles interface components drawn from real-world design systems, offering concrete examples for more than fifty distinct UI elements ranging from basic accordions to visually hidden utility classes. Crucially, the gallery documents the alternative names that various organizations use for the same UI components. This cross-referencing helps teams align their internal vocabulary with broader industry standards. Complementary tools like Name That UI further assist practitioners by functioning as visual dictionaries for common interface components.

A Practical Guide To Naming Things — Smashing Magazine

How to Name New Features

While technical components require precise backend naming, user-facing features demand an entirely different strategy centered around discoverability and adoption. Poor feature adoption is frequently tied to weak nomenclature that fails to communicate value clearly. Because feature discovery requires time for users to notice, understand, try, and integrate new tools into their existing workflows, product teams must carefully evaluate how they present new additions.

Practical guidelines suggest that effective feature names should be driven by user needs and underlying problems rather than internal corporate terminology. A successful name signals the ultimate outcome or "job-to-be-done," tapping directly into the vocabulary of the target audience. Product teams are encouraged to ask users to describe a feature in their own words, subsequently adopting that natural language to improve clarity and reduce friction.

A Practical Guide To Naming Things — Smashing Magazine

Design Token Naming Guide and Inventory

To assist practitioners in establishing systematic token architectures, Romina Kavcic developed a dedicated naming guide alongside an interactive builder tool. The resource walks teams through the fundamentals of token mechanics, helping them configure structured naming hierarchies that incorporate components, categories, states, and roles.

Additionally, the accompanying Design Token Names Inventory provides a spreadsheet-based structure featuring four distinct tiers. This bird’s-eye view allows teams to manage comprehensive token libraries, easily accommodating new rows, themes, and viewing modes without losing track of dependencies or sacrificing filtering capabilities.

A Practical Guide To Naming Things — Smashing Magazine

Naming Products or Services

Beyond codebases and interface components, naming an overarching product or service remains a high-stakes branding challenge. Open-source repositories like Onym aggregate tools, methodologies, and brainstorming frameworks designed to aid companies through the naming process. By centralizing resources related to vetting, etymology, and strategic sprints, these platforms provide teams with structured pathways to explore alternative naming concepts while avoiding common pitfalls.

Wrapping Up

Ultimately, the most effective name is one that is universally understood and actively utilized by both product teams and end-users. Countless hours are frequently lost when designers, developers, product managers, and users speak about the exact same functionality using entirely different dialects. These communication disconnects are a primary source of workplace friction and project delays.

A Practical Guide To Naming Things — Smashing Magazine

By auditing existing nomenclature, addressing potential naming conflicts in product backlogs, and leaning on established community taxonomies, organizations can significantly streamline their workflows. Investing time in thoughtful naming conventions bridges the gap between multidisciplinary teams, resulting in more coherent digital products and a smoother user experience.

Share:

Siti Muinah writes for Tech Maze.

Leave a comment