Executive Overview
In the sprawling landscape of digital product design and software engineering, a quiet crisis persists behind nearly every pull request and design system release: naming things is exceptionally hard.
While code architecture, responsive grids, and accessibility standards enjoy rigorous documentation and tooling, the fundamental act of assigning nomenclature to digital elements remains prone to ambiguity, misalignment, and subjective debate. The language an organization uses does more than merely label artifacts; it actively shapes cognitive models, drives team conversations, and determines whether products scale seamlessly or fragment into siloed dialects.
Miscommunication around colors, interface components, design tokens, and feature sets frequently leads to profound friction. When names are too generic, stakeholders struggle to grasp intent or context; when they are overly specific, flexibility evaporates, rendering components impossible to reuse across multi-brand ecosystems. Furthermore, when cross-functional teams speak in isolated dialects—designers using one vocabulary, developers another, product managers a third, and users yet another—confusion multiplies, velocity stalls, and user adoption plummets.
This comprehensive guide explores the structural anatomy of naming across the digital product lifecycle. Drawing on industry-leading frameworks, open-source repositories, and case studies from global engineering teams, we examine practical strategies for establishing robust taxonomies for HTML classes, color palettes, UI components, design tokens, and product features.
Detailed Chronology: The Evolution of Naming Best Practices in Digital Design
The journey toward systematic naming conventions has evolved in tandem with the maturation of design systems and component-driven architecture. Understanding this trajectory highlights why ad-hoc naming no longer suffices in modern product development.
Phase 1: The Wild West of Ad-Hoc Naming (Pre-2015)
In the early days of modern web development and digital design, naming was largely localized and idiosyncratic.
- Design Layers: Artboards and layers in design tools were populated with generic strings like
Rectangle 4,Group Copy, orLayer 12. - Code Bases: CSS classes relied heavily on visual descriptions (
blue-button,big-bold-text) or arbitrary shorthand, resulting in bloated stylesheets and fragile inheritance models. - The Toll: As projects scaled, teams spent countless hours untangling what specific elements did, leading to massive code duplication and design inconsistency.
Phase 2: Methodologies and Modular Systems (2015–2020)
The industry recognized the unsustainable nature of ad-hoc naming, sparking the rise of structural naming methodologies.
- CSS Methodologies: Frameworks like BEM (Block, Element, Modifier) introduced strict structural patterns to scoping and modularity, transforming how developers thought about CSS architecture.
- Design Tokens Emerge: As design systems gained prominence, companies began abstracting styling values into JSON or YAML files, giving birth to "design tokens." However, early token taxonomies were often tethered directly to brand themes, creating severe bottlenecks when multi-brand support became a business requirement.
Phase 3: Semantic, Multi-Brand Taxonomies and Ecosystem Thinking (2020–Present)
Today, naming is treated as a core information architecture challenge rather than an afterthought.
- Multi-Tiered Taxonomies: Modern design systems—pioneered by organizations like Intuit, Vodafone, and Shopify—employ sophisticated multi-layered token taxonomies separating primitives from semantic roles.
- Community-Driven Taxonomies: Open-source directories, visual dictionaries, and standardized component galleries have democratized nomenclature, allowing teams to benchmark their internal naming conventions against industry standards.
Supporting Context & Metrics: The Cost of Poor Nomenclature
The impact of naming conventions extends far beyond developer aesthetics; it directly influences team velocity, software maintainability, and end-user behavior.
Cognitive Load and Context Switching
Every time a team member encounters an ambiguously named component or variable, they undergo a micro-interruption. They must pause, inspect the source code or design file, trace dependencies, and deduce intent. Across an enterprise engineering organization numbering in the hundreds, these micro-interruptions compound into thousands of lost hours annually.
Feature Adoption and Discoverability Metrics
In product management, poor feature naming is directly correlated with dismal adoption rates. UX research demonstrates that users progress through a predictable funnel:
- Discovery: Locating the feature within the interface.
- Understanding: Comprehending what value the feature provides.
- Trial & Integration: Testing the feature and embedding it into an existing workflow.
When a feature is branded with internal company jargon or overly clever marketing terminology rather than the user’s native mental model, the discovery and understanding phases break down. Users ignore or bypass the capability entirely, assuming it serves no purpose relevant to their goals.
Core Strategies for Naming Digital Artifacts
Navigating the nuances of nomenclature requires specialized approaches depending on the asset being defined. Below is a breakdown of proven methodologies for naming everything from code snippets to enterprise design tokens.
1. HTML Classes, CSS Properties, and Functions
When looking for inspiration outside standard naming conventions, resources like Classnames (curated by Paul Robert Lloyd) offer thematically grouped lists of words. Rather than relying solely on technical jargon, these resources encourage teams to draw inspiration from art, theater, music, architecture, and publishing to describe behavior, likeness, order, and association.
2. Color Palettes and Semantic Hues
Naming colors objectively is notoriously difficult. Relying on hex codes alone is unhelpful for human collaboration, yet descriptive names often conflict with brand shifts.
- The Color Names Repository: Maintained by David Aerne, this open-source repository houses over 30,000 unique color names sourced from user contributions and historical references.
- Color Parrot: Provides automated name generation for any given hex value, serving as an invaluable reference when establishing a shared color dictionary.
3. Layers, Groups, and Components in Design Tools
Design hygiene directly impacts engineering handoff. Javier Cuello’s design guidelines emphasize that an effective layer or component name must possess a logical structure:
- Do: Keep names short, meaningful, universally understood, and decoupled from temporary visual properties.
- Don’t: Rely on default system names (
Frame 201) or hyper-specific transient states that change during the design iteration process.
4. Design Token Taxonomies
Building a flexible design token taxonomy that survives multi-brand and multi-themed expansions requires a clear architectural hierarchy.
- The Intuit Case Study: Intuit engineered a token taxonomy capable of supporting disparate brands like Mailchimp, QuickBooks, and TurboTax under a single foundational system. By decoupling brand themes from structural primitives, they eliminated architectural bottlenecks.
- Vodafone UK Variables Taxonomy Map: Vodafone’s open-source Figma taxonomy map illustrates how to orchestrate four distinct collections—moving seamlessly from brand primitives and global tokens to semantic applications and page-level variables. This structure builds upon foundational work by design systems expert Nathan Curtis, ensuring that any developer or designer can instantly trace a token’s lineage and application context.
- The Token Naming Guide: Tools like Romina Kavcic’s Name Design Tokens Guide and accompanying inventory spreadsheets provide interactive frameworks for configuring components, categories, states, and roles without losing track of hierarchical depth.
5. UI Components
When engineering or designing standard interface patterns (e.g., accordions, dropdowns, modals), reinventing the wheel is counterproductive. Iain Bean’s Component Gallery aggregates real-world examples from dozens of enterprise design systems for over 50 distinct UI components, documenting the various aliases and alternative names each component goes by in the wild. Complementary tools like Name That UI offer visual dictionaries to bridge the gap between design and development vocabulary.
6. Product Features and Services
Erin Gannon’s practical frameworks for feature naming emphasize that names must be job-to-be-done driven.
- Tap Into User Language: Conduct user interviews and ask participants to describe their pain points and workflows in their own words. Adopt those exact phrasing patterns in your UI copy and feature nomenclature.
- Signal Value: Ensure the name communicates a clear outcome rather than an internal mechanical process.
Future Outlook: The Road Ahead for Digital Taxonomy
As artificial intelligence, automated design-to-code pipelines, and multi-modal interfaces continue to evolve, the importance of rigorous nomenclature will only intensify.
AI-Assisted Semantic Consistency
In the near future, large language models and design system linters will automatically audit repositories for naming inconsistencies, flagging semantic drift, duplicate token definitions, and non-inclusive language in real-time. However, AI can only enforce rules based on the foundational taxonomies established by human architects.
The Rise of Universal Design Tokens (W3C Community Group)
Standardization efforts led by bodies like the W3C Design Tokens Community Group are paving the way for platform-agnostic token formats. As tooling standardizes how tokens are transported between Figma, Style Dictionary, iOS, Android, and web frameworks, the underlying naming structures must remain clean, predictable, and self-documenting.
Wrapping Up
Ultimately, the correct name is simply the one that is universally understood, agreed upon, and actively utilized by both the multidisciplinary product team and the end user. Countless hours of organizational productivity are lost daily simply because designers, developers, product managers, and users speak in mutually unintelligible dialects.
If your team is experiencing low feature adoption, sluggish velocity, or chronic confusion during handoffs, inspect your nomenclature. Audit your codebase and design system for naming conflicts, document them in a dedicated backlog, and commit to aligning your team’s vocabulary with the mental models of the people you serve.
Editor’s Note: At Smashing Magazine, we celebrate the collaborative spirit of the open-source community. A heartfelt shout-out goes to every creator, designer, and developer who shares their frameworks and tools with the global web community. We believe in building a more accessible, usable web through shared knowledge and continuous education.