Design Tokens for Mesh have just been released!

Two joyful figures, one piggybacking the other, symbolising support. They are depicted with vibrant colours, moving forward with joy

Mesh enables teams to create high-quality products and experiences faster for our members.

Getting Started

nib’s Mesh Design System enables teams to create cohesive, high-quality products and experiences faster for our existing and prospective members, providers and partners.

Get started with Mesh

Design principles

These principles underlie the way we ‘do design’ at nib. They encourage us to continue striving to produce elegant products and solutions that best balance the needs of our end users with our business goals.

Accessibility

Accessibility enables people with physical and cognitive disabilities, situational disabilities and technology limitations to perceive and interact with the digital experiences we create.

Foundations

Our Foundations library covers nib’s use of color, typography, imagery, iconography, layout and spacing, to ensure consistency across our digital products and services.

Design

Designing digital products and services with Mesh can help to make your work easier, by utilising established design patterns and leveraging tooling such as Figma component libraries and Playroom.

Learn more about designing with Mesh

Figma libraries

Our Figma libraries provide reusable components and styles to help you craft great products and design quickly for fast prototyping in high fidelity.

Layout

Mesh provides a set of utility layout components which manage structure and spacing between elements.

Playroom

Playroom allows you to quickly experiment with real Mesh components, real interactivity and real limitations of both the system and the web platform.

Develop

Develop better experiences quickly and efficiently with Mesh, leveraging our React Component library, site starter templates and tooling like Storybook to effectively implement your designs to code.

Learn more about developing with Mesh

Components

Mesh’s library of React Components form the building-blocks for all nib experiences, from forms and interactive elements to commonly used content and messaging patterns.

Storybook

Storybook allows you to quickly experiment with real Mesh components, real interactivity and real limitations of both the system and the web platform.

Static site starter

Our static site starter has been created as a template repository for creating your own repo, utilising Gatsby, a React-based open source framework for creating websites and apps.

Resources

Quickly navigate to commonly accessed resources for nib’s internal teams and external partners.

Brand

Our library of brand assets includes logos for nib and its partners, email templates and brand imagery guidelines to ensure consistent tone-of-voice through our use of visual assets.

Iconography

nib’s icon library includes system and graphic icon assets, designed for visual consistency and communication across sizes and contexts.

CSS Framework

Designed as a standalone library independent of any javascript frameworks, our CSS Framework provides component-agnostic utility classes that allow for design flexibility while maintaining alignment with nib’s digital assets.