Design Systems often live within design tools as component libraries.
Maybe there is a code component library so developers can work with components as well.
- often badly documented (why add docs, you can just copy and paste the component)
- hard to understand and reason about (e.g. why is the padding
4px? Why is the button
- work-intense to keep up to date when the design system changes
Define the design tokens as global entities but develop the components operating within their own semantic context.
BEM - Block Element Modifier
BEM is a highly useful, powerful, and simple naming convention that makes your front-end code easier to read and understand, easier to work with, easier to scale, more robust and explicit, and a lot more strict.
Create consistent variable names for design tokens without introducing new mental models.