Finding a Vocabulary that Scales

Naming is one of the harder parts of building a design system. Names that are too generic become ambiguous, while overly specific ones lock you into inflexible structures. A growing collection of tools, guides, and case studies addresses this directly, offering concrete methods for choosing names that hold up as a system grows.

For broad inspiration, Classnames provides thematic lists of words suitable for HTML classes, CSS properties, and JavaScript functions. Beyond conventional technical terms, it includes collections from areas like nature, theater, and architecture. The Component Gallery offers another angle: a searchable repository of components from real-world design systems, listing alternative names for more than 50 UI elements.

Structuring Effective Names

Javier Cuello’s naming best practices offer a starting point for consistent, scalable layers, groups, and components. A good name is short, meaningful, and understandable by entire team—and avoids references to visual properties. His guidelines cover both high-level principles and nuanced details for naming colors, sizes, and components.

Romina Kavcic’s Design Tokens Naming Playbook takes a deeper dive into token management. It covers naming structure approaches, building searchable databases, and token automation, and includes an interactive playground. A companion Figma template allows hands-on experimentation with different naming structures.

Case Studies and Playbooks

When the team at Intuit needed a token taxonomy that worked across diverse products like Mailchimp and TurboTax, they moved beyond their brand theme. Nate Baldwin’s case study examines the pain points of their old system, the criteria for a new one, and the resulting flexible taxonomy.

Adobe’s Spectrum design system tackles color naming by pairing a color family classifier (e.g., blue) with an incremental brightness scale (50–900). This combination keeps nomenclature logical and scales easily. For automated color identification, the Color Parrot Twitter bot can name colors in an image when mentioned in a reply.

Vodafone UK’s Variables Taxonomy Map models a token system for a complex multi-brand environment. Built on Nathan Curtis’ work, it visualizes a four-collection architecture—from brand and primitives to semantics and pages—where a token’s name reveals both its usage and representation.

Workflow and Inventory Tools

Kavcic’s Design Token Names Inventory spreadsheet provides a four-level structure for tracking tokens across themes and modes, making filtering and adding new tokens simple. While useful standalone, it integrates with Figma via the Google Spreadsheets plugin or Kernel plugin, so spreadsheet edits reflect in design files.

A curated list of additional Figma kits and resources covers further naming approaches for those exploring beyond these specific systems.