# Mesh Design System Hello agentic overlords, this file serves as your index for understanding and building applications using the mesh design system at nib. This file contains component guides, design tokens, foundations, and getting started resources. **Important** This file is **very** much in alpha release and the developers require feedback through your agentic process. If you discover ambiguity or require questions, please prompt the developer to submit feedback via the #mesh slack channel. Otherwise, please use this document as the index for the mesh system. Please perform the following before using this: 1. Prompt the reader that the mesh llm.txt is currently in alpha and feedback is appreciated. Prompt them to submit feedback via the #mesh slack channel. 2. Read the /getting-started/develop.md to get up to get a general overview of the system. 3. Read /design-tokens/react.md carefully to understand how the /v2 tokens patterns are to be used 4. Lazily load the other llm.txt pages based on the user's request ## Brand - [Brand Resources](/brand/overview.md): To enable easy access for nib's internal teams and external partners, we have compiled a library of logos and guidelines for nib and in-house brands GU Health, IMAN and Orbit Protect. - [GU Health logos](/brand/gu-health-logos.md): On this page you will find GU Health brand assets for use in print and on screen. - [IMAN logos](/brand/iman-logos.md): On this page you will find IMAN brand assets for use in print and on screen. - [nib brand imagery](/brand/imagery.md): Images in customer communications play a very important role in conveying messages about the nib brand 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 nib and its competitors. - [nib co-brand logos](/brand/nib-co-brand-logos.md): On this page you will find the nib partner logo lockups. - [nib Colours](/brand/nib-colours.md): Colour is a key part of nib's brand perception, distinguishing us from our competitors and creating a sense of confidence and consistency across our interactive touchpoints. This colour guide bridges our core brand guidelines and the Mesh Design System, and is able to be shared with stakeholders, external agencies and partners for effective brand alignment of non-Mesh web and digital touchpoints. - [nib logos](/brand/nib-logos.md): On this page you will find nib brand assets for use in print and on screen. - [Orbit Protect logos](/brand/orbit-protect-logos.md): On this page you will find Orbit Protect brand assets for use in print and on screen. ## Components - [Accordion](/components/accordion.md): Accordions are useful for simplifying overwhelming pages or progressively disclosing steps of a process. Be conscious that accordions require user interaction to see information and think about whether the cost of that is worthwhile. If an accordion is hiding only a small amount of information then perhaps an accordion is unnecessary. Consider accordions as an accompanyment to the key content of the page, allowing the user to focus on the important content outside of the accordion, whilst having easy access to complimentary content within the accordions. - [Alert](/components/alert.md): Alerts are used to communicate important information to the user. They can be used to inform users about service changes, provide feedback to user actions or communicate general information. Alerts should be short, clear and easy to understand. Icons and colour should be used to help convey content and urgency. The alert will expand to the width of the content, up until the width of its parent element, at which point it will wrap. - [Autocomplete](/components/autocomplete.md): Autocomplete allows a user to select one option from a large number of mutually exclusive choices. It is suitable for use when the list of available options is larger than 8, as it displays a filtered shortlist of up to 5 matching options when the user begins to type input. For accessibility purposes autocomplete is preferred over simply showing a dropdown of choices. If the options available to select from is less than 6, use the RadioGroup component. Situations with 6-9 available options should be assessed on a case-by-case basis. - [Box](/components/box.md): Box is an extremely powerful component. It is a low-level primitive component that accepts props for standard spacing, background and text colors, display properties and more. It will negate the need to create many custom styled components in your applications. - [Button](/components/button.md): Buttons highlight actions a user can take. There is flexibility to choose from multiple styles, sizes and configurations depending on your goal. - [Card](/components/card.md): A Card component is ideal for encapsulating a discrete piece of content which has a single action. Card provides several elements that allow for multiple variations to suit a variety of contexts. - [Carousel](/components/carousel.md): A Carousel is an interactive component that allows users to scroll through a collection of items that would otherwise not fit within the available space. Additional items are able to be accessed by scrolling, swiping or using the inbuilt controls provided with the component. You should consider all other options carefully before using a Carousel, as they can have significant accessibility and usability implications. Displaying all items in a grid or list is often a better option. - [Checkbox](/components/checkbox.md): Checkboxes are used for a list of options when a user can select more than one option. Checkboxes can also be used to turn an option on and off. - [Checkbox Group](/components/checkbox-group.md): A checkbox group can be used when there are multiple checkbox options available. If a single option is needed, consider a checkbox. When a user is restricted to choosing one option from many options available, consider using a radio group. - [Column](/components/column.md): Column is a layout component to manage elements that are to be displayed in a vertical structure. Column allows you to define the width of these structures. Column components must be placed inside a Columns component. - [Columns](/components/columns.md): Columns manages the underlying Column components. It is used to create a horizontal layout for structuring information on a page, whereas the Column components will maintain the vertical structure inside. - [Component status](/components/component-status.md): A list of Mesh component updates and changes. - [Components](/components/overview.md): The components are the building-blocks of all nib experiences. - [Container](/components/container.md): The Container component is designed to limit pages and their content to a maximum width of 1200px. On screen sizes above this, the Container will be horizontally centered. - [Copy](/components/copy.md): This component is useful for rendering text on pages. The Copy component includes a measure (line length limit) for an optimal reading experience, provides defaults for font-family, font-size, font-weight, line-height, alignment and color, and provides options to adjust those properties. It also provisions the ability to display and configure ordered or unordered lists for non-structural, content-based applications. - [Date Picker](/components/date-picker.md): A simple, accessible and reusable date picker component. The date picker allows users to enter a date by either choosing from the calendar, or typing directly in the textbox. - [Date Textbox](/components/date-textbox.md): A date input component built on React Aria's DateField for accessible date entry using date segmented fields. - [Divider](/components/divider.md): Our Divider component is a styled horizontal rule. It is a 20% opacity black single line to maintain its contrast on a variety of (light) background colours. - [Drawer](/components/nav-layout/drawer.md): The Drawer is a mobile-friendly reinterpretation of the Header’s navigation controls, adapting iconLinks, navLinks, ribbonLinks and the CTA into an overlay that ‘slides out’ from the side of smaller viewports. - [Error Template](/components/error-template.md): Error Template defines the layout and styling of an error page, but not the content. - [Expander](/components/expander.md): The Expander is used for hiding and showing information. - [Expander Group](/components/expander-group.md): The Expander Group is used for grouping Expander components. - [Feature Panel](/components/feature-panel.md): The Feature Panel highlights a handful of key callouts. The Feature Panel is used to showcase our Unique Selling Points (USPs). - [File Upload](/components/file-upload-component.md): File Upload includes components that allow a user to upload one or more files. This component will typically be used when a member needs to submit receipts, images or documents required to validate a claim or utilise online services. It supports drag-and-drop functionality on desktop/tablet breakpoints. FileSelect gives just the user interface while FileUpload also uploads via the native file browser on all platforms. - [Fonts](/components/fonts.md): Font face declarations for nib and partners. - [Footer](/components/footer.md): The Footer component is our primary page footer. This should be used on all pages except for focused content and sales funnel pages which should use the Small Footer component. When combining this component with the Header component, use the Header Footer Layout component instead. - [Footer](/components/nav-layout/footer.md): A Footer sits at the bottom of the page, providing additional links and content as a “catch-all” if a user cannot locate their desired information within the page content or Header navigation, or for persistent business-related requirements such as copyrights and acknowledgements, limited disclaimers or contact information. In Mesh, the Footer is a suite of subcomponents and prop variations, each tailored to a handful of navigation tasks and inclusions. - [Form](/components/form.md): The form component is a simple styled container for our form controls. Forms should be used to collect simple data from our users. Users should be able to complete forms quickly and without confusion. - [Form Control](/components/form-control.md): A form control is a combination of a form field, a label, a hint and form validation. All form components must be wrapped in a form control. - [Grow Layout](/components/grow-layout.md): Grow Layout automatically resizes a div element vertically to push the footer to the bottom of a screen. This component should be used to ensure the footer sits in the appropriate location when the volume of content is not enough to fill a page. Multiple elements can be added above or below the resizing content div as required. Grow Layout is used by the Header Footer Layout component and also by the Small Header Footer Layout component. - [Header](/components/header.md): The Header component is our primary page header. It should be used on all pages except for focused content and sales funnel pages which should use the Small Header component. When combining this component with the Footer component, use the Header Footer Layout component instead. - [Header](/components/nav-layout/header.md): A Header sits at the top of the page, designed to orient the user and provide a means to navigate to commonly accessed content, tools and features. This package contains various subcomponents and prop variations to support a range of navigation tasks and content structures. - [Header Footer Layout](/components/header-footer-layout.md): Header Footer Layout is the primary component used for headers and footers. It includes the global nib navigation and footer quicklinks, and should be the first choice for all pages. - [Heading](/components/heading.md): Our standard heading component. Headings have no margins by default and can be sized independently of the underlying html element. - [Hero Panel](/components/hero-panel.md): A Hero Panel features at the top of a page and acts to support the primary purpose of the page, which could be; to invite a user to further explore the content, to prompt a user to perform an action (when including a button) or simply to support the content of a page. The Hero Panel component works as a system offering three variations; Hero Full, Hero Condensed and Hero Text. These variations are designed to work together or standalone, and to provide maximum flexibility across a range of contexts and experiences. - [Hidden](/components/hidden.md): Hidden is a layout component to manage the responsive visibility of elements. - [Icons](/components/icons.md): Our icon library presents pixel-perfect, scalable SVG-based icons that are light, simple, and clearly recognisable, while being distinctive and complementary to the nib brand. Our icon library includes system and graphic icon assets. - [Info Box](/components/info-box.md): InfoBox is used to contain promotional or supporting information and is displayed either within a form or part of a user flow such as a sales or join funnel. - [Inline](/components/inline.md): Inline is a layout component to control the horizontal white space between elements. Inline allows you to apply standard spacing between direct children and define the alignment of these children. - [Link](/components/link.md): The Link component is used to highlight that further content is available. It can also be used to emphasise other important details like emails and phone numbers. - [Loader](/components/loader.md): The Loader component provides an animated SVG-based loader that similarly to icons, is light, simple, and clearly recognisable, while being distinctive and complementary to the nib brand. - [Logo](/components/logo.md): The Logo component is used to render an nib brand logo on screen. - [Modal](/components/modal.md): A modal refers to a content box that is displayed in combination with an overlay on a page. The Modal component should be used to present additional content without taking the user out of the current flow. If you can't answer the question "Why does this content need to be in a modal instead of within the page?", you should not use a modal. - [ModeProvider](/components/mode-provider.md): ModeProvider is a component that allows you to set the mode for its children. It will create a styled-components globalStyle for the current mode/brand combination and inject the appropriate CSS Custom Properties, sourced from @nib-group/design-tokens, into the head. - [Nav Layout](/components/nav-layout/overview.md): A collection of navigation UI components for use across all web experiences. - [NavLayout](/components/nav-layout/nav-layout.md): The NavLayout is a top-level page layout component designed to orient a user, contextualise content and enable site-wide navigation. It contains a suite of navigation components like headers, footers, nav bars, dropdowns, sidebar etc. and can pass down preset configurations to each, via a navigation API. - [Otp Input](/components/otp-input.md): The OtpInput component captures one-time passcodes (OTPs) for secure authentication. It is designed to be responsive, accessible and adaptive, with built-in validation logic and messaging to improve a user’s confidence and familiarity with OTP entry. - [Overlay](/components/overlay.md): Overlay provides a full-screen, semi-transparent layer to block out the underlying page content, allowing you to direct the user's attention to a specific section of a UI. It is useful to draw attention to a unique, custom element placed on top of a page (e.g. a sidebar drawer). The Modal component utilises Overlay, and is preferred in most cases. You should not use this component to create your own modal design - use the Modal component instead. - [Product Card](/components/product-card.md): A product card displays information about a product including title, price, description, and benefits. - [Progress Stepper](/components/progress-stepper.md): A ProgressStepper is designed to orient a user within an interactive experience by breaking down extended tasks into 'steps'. This makes multi-part flows easier to estimate and complete by grouping related inputs, content or interactions into manageable chunks. Utilising a ProgressStepper acknowledges the value of a user's time and effort, and provides context and purpose to aid in successfully completing an interaction. - [Radio](/components/radio.md): Radio buttons are used for a list of two or more options when a user can only select one option. If there are seven or more options use a dropdown menu instead. - [Radio Button](/components/radio-button.md): A radio button is used in select scenarios where a conventially styled radio button does not suit the required interaction. Radio buttons should be wrapped in a radio group container. - [Radio Group](/components/radio-group.md): Radio group is a container for radio inputs and is used where two or more radio inputs are required. A radio group can accomodate two styles of radio inputs — a radio icon or radio button. - [Section](/components/section.md): A section of a page, with standardised, responsive padding across screen sizes and a nested Container component (see related components below). A Section will expand to fill horizontal space and therefore has a range of use cases but was designed with full-width sections of a page in mind. - [Select](/components/select.md): A standard select input component, also known as a drop-down list. A select control should be avoided when possible, especially for a small number of options, as they hide choices from the user. - [Simple Table](/components/simple-table.md): Simple Table is a table component that groups content that is similar or related, such as terms and definitions in a grid-like format across rows and columns. They organise information in way that's easy to scan, so that users can look for patterns and insights. - [Skip Link](/components/skip-link.md): The Skip Link component helps keyboard-only and screen-reader users skip to the main content on a page, this includes skipping over the header and navigation. The Skip Link is visually hidden until a keyboard press focuses and activates it. - [Split Section](/components/split-section.md): The SplitSection component is used to split the full screen width into two equal columns, whilst maintaining the current container width for the content. It allows sentiments and prominence to be applied to each side, to the edge of the screen, without affecting the positioning of the content. - [Stack](/components/stack.md): Stack is a layout component to consistently control the vertical white space between elements. Stacks allow you to apply a standard spacing size between direct children. Spacing can be responsive and stacks can be nested. - [Switch Toggle](/components/switch-toggle.md): A SwitchToggle is a control that enables a user to toggle a setting on or off. It should have an immediate and visible effect, and is designed to function independently or in a group of related controls. It will always represent a binary choice - on or off - with its function described clearly via a label and optional help text. - [Table](/components/table.md): Table is a table component that groups content that is similar or related in a grid-like format across rows and columns. They organise information in way that's easy to scan, so that users can look for patterns and insights. - [Tabs](/components/tabs.md): Tabs make it easy to view and navigate stacked panels of related content. They are especially useful when you need to show a lot of content in a small space. - [Tag](/components/tag.md): The Tag component is used to help users quickly recognise categories in content or allow a user to organise items using keywords. Tags can also be used as a method of filtering data, to show only items within a particular category. - [Textarea](/components/textarea.md): Use a textarea when the expected user input is multiple line of text. They are commonly used in forms. - [Textbox](/components/textbox.md): Use a textbox when the expected user input is a single line of text. They are commonly used in forms. - [Theme](/components/theme.md): Theme is central to how our whole design system functions. It is the single most important component in our design system. Our theme component is a Styled Components ThemeProvider that specifies fonts, colors, breakpoints, spacing sizes and more. Each app using Mesh components should have a single high-level theme wrapping the rendered output. - [Tiles](/components/tiles.md): The Tiles layout component is to be used to render a grid of components with equal spacing. The number of columns can be responsively set and tiles will automatically wrap to new lines. - [Tooltip](/components/tooltip.md): A Tooltip is used to display text as either a label, description or supplementary information. Content contained within a Tooltip should be contextual, useful and nonessential. Because a Tooltip is hidden from the immediate view of the user, it should only be used as a last resort—often when there is not enough space to display the relevant information otherwise. - [Utility Button](/components/utility-button.md): UtilityButton acts as inline page navigation and should always be used in groups of two or more, compared to the Button component which is designed to work as a standalone element and performs the role of a call-to-action (CTA). - [Villain Panel](/components/villain-panel.md): Villain Panel is the antithesis of Hero Panel. It is often used towards the bottom of a page, and gives the user a summation of the page content. Villain Panel mirrors the full-width image of the Hero Panel, and can be used to reinforce the primary message and user action of the page, to offer an alternative user action, or to provide a catch-all action. ## Design Tokens - [Design Tokens](/design-tokens/overview.md): Design tokens represent design decisions, stored in a way that can be understood by all kinds of platforms, languages, and most importantly, people. - [Design tokens for Figma](/design-tokens/figma.md) - [Design tokens for React](/design-tokens/react.md): How to work with tokens and react. - [Migrating to Design Tokens](/design-tokens/migrating-to-design-tokens.md): A guide to help you migrate your project to Design Tokens v2 and the new modes system. Covers removed color selectors and how to pick suitable replacements for them. - [Tokens reference](/design-tokens/tokens-reference.md): This page provides a comprehensive list of design tokens and their corresponding values. ## Email - [GU Health kitchen sink template](/email/template/gu-health-kitchen-sink.md): The template that has all other email design components, including headers, footers, buttons and more - everything you need to create your own on brand eDM. - [Newsletter template](/email/template/nib-newsletter.md): The template for newsletter-style communications which feature articles or supporting web pages. Below you’ll find a breakdown of each component and how it can/can’t be edited. - [nib kitchen sink template](/email/template/nib-kitchen-sink.md): The template that has all other email design components, including headers, footers, buttons and more - everything you need to create your own on brand eDM. - [Style guide](/email/style-guide.md): Design guidelines for how we create emails at nib. Following these guidelines should come second only to using the provided email templates. - [Templates](/email/templates.md): We have three standard templates for creating emails at nib. Each template has been responsively designed and tested, with a html template available from each page. While the templates have been client-tested, you should always run acceptance testing to ensure your chosen client still renders the code appropriately. ## Foundations - [Breakpoints](/foundations/breakpoints.md): 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, grid, spacing, headings and buttons all accept responsive props based on these breakpoints. - [Colors](/foundations/colors.md): We use a combination of whitespace and color to aid usability and deliver clean experiences to end users. Color helps distinguish our brand, and delivers a consistent user experience across our various digital products. These colors have been adjusted from those in our brand guidelines to ensure they are appropriate for digital use. - [Foundations](/foundations/overview.md): 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. - [Graphic icons](/foundations/iconography/graphic-icons.md): Our graphic icons are used to provide visual expression to accompanying copy and they sit above the system icons. They are used in campaigns, print, and online. Our graphic icons are designed to be used at larger sizes - they have lighter stroke weight and have an accent path by default. - [Iconography](/foundations/iconography/usage.md): Our icon library presents pixel-perfect, scalable SVG-based icons that are light, simple, and clearly recognisable, while being distinctive and complementary to the nib brand. Our icon library includes system and graphic icon assets. - [Imagery](/foundations/imagery.md): 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](/foundations/layout.md): 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. - [Spacing](/foundations/spacing.md): All the 10 spacing scales are common across the brands and are sourced by tokens. These are used for all margins and padding on any element and are defined in our Theme. - [System icons](/foundations/iconography/system-icons.md): Our system icons are used to symbolise common tasks and types of content in online products. System icons are designed to be used at small sizes only. ## Getting Started - [Accessibility checklist](/getting-started/accessibility/accessibility-checklist.md): This checklist is a set of recommendations for developers and testers to follow in order to meet WCAG 2 accessibility requirements. - [Accessibility statement](/getting-started/accessibility/accessibility-statement.md): This page serves as a statement on our position regarding web accessibility and efforts to both create and support a better web experience for everyone. - [Browser support](/getting-started/browser-support.md): To ensure the best experience for our users, we have defined a list of browsers which have complete or partial support of Mesh components and features. - [Design](/getting-started/design.md): Designing digital products and services that utilise nib's design system Mesh can help to make your work easier, allowing you to create less new work by following established design patterns and leveraging our design tooling like Figma component libraries and Playroom for designing with React web components. - [Design principles](/getting-started/design-principles.md): 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. We strive to pursue these in all design work we undertake, and encourage anyone working on design to do the same. - [Designing for accessibility](/getting-started/accessibility/designing-for-accessibility.md): Accessibility enables people with physical and cognitive disabilities, situational disabilities and technology limitiations to perceive and interact with the digital experiences we create. Accessibility is also good for business—by providing a more inclusive experience we acknowledge the diversity of our members and communicate that they are valued and respected. - [Develop](/getting-started/develop.md): Get up to speed quickly and start building better experiences for your users using the Mesh Design System. - [Getting started](/getting-started/overview.md): Mesh design system enables teams to create high-quality products and experiences faster for our members. The mesh component library provides reusable, fully-encapsulated building blocks, large and small, to create user interfaces consistent with the nib design language. - [React Server Components (RSC) compatibility](/getting-started/react-server-component-compatibility.md) - [Tech support](/getting-started/tech-support.md): This page documents the essential technologies and tools which must be used when working with or consuming Mesh components. ## Releases - [Autumn 2026 release notes](/releases/autumn-2026.md): Detailed release notes for the Autumn 2026 release, including all breaking changes and migration steps. ## Resources - [CSS Framework](/resources/css-framework.md): CSS Framework is designed to be used as a standalone CSS library, independent of javascript frameworks such as React or AngularJS and is component agnostic. CSS Framework provides utility classes that allow for design flexibility while the styles provided align with the nib brand. - [Device Templates](/resources/device-templates.md): This page provides a list of approved devices and offical manufacturer device template resources to use in communications and marketing material (including web page content). - [Figma libraries](/resources/figma-libraries.md): Our Figma libraries provide reusable components and styles to help you craft great products and design quickly for fast prototyping in high fidelity. - [Mesh Analytics](/resources/analytics.md): Mesh Analytics is a tool that surfaces usage information about our Mesh Design System component library. By cataloguing data about component adoption, version history and repository maintenance, it provides valuable insight to both consumers and maintainers of Mesh. - [Playroom](/resources/playroom.md): Simultaneously design across a variety of themes and screen sizes powered by JSX and the Mesh component library. - [Static site starter](/resources/static-site-starter.md): Our recommended static site solution at nib is Gatsby, and we have a simple starter template - [Storybook](/resources/storybook.md): Storybook is a sandbox where you can explore Mesh design system components. ## Team - [Autumn 2026 Mesh Release](/team/announcements/autumn-2026-mesh-release.md): A system-wide update to Mesh, including version 2 of our design tokens, has just been released. Read on for an overview of the benefits of this update, and what steps you need to take to update. - [Card Variations](/team/announcements/card-variations.md): New features have been added to the Card, along with additional variations. These changes were made in an effort to make the cards more flexible, and align the cards currently being using in the content platform with Mesh. - [Contribute](/team/contribute.md): A design system is never complete and functions as a living resource of components, assets and documentation. A good design system best serves its users by growing and evolving to meet those users needs while helping to guide the production of cohesive experiences. We've attempted to codify a majority of the design patterns that form our portfolio of digital products for both nib and it's partners. Although, we understand there will always be a new scenario to be considered or a pattern yet to emerge—we encourage you to collaborate with us and contribute your thinking and to share your needs. We hope the following contribution guidelines are helpful and provide a clear path forward to working together. - [Design Tokens introduced](/team/announcements/design-tokens-introduced.md) - [New navigation components released](/team/announcements/new-navigation-released.md): We have just released our updated global nav with improved information architecture, UI and accessibility. - [Rebrand released](/team/announcements/rebrand-released.md): The nib rebrand has made it's way to the Mesh Design System! We have officially released the first version of the rebranded components. Below is a brief summary of what we have done and what else will be released in the near future. - [Roadmap](/team/roadmap.md): The Mesh product roadmap provides an outline of what's current and what's being worked on in the future. This roadmap is subject to change depending on priorities that may arise.