Design Tokens for Mesh have just been released!
Skip to content

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.

Color Guidelines

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.

Typography Guidelines

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.

Imagery Guidelines

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.

Layout Guidelines

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.

Breakpoints Guidelines

Spacing

Mesh includes 10 spacing sizes. These are used for all margins and padding on any element and are defined in our Theme.

Spacing Guidelines