— Una Kravets / Source (YouTube)
The nomenclature has 1 job: Being flexible. No matter how sure you are that you have made final decisions – there will always be something new that you don’t even know yet. Build your nomenclature in a flexible way.
Mainly you have two possibilities to name elements. You can name either the appearance (declarative naming) or the usage (semantic naming):
A solution could be:
Name e.g. colors strict by their appearance, e.g. green. Then you can add semantic aliases, which you can name with the usage like success or primary. In this way you can still use green for grass and you also defined which color should be used for a success state.
— Source (Atlassian Design System)
Vox Media has developed a design system for 8 brands with 250+ websites so that they name their colors on the theming level with their purpose.
Theming / multi brand approach
— Yesenia Perez-Cruz, Vox Media / Source (YouTube)
headline12, you can’t change the value of 12px afterwards, because it is linked to the name. If you name the style headline100 instead you could easily increase the value to 14px without breaking a rule.— Anna Stumpf, SinnerSchrader
elements, components, basics, …text styles, text types, text variants, text sizes, text slots, …— Anna Stumpf, SinnerSchrader