Autumn 2026 Mesh Release and Design Tokens v2 now available! Read the announcement
    DesignDevelopAnalyticsFeedback
    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.

    Design principles

    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

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

    Foundations

    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.

    Figma libraries

    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

    Layout

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

    Playroom

    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.

    Components

    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

    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

    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

    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

    Iconography

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

    CSS Framework

    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.