The Ultimate Guide to Naming UI Components, Design Tokens, and Features: Why Language Shapes Design

Naming is widely considered one of the hardest challenges in software development, user experience design, and product management. The language we use does not merely describe what we build; it actively shapes the way we think about problems and dictates the conversations we have around them. Because of this linguistic friction, teams frequently encounter deep confusion when trying to align on colors, icons, user interface components, and core product features. This disconnect cascades down into technical execution, leading to a constant struggle when naming design tokens, HTML classes, and code variables.

Often, the labels chosen during the design and development phases fall into one of two extremes. They are either far too generic, making it nearly impossible to understand what a specific element is meant to accomplish, or they are excessively specific, leaving virtually no room for flexibility, scaling, or component reuse across a growing product ecosystem. Navigating this tension requires a closer look at established conventions, emerging resources, and systemic approaches to nomenclature across the entire product lifecycle.

A Practical Guide To Naming Things — Smashing Magazine

How To Name Things

Finding the right inspiration for naming HTML classes, CSS properties, or JavaScript functions often requires breaking out of conventional engineering habits. For professionals looking to think outside the box, resources like Classnames offer a wonderful repository of ideas designed to spark creative thinking. Rather than relying on repetitive technical terms, such platforms provide thematically grouped lists of words that can completely transform how code and design assets are labeled.

These collections include terms that describe behavioral patterns, likeness, order, grouping, and association, alongside unexpected thematic categories drawn from nature, art, theater, music, architecture, fashion, and publishing. By incorporating a broader vocabulary into digital architecture, teams can establish more expressive and memorable identifiers for their codebase, reducing ambiguity between technical and non-technical stakeholders alike.

A Practical Guide To Naming Things — Smashing Magazine

How To Name Colors

Choosing the right name for a specific color value has historically been a subjective and frustrating endeavor. Fortunately, the developer community has rallied around comprehensive solutions, such as the extensive color repository maintained by David Aerne. Featuring tens of thousands of unique color names sourced from diverse historical references and thousands of user contributions, the repository serves as an invaluable reference point for digital creators.

Complete with interactive color pickers and name-search functionalities, these tools bridge the gap between arbitrary hex codes and meaningful semantic identifiers. Having access to a shared, standardized vocabulary for color values prevents teams from inventing ad-hoc names that fail to scale when a design system expands across multiple platforms and brands.

A Practical Guide To Naming Things — Smashing Magazine

How To Name Layers and Groups

Establishing consistency within design files is just as crucial as maintaining cleanliness in code repositories. Industry experts have long emphasized that effective naming practices for layers, groups, and components must follow a logical structure. A truly successful name is short, deeply meaningful, universally understood by all team members, and detached from transient visual properties.

Best practices dictate specific do’s and don’ts to ensure digital assets remain scalable. When designers carefully consider the fine details of how they label sizes, color groupings, individual layers, and complex components, they lay the groundwork for seamless collaboration between design and engineering teams, drastically cutting down the time spent deciphering cluttered design files.

A Practical Guide To Naming Things — Smashing Magazine

How To Name Design Tokens

One of the most complex scaling challenges modern organizations face is building a flexible design token taxonomy that functions harmoniously across vastly different products and brands. This was precisely the hurdle encountered by the team at Intuit, the parent company behind household names like Mailchimp, QuickBooks, TurboTax, and Mint. To unify their ecosystem, the company developed a flexible token system designed to serve as a foundational architecture stretching well beyond any single brand theme.

Detailed case studies into Intuit’s design token taxonomy highlight the fundamental pain points of legacy systems and outline the strict criteria required to build a robust, future-proof structure. Similarly, other enterprise teams have tackled this challenge through sophisticated frameworks. For instance, the Vodafone UK Design System team introduced a comprehensive Variables Taxonomy Map within Figma, breaking down the anatomy and categorization of design tokens into a meticulously organized system of collections.

A Practical Guide To Naming Things — Smashing Magazine

Building upon foundational industry frameworks, such maps illustrate the necessary collections required to support multi-brand systems—spanning everything from brand primitives to semantics and page-level variables. Through structured token mapping, team members can instantly determine where a token is utilized and what it represents simply by reading its name. Additional tools and interactive builders, such as dedicated design token guides and inventory spreadsheets, further empower organizations to manage multi-tiered token hierarchies without losing track of their architecture as themes and modes multiply.

Frequent Names For UI Components

When struggling to determine the appropriate nomenclature for interface elements, examining established design systems is often the most effective starting point. To spare practitioners from getting lost in the research rabbit hole, industry curators have established comprehensive hubs like the Component Gallery, which compiles interface components drawn directly from real-world design systems.

A Practical Guide To Naming Things — Smashing Magazine

These collections feature extensive examples for dozens of distinct user interface components—ranging from standard accordions to accessibility-focused visually hidden elements—while also documenting alternative names commonly used across the industry. Visual dictionaries and component directories provide teams with an immediate reference to align their internal terminology with established web standards.

How To Name New Features

Even the most innovative product features frequently suffer from low user adoption due to poor discoverability. Feature adoption is a deliberate journey: a capability must first be discovered, understood, actively tried, learned, and eventually integrated into a user’s existing workflow. Crafting clear, intuitive names for new features plays a vital role in ensuring this adoption cycle succeeds.

A Practical Guide To Naming Things — Smashing Magazine

Effective feature naming is fundamentally driven by user needs and concrete problems. Names should clearly signal the value or the ultimate outcome of a feature—focusing tightly on the user’s "job-to-be-done"—while tapping directly into the language customers already use. By listening closely to how users describe their own workflows and challenges during research sessions, product teams can adopt customer-centric terminology rather than relying on internal jargon.

Naming Products or Services

When an organization needs to name an entirely new product or service, the brainstorming process can easily become contentious and unstructured. Open-source repositories and strategic naming guides help organize the vast landscape of tools, methodologies, and vetting processes required to arrive at a resonant brand or product name. From early-stage brainstorming sprints and linguistic etymologies to cautionary tales and professional agency insights, structured guides encourage fresh ways of thinking and help teams navigate intellectual property and market positioning challenges.

A Practical Guide To Naming Things — Smashing Magazine

Wrapping Up

Ultimately, the correct name for any UI component, design token, feature, or variable is simply the one that is universally understood and actively utilized by both the internal team and the end users. Countless hours are wasted across organizations when designers, developers, product managers, and customers speak about the exact same underlying concept using entirely different dialects. This linguistic fragmentation is a primary driver of workplace friction, confusion, and delayed project delivery.

Recognizing that low adoption rates or development bottlenecks may stem purely from poor nomenclature allows teams to proactively address naming conflicts. By maintaining an active backlog for terminology improvements, organizations can systematically reduce confusion and foster an environment where cross-functional teams collaborate with clarity and shared purpose.

A Practical Guide To Naming Things — Smashing Magazine

As digital product ecosystems continue to evolve, particularly with the rapid integration of artificial intelligence and complex multi-brand environments, structured approaches to language and design patterns remain an essential cornerstone of professional product development.

Share:

Lina Irawan writes for Tech Maze.

Leave a comment