Naming Convention

A naming convention is a set of guidelines and rules for naming design elements, components and styles consistently throughout a design system. The importance of a naming convention lies in its ability to facilitate the search and reuse of elements, promote consistency throughout the system and reduce confusion. It is essential for component discovery as it allows for more precise searches.

Rules

General rules

To ensure consistency in the naming of design elements, we recommend the following general rules:

1. Use a consistent naming convention
   Stick to the rules. Look carefully at what's already there and how it's named.

2. Use descriptive names
   Use names that are easily understood by external contributors. Avoid abstract names, acronyms and abbreviations.

3. Consider scalability and future use
   Avoid being more precise than necessary, as this may conflict with future use.

Concrete usage

In terms of concrete use, we have agreed on the following rules:

1. Use kebab case for concatenation
   Connect words in a component name with dashes, using lower case only.

2. Main element first
   The first word should always be the descriptive name of the component or its primary category, such as button, input, menu or teaser. The use of such generic names can be found by following reputable sources such as UI Guideline - Component Standardisation to avoid confusion and unnecessary discussion.

3. element → context → variant → state
   Wherever only one name is possible (e.g. Figma), it should be set in the former order. For example button-primary--small:hover.
   For CSS and other uses where multiple names are possible and practical, use cascading. The above example would be set in class names like button, button-primary, button--small, button:hover (in CSS :hover and some other states are pseudo-classes).

Organisation

We kind of follow the Atomic Design way.
Our smallest elements, such as colours, fonts and the like, are defined under Electrons.

Next in hierarchy are Atoms, which contains buttons, input fields, icons and other simple items.

The next level would be Molecules for simple combinations of these elements. For example, a search field with a label, an input field and a button, or a menu, or a content card with a title, some content and a read more button, or just a simple form.

The highest level would be Organisms, for more complex elements that contain several components, such as a header, a complex form layout and more.

Templates are more like examples of possible arrangements with several patterns, components and more.