In the digital product ecosystem, an invisible friction constantly drains engineering speed, alienates users, and fractures cross-functional collaboration: the universal challenge of naming things. As Phil Karlton famously quipped, "There are only two hard things in Computer Science: cache invalidation and naming things." Today, that adage has expanded far beyond traditional software engineering into the domains of product design, UX architecture, and design systems engineering.
The language we choose does not merely label our creations; it fundamentally shapes how we think about them, governs the conversations we have around them, and dictates how users interact with them. When organizations suffer from chronic confusion regarding colors, iconography, user interface components, and feature sets, the root cause can almost always be traced back to unstructured, ambiguous taxonomy.
Designers, developers, and product managers frequently fall into one of two dangerous traps. On one end of the spectrum lie names that are too generic (such as Container, Box, or Item), which strip away vital context and leave teams guessing at a component’s intended function. On the other end lie names that are too specific (BlueSubmitButtonWithRoundedCorners), which destroy flexibility, encourage codebase bloat, and prevent reuse.
To bridge this linguistic divide, industry practitioners have increasingly turned to structured taxonomies, community-driven component galleries, and systematic token frameworks. This investigative report explores the methodologies, resources, and institutional strategies deployed by leading design systems teams to solve the perennial crisis of nomenclature.
Detailed Chronology & Evolution of Digital Taxonomy
The evolution of naming conventions within digital design mirrors the maturation of the web industry itself. In the early days of web development, naming was an entirely ad-hoc affair. Developers relied on idiosyncratic shortcuts (nav, left-col, red-text), while designers saved Photoshop layers as Rectangle 4 copy 2 or Layer 12.
As digital products scaled into enterprise-grade multi-brand empires, this wild-west approach became untenable. The timeline below tracks how the industry transitioned from chaotic tribal language to standardized systems engineering:
The CSS Methodology Era (Early 2010s): Recognizing the fragility of global styles, methodologies like BEM (Block, Element, Modifier), OOCSS, and SMACSS emerged. These frameworks forced developers to think structurally, introducing formalized boundaries for class nomenclature. However, they remained strictly code-centric, bridging little of the gap between design software and production environments.
The Rise of Design Systems (Mid 2010s): With the arrival of tools like Sketch, Figma, and centralized component libraries, UI design systems took center stage. Teams realized that a button called a "Call to Action" in design tools often translated to btn-primary in code and ConversionAction in analytics, creating severe cognitive friction across silos.
The Design Token Revolution (Late 2010s – Present): Pioneered by forward-thinking organizations and system architects like Nathan Curtis, design tokens decoupled design values (colors, spacing, typography) from hardcoded implementations. This necessitated an entirely new branch of linguistics: token taxonomy. Systems had to account for global primitives, semantic intentions, and component-specific variables capable of supporting multi-brand, multi-themed global architectures.
Mastering nomenclature requires stepping outside familiar development silos and drawing inspiration from external taxonomies, structured guidelines, and real-world inventories.
1. Thinking Outside the Box: Inspiration for Code and Classes
When naming HTML classes, CSS custom properties, or JavaScript utility functions, developers often exhaust standard vocabulary. Resources like Classnames (curated by Paul Robert Lloyd) offer an expansive library of thematically grouped words. Rather than relying on tired computing tropes, developers can tap into vocabularies derived from nature, art, theater, music, architecture, fashion, and publishing. These curated collections provide precise descriptors for behavior, hierarchy, association, and state.
2. Taming the Spectrum: Color Naming
Naming colors programmatically or systematically is notoriously difficult. Hex codes are meaningless to humans, while descriptive names often clash ("Is this Slate Gray, Charcoal, or Cool Grey?"). To combat this, David Aerne’s comprehensive Color Names repository provides over 30,000 unique color names sourced from community contributions and historical references. Paired with interactive color pickers and search utilities like Color Parrot, teams can establish consistent, human-readable color tokens without resorting to arbitrary numerical scales that break down during re-skinning.
3. Scaling Layers and Groups in Design Files
Inconsistent naming inside design tools (Figma, Sketch) invariably causes developer handoff errors. Design system expert Javier Cuello has codified a rigorous set of naming best practices for layers, groups, and components. According to Cuello’s framework, an effective design name must possess a logical structure, remain concise, carry unambiguous meaning across disciplines, and avoid relying on superficial visual properties (such as naming a layer DropShadowBox instead of CardContainer).
4. Decoding UI Components via Real-World Galleries
When struggling to name an unfamiliar interface element—such as deciding between an "Accordion," "Collapsible," or "Expander"—designers often fall down a rabbit hole of subjective debate. Iain Bean’s Component Gallery solves this by aggregating real-world examples of over 50 UI components across dozens of enterprise design systems. By inspecting what established design systems call these elements, teams can adopt industry-standard terminology that users and developers already recognize. Complementary visual dictionaries like Name That UI further streamline this alignment process.
5. Architectural Blueprints for Design Tokens
As modern applications scale to support multiple brands, light/dark modes, and white-label tenants, token architecture becomes profoundly complex.
Intuit’s Token Taxonomy: The parent company behind QuickBooks, Mailchimp, and TurboTax faced the monumental challenge of unifying diverse brand design tokens under a single systemic umbrella. Nate Baldwin’s published case study details how Intuit engineered a flexible token taxonomy capable of scaling across disparate product ecosystems.
Vodafone UK’s Variables Taxonomy Map: Demonstrating a gold standard in multi-brand token management, the Vodafone UK Design System team released an exhaustive Variables Taxonomy Map in Figma. Building upon Nathan Curtis’s foundational work, this map orchestrates token flows across four distinct layers—spanning from brand primitives and semantic tokens down to component-level applications.
The Design Token Naming Guide & Inventory: Created by Romina Kavcic, tools like the Name Design Tokens Guide and the Design Token Names Inventory Spreadsheet provide interactive builders and bird’s-eye spreadsheet matrices. These resources allow teams to structure token components, categories, states, and roles cleanly without losing track as systems scale.
Official Statements & Industry Insights
Industry leaders continually emphasize that nomenclature is not merely a cosmetic choice, but a core architectural pillar of product development.
"The right name is the one that is well-understood and actively used by both the team and the users," notes Vitaly Friedman, creative director and co-founder of Smashing Magazine. "So much time is wasted speaking about the very same thing but in different dialects—the designer’s dialect, the developer’s dialect, the product manager’s dialect, and the user’s dialect. That fragmentation is what quietly sabotages team velocity and breeds user confusion."
Product strategy experts also emphasize that feature adoption is inextricably linked to naming clarity. In her seminal guide “What Do We Call This Thing?”, UX strategist Erin Gannon highlights why newly engineered features often suffer from abysmal initial discoverability:
"Feature adoption takes time—first the feature must be discovered, then understood, then tried, learned, and eventually integrated into existing workflows," Gannon explains. "Good feature names must be driven by user problems rather than internal corporate jargon. They should signal the value or outcome of a feature (the ‘job-to-be-done’) and tap directly into the user’s own vocabulary. Always ask users to explain a feature in their own words, and then use those exact words."
Future Outlook: The Horizon of Semantic Systems
Looking ahead, the discipline of digital nomenclature is poised for deeper automation and tighter systemic integration. As AI-driven design assistants, automated code generators, and token-to-code pipelines (such as Style Dictionary and Tokens Studio) become ubiquitous, the tolerance for ambiguous naming conventions will shrink to zero.
Future design systems will likely leverage semantic graph databases where component names, CSS variables, Figma tokens, and analytics events are automatically validated against unified organizational ontologies. Furthermore, multi-modal applications—spanning spatial computing (AR/VR), voice interfaces, and traditional screen-based UIs—will force teams to abstract component names away from visual metaphors entirely, focusing instead on pure behavioral intent and semantic capability.
Organizations that proactively audit their taxonomies today will find themselves uniquely positioned to scale seamlessly tomorrow, eliminating translational friction and fostering an environment where design, engineering, and product speak the exact same language.
Editor’s Note: The tools, repositories, and frameworks highlighted in this report were created by independent contributors dedicated to improving the craft of web design and engineering. At Smashing, we champion an open, accessible, and user-centric web. For organizations interested in continuous learning, explore our advanced online workshops and training sessions designed to elevate your team’s technical capabilities.
