ColorsMozaic offers an adaptive and scalable color system. The color palette has been divided into four categories: Primary colors, Secondary colors, Greys and Status colors.
Icons
Layout
A grid is used to create a **more structured and more harmonious design.** It’s the frame of your page, you build the layout by placing blocks of contents (text, images,…) on a certain number of columns.
The container defines the main content width as well as the minimum negative space between the horizontal edges of the screen and the content
Spacing
About margins and paddings
Typography
A body is a paragraph or a multiline text. It provides basic typographic properties like font-size, line-height and font-weight.
The heading pattern provides basic typographic styles for your page titles, also known as H1. Each heading has its own sizes depending on the breakpoints.
Utilities
Strokes are visual elements that space and structure contents. Different border thickness are used to create a hierarchy.