Naming convention

Mozaic is a product used by a lot of people. When so many people work together from different places on such a big project, you need to establish some ground rules that everyone needs to follow. Designers of Mozaic follow some rules across every tool to create consistency and simplify the collaboration process.

English for everyone

Every file, layer, symbol and so on are named in English.

File Naming Conventions

The prefix always contains two letters depends on the type of pattern as you can see below: [XX]FileName

PrefixPattern typeDescription
[AA]StylesThe styles correspond to Mozaic's foundations (Colors, icons, fonts, shadows, ...)
[BA]Simple ComponentsThe simple components are build from the styles (Buttons, links, tags, forms, ...)
[BB]Complex ComponentsThe complex components are depending on simple components or group together several simple components
[ZZ]Specific librairiesTools, documentation, ...

Symbols categorization

We use this categorisation to create consistency in our libraries:

👾 For developersThese symbols should not be used in your designs. They are meant to share the different states of a component with developers.
🛠 ToolKitThis section contains the symbols used to build the final symbols. They are not meant to be used directly but to be accessible through symbol overrides.
Component NameThis is where you'll find ready to use symbols of the library.


Components naming

We use PascalCase for the naming of our symbols and our artboards. Pascal case combines words by capitalizing all words, even the first word and removing the space. For example, user login count in raw text becomes UserLoginCount in PascalCase.

Specific Naming

We use a double hyphen as suffixes to indicate specific information. For example: Button / 01-Solid / 01-S / 01-Primary--Campus