Executive Overview
In the realm of digital product development, an old, persistent adage rings true: “There are only two hard things in Computer Science: cache invalidation and naming things.” Attributed originally to Martin Fowler and popularized by Phil Karlton, this timeless sentiment extends far beyond traditional software engineering. Today, it plagues UI/UX designers, front-end engineers, product managers, and design system architects alike.
The language we choose does more than just label code blocks or visual assets—it shapes how we conceptualize problems, constructs the mental models of our users, and dictates the collaborative dialogues happening across cross-functional teams. When confusion arises around colors, icons, layout components, and product features, it can usually be traced back to a fundamental breakdown in terminology. Teams find themselves speaking in fragmented dialects: designers use one vocabulary, developers another, product managers a third, and users an entirely different one altogether.
Choosing the right name is an exercise in balance. Names that are too generic leave room for ambiguity, making it painfully difficult to understand their specific context or purpose. Conversely, names that are too specific severely limit flexibility, breaking scalability and preventing code or component reuse as products evolve.
To help practitioners navigate this linguistic minefield, a wealth of industry resources, open-source repositories, and battle-tested frameworks have emerged. This comprehensive guide explores the structural best practices, taxonomy maps, and curated toolkits designed to help teams master the art of naming across HTML classes, CSS design tokens, Figma layers, UI components, and software features.
Detailed Chronology: The Evolution of Naming Best Practices
The industry’s approach to naming conventions has matured significantly over the past decade. Understanding this historical progression helps illuminate why modern design systems demand such rigorous taxonomic structures.
Phase 1: The Wild West of Custom Code and Arbitrary Classes
In the early days of web development, naming conventions were largely ad-hoc. Developers relied on personal intuition, leading to cryptic class names like .box-left, .red-text, or .button2. These names tied semantic meaning directly to presentation—a catastrophic anti-pattern when design changes required shifting a red box to the right side of a page or changing its color scheme entirely.
Phase 2: The Methodology Boom (BEM and Atomic Design)
Recognizing the maintenance nightmare of arbitrary naming, the industry introduced structural methodologies. BEM (Block, Element, Modifier) revolutionized CSS architecture by enforcing predictable, hierarchical naming rules (e.g., block__element--modifier). Simultaneously, Brad Frost introduced Atomic Design, giving teams a shared vocabulary for scaling UI interfaces from foundational atoms up to complex organisms. Naming began shifting away from visual appearance and toward structural function.
Phase 3: The Rise of Design Systems and Multi-Brand Tokens
As companies scaled to support multiple platforms, white-label apps, and multi-brand ecosystems (such as Intuit or Vodafone), simple CSS naming was no longer enough. The introduction of Design Tokens—agnostic representations of design decisions like spacing, typography, and color—created an urgent need for multi-tiered taxonomies. Naming was no longer just a technical implementation detail; it became a core design architecture challenge, requiring cross-disciplinary collaboration between design and engineering teams.
Supporting Context & Metrics: Why Naming Matters
Poor naming is not merely an aesthetic annoyance; it carries severe financial and operational costs in software development cycles.
The Cost of Feature Discovery and Low Adoption
According to product usability research, low feature adoption is frequently tied to poor discoverability, which stems directly from confusing nomenclature. When a feature’s name fails to signal its core value or map to the user’s “job-to-be-done,” adoption plummets. Users must first discover a feature, comprehend its utility, test it, and successfully integrate it into their existing workflows. If a feature is branded with internal corporate jargon rather than the user’s natural language, this cognitive funnel breaks down instantly.
The Multi-Dialect Friction Metric
Case studies from enterprise design system teams indicate that up to 30% of sprint grooming and refactoring time is wasted simply aligning on what to call components, props, or variables. When engineering, design, and product management operate in siloed dialects, technical debt accumulates rapidly. Standardizing nomenclature acts as a force multiplier, accelerating velocity and drastically minimizing the friction of collaborative handoffs.
Official Guidelines & Practical Resources for Naming Everything
Fortunately, the digital design and engineering community has curated an extraordinary collection of open-source resources, mental models, and interactive tools to eradicate naming paralysis.
1. Thinking Outside the Box: HTML, CSS, and Functions
When struggling to name HTML classes, CSS properties, or JavaScript functions, resources like Classnames by Paul Robert Lloyd provide profound inspiration. Rather than defaulting to repetitive terms, the platform offers thematically grouped lists of words categorized by behavior, likeness, order, and association. Furthermore, it introduces unexpected thematic collections drawn from nature, architecture, fashion, theater, music, and publishing, helping codebases become more expressive and conceptually distinct.
2. Taming the Spectrum: Color Naming Repositories
Naming brand and UI colors historically led to endless debates—should a shade be called #3B82F6 or blue-500 or royal-azure? David Aerne’s massive open-source Color Names repository features over 30,355 unique color names aggregated from diverse references and thousands of user contributions. Paired with interactive pickers like Color Parrot, these tools offer standardized, human-readable descriptors that bridge the gap between arbitrary hex codes and semantic design tokens.
3. Structuring Layers and Figma Components
In design tools like Figma, messy layers destroy file maintainability. Javier Cuello’s comprehensive guide on Design Naming Best Practices establishes clear foundational rules for layers, groups, and components. An effective name, Cuello notes, must possess a logical structure, remain short and meaningful, be universally understood across the team, and—crucially—abstain from referencing fleeting visual properties.
4. Enterprise Design Token Taxonomies: The Intuit & Vodafone Models
Scaling design systems across massive product portfolios requires sophisticated, multi-tiered token architectures.
- The Intuit Case Study: Faced with unifying diverse financial and small-business products (such as QuickBooks, Mailchimp, and TurboTax), the team at Intuit engineered a flexible token taxonomy. Their system moves far beyond isolated brand themes, establishing a resilient foundational architecture that serves multiple independent ecosystems.
- Vodafone UK’s Variables Taxonomy Map: The Vodafone UK Design System team published an exemplary Variables Taxonomy Map in Figma. Building upon Nathan Curtis’s foundational work on token naming, this framework breaks design tokens down into four interconnected collections: Brand, Primitives, Semantics, and Pages/Components. This ensures that anyone inspecting a token can instantly trace where it lives, what it represents, and how it connects back to core primitives.
- Romina Kavcic’s Design Token Guide: For teams building tokens from scratch, Romina Kavcic’s Design Token Naming Guide and Builder provides an interactive framework to configure naming structures incorporating components, categories, states, and roles, supported by a bird’s-eye-view inventory spreadsheet.
5. UI Component Standardization: The Component Gallery
Before reinventing the wheel—or inventing a brand-new name for a common interface pattern—designers should audit existing industry standards. Iain Bean’s Component Gallery aggregates more than 50 UI components from real-world design systems (ranging from accordions to visually hidden utilities), documenting the various aliases and alternative names each component goes by in the wild. This is complemented by Name That UI, a visual dictionary designed to streamline component identification.
6. Product and Feature Naming
Naming a broader product, service, or major feature requires a strategic marketing and UX blend. Erin Gannon’s practical guide, “What Do We Call This Thing?”, emphasizes that feature names must be driven by user pain points and reflect the exact job-to-be-done. By capturing the language users naturally deploy when describing their tasks, product teams can drastically improve discoverability and uptake. Additionally, open-source repositories like Onym offer curated toolkits, brainstorming frameworks, and methodologies for vetting brand and product names.
Future Outlook: The Next Horizon in Semantic Design Systems
As the boundary between design tools and codebases continues to blur through AI-assisted development, token-driven architectures, and automated design-to-code pipelines, the importance of disciplined naming will only accelerate.
Looking toward the future, several key trends are shaping the discipline:
- AI-Powered Semantic Validation: Future design system tooling will likely incorporate AI linters that automatically flag non-compliant naming conventions in Figma files and pull requests, cross-referencing them against organizational taxonomy maps.
- Standardized Multi-Platform Design Tokens (W3C DTCG): The Design Tokens Community Group (DTCG) standard is pushing toward universal specifications for token syntax. As these standards mature, automated pipelines will effortlessly translate design token names directly into CSS variables, Swift properties, and Android resources without translation friction.
- Living Lexicons: Forward-thinking organizations are moving away from static documentation PDFs, adopting living, code-connected glossaries that sync repository changes directly with team wikis, ensuring that all disciplines—from marketing to engineering—stay aligned on a single source of truth.
Wrapping Up
Ultimately, the “correct” name for any UI component, color token, or feature 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 are squandered every year simply because teams talk past one another in isolated dialects. By auditing your codebase and design files for naming conflicts, establishing robust multi-tiered taxonomies, and leveraging the rich ecosystem of open-source naming guides available today, organizations can drastically reduce friction, eliminate confusion, and foster a seamless collaborative workflow.
Editor’s Note: We extend our sincere gratitude to the brilliant creators and open-source contributors who build and share these invaluable resources with the global web community. Supporting accessible, usable, and well-structured digital architecture is at the core of modern web craftsmanship.