Foundations
Foundations form the visual and structural basis for our design components and libraries. These are the basic essentials that underpin Mesh, forming the crucial bridge between our brand proposition and guidelines, to their implementation across our suite of digital products and services.
Mesh's Foundations include guidelines around effective, cohesive and consistent usage of:
Colors
Color helps to distinguish our brand and deliver a consistent user experience across our various digital products. We use a combination of whitespace and color to aid usability and deliver clean experiences to end users.
Typography
Typography helps to create structure and hierarchy within a page or experience. It also helps users read, absorb and comprehend content. Our chosen fonts have been selected for how they pair, for their range of weights and for their ability to effectively communicate with the user.
Imagery
Images in customer communications play a very important role in conveying messages about our brands and our target market. As a result, the style of images we use must meet a refined but flexible brief which ensures we produce a strong point of difference between our brands and that of our competitors. We use imagery to facilitate humanised, comfortable and confident interaction between our members and nib's digital products and services.
Layout
Mesh provides a set of utility layout components which manage the structure and spacing between elements. By using these layout components, we remove the risk of inconsistent spacing between our UI components and are left with a simple and responsive spacing standard for a variety of use cases.
Breakpoints
Breakpoints underpin our responsive strategy for the entire system. Breakpoints are used internally by the majority of components and are often exposed externally to allow responsive configuration. Our layout components, spacing, headings and buttons all accept responsive props based on these breakpoints.
Spacing
Mesh includes 10 spacing sizes. These are used for all margins and padding on any element and are defined in our Theme.