Foundations

ColoursMozaic offers an adaptive and scalable colour system. The colour palette has been divided into four categories: Primary colours, Secondary colours, Greys and Status colours.
Content design
UX Writing Principles
Icons
Layout
Container
The container defines the main content width as well as the minimum negative space between the horizontal edges of the screen and the content
Grid system
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.
Screens sizes and responsive
Spacing
Magic Unit Margins and Paddings
About margins and paddings
Typography
Body styles
A body is a paragraph or a multiline text. It provides basic typographic properties like font-size, line-height and font-weight.
Font Families Hero styles Font scales Text colors
Utilities
Border radius Images aspect ratios Shadows Strokes
Strokes are visual elements that space and structure contents. Different border thickness are used to create a hierarchy.