How I name Design Tokens and Components

This webpage discusses the author’s approach to naming design tokens and components. It begins by outlining how the author uses BEM (Block Element Modifier) methodology to name components, with blocks, elements and modifiers. It then details how the author structures design tokens into three levels – reference tokens, system tokens and component tokens. Reference tokens are abstract, while system tokens become more semantic and descriptive. Component tokens include the actual components. The author provides examples of how they name design tokens and components according to these methodologies, with the goal of creating human-readable yet structured and scalable naming conventions.