The Art and Architecture of Naming: A Comprehensive Guide to UI Components, Design Tokens, and Features

Naming things in design and software development is notoriously difficult. The language teams use shapes not only how they conceptualize interfaces and systems, but also how they communicate across disciplines. This linguistic friction often leads to widespread confusion regarding colors, icons, user interface components, and features. Consequently, modern digital teams frequently struggle when trying to establish cohesive names for design tokens, HTML classes, and code variables.

Often, the labels chosen during the design and development phases fall into two problematic extremes. Sometimes, the names are far too generic, making it nearly impossible to understand what a specific element or token is meant to achieve. On other occasions, they are overly specific, restricting flexibility and hindering reuse across a wider design system or multi-brand architecture. To address these perennial challenges across the industry, a growing body of resources, taxonomies, and community-driven guides has emerged to help designers and developers navigate the complexities of nomenclature.

A Practical Guide To Naming Things — Smashing Magazine

How To Name Things

Finding the right vocabulary for HTML classes, CSS properties, or JavaScript functions requires looking beyond immediate technical constraints. For professionals seeking inspiration outside conventional technical terminology, platforms like Classnames offer a curated repository of ideas designed to encourage out-of-the-box thinking.

The resource provides thematically grouped lists of words tailored for nomenclature. It includes terms that describe behavioral patterns, likenesses, ordering principles, groupings, and associations. More importantly, it introduces themed collections drawn from diverse domains such as nature, art, theater, music, architecture, fashion, and publishing—vocabulary that rarely comes to mind instantly within a purely functional coding environment.

A Practical Guide To Naming Things — Smashing Magazine

How To Name Colors

Choosing intuitive and scalable names for specific colors has long been a subjective hurdle in digital design. To streamline this process, developer David Aerne maintains a comprehensive repository of color names containing over 30,000 unique designations sourced from historical references and thousands of individual user contributions.

Equipped with color pickers and dedicated name search tools, this extensive catalog serves as a vital reference for teams attempting to standardize color palettes. By anchoring palette definitions to a shared vocabulary, organizations can eliminate ambiguity when translating visual design decisions into robust code variables.

A Practical Guide To Naming Things — Smashing Magazine

How To Name Layers and Groups

Establishing consistency within design files is just as critical as maintaining clean codebases. Design system specialist Javier Cuello has outlined a comprehensive set of naming best practices aimed at helping teams structure layers, groups, and components in a scalable manner.

According to these guidelines, an effective name possesses a logical structure, remains concise yet meaningful, is universally understood across the organization, and avoids reliance on superficial visual properties. By establishing clear behavioral boundaries and consistent taxonomies, design teams can prevent the clutter and disorganization that frequently plague large-scale design files.

A Practical Guide To Naming Things — Smashing Magazine

How To Name Design Tokens

Scaling a design system across multiple enterprise products presents significant architectural challenges. This was the exact hurdle faced by the team at Intuit, the parent company behind major financial and productivity platforms such as Mailchimp, QuickBooks, TurboTax, and Mint. To unify their ecosystem, the organization developed a flexible design token taxonomy capable of serving a wide array of distinct product brands.

In a detailed case study, Nate Baldwin shared the behind-the-scenes evolution of Intuit’s token architecture. The documentation outlines the critical pain points of their legacy systems, the rigorous criteria established for the redesign, and the structural methodology behind the final taxonomy. These insights offer valuable lessons for organizations seeking to build resilient and adaptable token systems.

A Practical Guide To Naming Things — Smashing Magazine

Frequent Names For UI Components

When starting a new design system or struggling to identify the standard terminology for a recurrent interface pattern, looking at established industry practices is often the most effective approach. To save teams from endless design system research, Iain Bean compiled the Component Gallery, an extensive index of interface components drawn from real-world digital products.

The platform catalogs numerous examples for more than fifty distinct UI components—ranging from basic accordions to complex accessibility patterns—while explicitly listing alternative names used across different organizations. This repository serves as a practical reference for resolving nomenclature debates within cross-functional teams. Additional visual dictionaries, such as Name That UI, further assist practitioners in identifying common interface patterns quickly.

A Practical Guide To Naming Things — Smashing Magazine

How To Name New Features

Low user adoption rates are frequently driven by poor discoverability rather than a lack of underlying utility. Feature adoption is a sequential journey: a capability must first be discovered, subsequently understood, actively tested, learned, and finally integrated into a user’s existing workflow. Product strategist Erin Gannon has explored these dynamics in a practical guide focused on feature nomenclature.

Effective feature names are fundamentally driven by user needs and underlying problems. They should clearly signal the value or outcome of a capability, aligning directly with the "job-to-be-done" framework. Most importantly, successful nomenclature taps into the user’s own language. By actively observing how users describe tasks in their native vocabulary, product teams can construct names that resonate instantly with their target audience.

A Practical Guide To Naming Things — Smashing Magazine

How To Name Variables and Taxonomy Maps

Managing nomenclature within a complex, multi-brand, and multi-themed design system requires rigorous structural planning. A prime example of this methodology comes from the Vodafone UK Design System team, whose published Variables Taxonomy Map details the anatomy and categorization of design tokens within an organized system of collections.

Building upon foundational work by architecture experts like Nathan Curtis, the map outlines four essential collections required to support a scalable system—ranging from brand primitives and semantic tokens to page-level applications. This transparent structure enables any team member to instantly understand a token’s purpose and origin solely from its identifier. Additional resources, such as Romina Kavcic’s Design Token Naming Guide and accompanying inventory spreadsheets, provide practitioners with interactive tools and structured frameworks to configure custom token hierarchies.

A Practical Guide To Naming Things — Smashing Magazine

Naming Products or Services

Beyond technical variables and user interface components, identifying the right name for an entire product, service, or brand requires specialized methodologies. Open-source repositories like Onym aggregate essential tools, brainstorming exercises, validation guides, sprint frameworks, and etymological resources to assist creators throughout the branding process. By compiling professional methodologies and cautionary industry tales, these resources encourage multidisciplinary teams to explore diverse paths toward effective market naming.

Wrapping Up

Ultimately, the most effective name is one that is universally understood and actively utilized by both the internal team and the end users. Significant operational time is frequently lost when designers, developers, product managers, and users speak about identical concepts using entirely different internal dialects. This linguistic fragmentation remains a primary source of friction and confusion in digital product development.

A Practical Guide To Naming Things — Smashing Magazine

Addressing low adoption rates or workflow bottlenecks often begins by re-evaluating the fundamental terminology embedded within an application. By identifying and resolving naming conflicts through structured backlogs, organizations can streamline collaboration and build more cohesive digital experiences.

Share:

rifanmuazin writes for Tech Maze.

Leave a comment