Skip to content

Naming conventions (Designers)

Persist the same component name throughout the design, code, and conversation Nathan Curtis

Naming space

Eufemia makes use of a very simple 8px unit grid. Margins, paddings, and distances consist of multiples of 8 (mostly - sometimes half and quarter units are required). If we were to combine multiples of this 8px 'space block', we could end up with something like this:

Naming space units
Naming space units

These titles can then be transferred to components, for example, tables. A 'medium' table would refer to the amount of padding in the cells.

Applying space to tables
Applying space to tables

The same can apply to components such as cards, form rows, etc. Responsive breakpoints can switch between these spacing units to expand or contract the overall size of an object.

Naming Colors

Eufemia for the web uses a simple naming system:

Color name + percentage

Depending on where the color will be used, its name formation will be different. For example, in Figma (and other design tools), the name is constructed thus:

The color name is written with spaces between words. The first word starts with capital. Some color names have a percentage sign denoting the tint value.


Fire red 8%

Whereas in CSS as a custom property this is written:


Colors have a naming convention across all platforms and formats. Please refer to the table in colors section.

NB! Android and iOS will have a different format for the same names. This guide is for application in web products.

Naming conventions in design applications

We don't have a naming convention for design files in Figma. However, it is encouraged to name your design file frames and interface designs with clear logical names in English.

However, to maintain consistency, in Figma we name Pages and Frames (canvases) with the first letter capitalized.

Example of a Figma Page name:

04 Spacing & Common components

Example of a Figma Frame name:

02 Spacing components - horizontal

Actual components are written with all small letters.

Example of a Figma component name:

date picker

If in doubt, look at the main Eufemia file - Eufemia - Web.