Executive Overview
In the realm of digital product creation, a silent friction constantly threatens team velocity, design system scalability, and product adoption: the challenge of naming things. As the old computer science adage suggests, there are only two hard things in computer science: cache invalidation and naming things. Yet, this hurdle extends far beyond backend architecture, heavily fracturing the disciplines of User Experience (UX) design, frontend engineering, and product management.
The language we choose shapes not only how we conceptualize interface elements but also the nature of our multidisciplinary conversations. When teams lack a unified taxonomy, communication breaks down into disparate dialects. Designers speak in visual abstractions, developers in code structures, product managers in business metrics, and users in operational needs. This Tower of Babel syndrome breeds widespread confusion over colors, icons, UI components, and feature sets, ultimately leading to poorly structured design tokens, messy HTML classes, and ambiguous variables.
Choosing the right name requires striking a delicate balance. Names that are too generic leave team members guessing at intent and context, while those that are too specific choke out flexibility, maintainability, and code reuse. Fortunately, the design and engineering communities have increasingly rallied to solve this systemic issue. A new wave of open-source repositories, design system inventories, and taxonomy frameworks has emerged to help organizations establish a shared, scalable vocabulary. This practical guide explores the definitive tools, methodologies, and best practices for naming everything in your digital ecosystem—from UI layers and color palettes to complex design tokens and user-facing features.
Detailed Chronology: The Evolution of Naming Frameworks in Digital Products
The journey toward standardized naming conventions in digital design has matured significantly over the past decade. Understanding how we arrived at today’s sophisticated taxonomies highlights the growing need for structure in increasingly complex, multi-brand environments.
Phase 1: The Wild West of Web Development (Early 2010s and Prior)
In the early days of web development and digital design, naming conventions were largely ad-hoc. Developers relied on intuitive or idiosyncratic shorthand for CSS classes (e.g., .box1, .red-text), while designers haphazardly named layers in Photoshop or early Sketch files as Rectangle copy 4 or Group 12. As digital products scaled, this lack of discipline led to immense technical debt, brittle codebases, and design files that were virtually impossible for incoming team members to navigate.
Phase 2: Methodologies and Modular Systems (Mid-to-Late 2010s)
Recognizing the unsustainable nature of ad-hoc naming, the industry introduced systematic methodologies. Frameworks like BEM (Block, Element, Modifier) revolutionized CSS by enforcing strict, readable patterns for HTML classes. Concurrently, the rise of design systems forced designers and developers to sit at the same table. Pioneers like Nathan Curtis began codifying how design tokens should be structured, bridging the gap between raw design values (like HEX codes) and semantic application (like background colors for buttons).
Phase 3: The Multi-Brand, Multi-Theme Era (2020s to Present)
Today, enterprises routinely manage complex portfolios spanning multiple brands, themes, and platforms—exemplified by tech giants like Intuit and telecommunications leaders like Vodafone. Naming has evolved from a localized formatting choice into a strategic architecture. Modern workflows leverage sophisticated variables taxonomy maps, automated token builders, and cross-discipline glossaries. Naming is now recognized as a core pillar of product strategy, directly impacting accessibility, feature discovery, and development velocity.
Supporting Context & Metrics: Why Naming Matters
The impact of poor nomenclature is not merely aesthetic; it carries heavy operational and financial costs. Teams waste countless hours debating what to call a component, hunting for misplaced design tokens, or trying to decipher what a legacy function does.
The Cost of Fragmentation
When design, engineering, and product speak different dialects, friction occurs at every handoff:
- Feature Abandonment: Research consistently shows that low feature adoption rates are frequently tied to poor discoverability and confusing nomenclature. If a user cannot intuitively understand what a feature does based on its title, they will bypass it entirely.
- Redundant Work: Without a centralized component gallery or naming inventory, teams routinely build duplicate UI elements because they cannot find existing components hidden behind obscure names.
- Design Token Breakdown: As multi-brand systems scale, chaotic token names prevent automated synchronization between Figma libraries and production codebases, forcing manual overrides and increasing the risk of visual regressions.
The Anatomy of an Effective Name
According to design guidelines established by industry experts like Javier Cuello, an effective name across layers, groups, and components must adhere to specific core criteria:
- Logical Structure: It follows a predictable, hierarchical pattern that scales with the product.
- Conciseness: It is short and punchy, avoiding bloated descriptors.
- Meaningfulness: It communicates purpose rather than arbitrary visual characteristics.
- Universal Recognition: It is instantly understood by everyone on the cross-functional team, regardless of their primary discipline.
Essential Resources and Taxonomies for Naming Everything
To combat the nomenclature crisis, a rich ecosystem of tools and repositories has been developed by community leaders. Below is a curated inventory of resources designed to help teams master naming across every layer of product creation.
1. General Inspiration for Code and Classes
When struggling to name HTML classes, CSS properties, or JavaScript functions, Classnames (created by Paul Robert Lloyd) is an invaluable resource that encourages thinking outside the box. The platform provides thematically grouped lists of words that describe behavior, likeness, order, and grouping. Beyond standard technical terms, it offers creative, thematic collections drawn from nature, art, theater, music, architecture, fashion, and publishing, helping developers avoid repetitive, unimaginative naming patterns.
2. Color Palettes and Semantic Hues
Naming colors consistently across a design system can be notoriously subjective. David Aerne maintains a massive, community-driven repository of color names (color-names), featuring over 30,355 unique color designations sourced from diverse references and thousands of user contributions. Accompanied by interactive tools like Color Parrot, this ecosystem provides a robust reference point for establishing predictable color taxonomies in both design files and code.
3. Layers, Groups, and UI Components
- Design Best Practices: Javier Cuello’s guidelines on naming layers, groups, and components offer rigorous do’s and don’ts, emphasizing why names should never rely on transient visual properties.
- The Component Gallery: Created by Iain Bean, this comprehensive library catalogs real-world interface components from dozens of production design systems. Spanning over 50 UI components—from accordions to visually hidden elements—it documents the myriad aliases and names different organizations use for the same core interface patterns.
- Name That UI: A handy visual dictionary designed to instantly align team members on the correct terminology for common UI components.
4. Design Token Taxonomies and Variables
Scaling design tokens across massive product ecosystems requires advanced architectural mapping:
- Intuit’s Token Case Study: Nate Baldwin documented how Intuit built a flexible token taxonomy capable of serving powerhouse brands like Mailchimp, QuickBooks, and TurboTax under a unified foundational system.
- Vodafone UK’s Variables Taxonomy Map: This advanced Figma community resource breaks down the anatomy and categorization of multi-brand tokens, illustrating the precise connections required to move seamlessly from brand primitives to page-level semantics.
- Design Token Naming Guide + Builder: Created by Romina Kavcic, this interactive tool helps practitioners configure custom naming structures incorporating components, categories, states, and roles, complemented by a structural spreadsheet inventory for bird’s-eye token tracking.
5. Product and Feature Naming
To ensure new features achieve high discoverability and user adoption, Erin Gannon’s practical framework emphasizes aligning feature titles with the user’s "job-to-be-done." By capturing how real users describe their problems in their own language, teams can bypass internal corporate jargon and build features that resonate immediately. For high-level product and service naming, Onym serves as an open-source repository organizing brainstorming tools, vetting methodologies, and etymological resources.
Future Outlook: The Road Ahead for Design Systems and Taxonomies
As artificial intelligence, automated code generation, and multi-modal design tools become deeply embedded in product workflows, the importance of pristine nomenclature will only accelerate. AI-driven design assistants and automated token pipelines rely entirely on structured, predictable metadata to generate accurate code and maintain design system integrity.
In the near future, we can expect automated linting tools that actively monitor design files and codebases for naming convention violations, flagging ambiguous variables or un-aliased color values before they reach production. Furthermore, the maturation of cross-platform design token specifications (such as W3C Design Tokens Community Group standards) will demand even greater rigor in how teams structure their naming hierarchies.
Organizations that invest in a robust, shared naming culture today will be best positioned to scale efficiently tomorrow. By treating nomenclature not as an afterthought, but as a critical interface between design, code, and human language, product teams can eliminate costly friction and deliver cohesive experiences that users effortlessly understand and enjoy.