Autumn 2026 Mesh Release

Today is an exciting day as we release version 2 of our design tokens package, and a system-wide update to Mesh to integrate these new tokens. Let's dive into the details of what's new, and what you need to do to update your assets.

Tokens v2

Design Tokens v2 includes a number of structural and aesthetic improvements for our consumers.

Primary output format is now CSS custom properties

The primary output format of our tokens is now CSS custom properties, which can be imported directly into your app. This allows for better performance and easier integration with non-JS frameworks.

import '@nib-group/design-tokens/brand/nib/tokens.css';

Sentiments and prominences

Modes have been replaced by sentiments and prominences, allowing for more flexibility and control over the styling of our components. Sentiments are the new way to express the intent of a component, while prominences allow you to tweak the intensity of that sentiment. Sentiments can be thought of as "background-color modes", or what we previously just called "modes", and prominences give you more options for ramping up or down the intensity of that sentiment.

Spacing and container modes

Previously, modes were used to control only the colors of our components. In v2, we have expanded the use of modes to also control spacing and container styles.

There are now a range of spacing scales to choose from (from condensed to spacious) that can be applied to any component. Information-dense applications and portals will benefit from a more condensed spacing, while more marketing-focused sites may want to use the spacious spacing to create more whitespace and a more premium feel.

Similarly, the width of the container can now be controlled by a mode, allowing you to choose the appropriate width for your content.

Like sentiments and prominences, these can be set once at the root of your app, or anywhere in your component tree.

Dark mode for nib

A big improvement bundled in this update is the addition of dark mode support for nib (we hope to extend this to other brands in the future).

Dark mode is powered entirely by the user's preferences. If their browser or operating system is set to dark mode, they will automatically get the dark mode version of our components. There is no need for consumers to do anything to enable this, and in fact there is no way to force dark mode on or off for nib components, as we want to respect the user's preferences.

GitHub Packages

This major release of tokens necessitates a major version bump to all Mesh packages, as the tokens are a core dependency of our system. We have taken the opportunity to include some other breaking changes in this release, most notably the renaming and re-homing of all mesh packages on the GitHub Packages registry. This is in line with our move to GitHub for package management across the group, and will allow us to have better security controls and user management for our packages.

Each package has been published under the @nib-group scope, with a new mesh- prefix in the package name for easier discoverability. Both @nib and @nib-components packages have been migrated.

For example:

For reference, see the full list of package name changes in our migration guide.

Bundle size improvements

Tokens package sub-path exports

Sub-path exports added to the design-tokens package, allowing consumers to import only the tokens they need, rather than the entire package. This will make the largest difference for projects that only support a single brand who were previously importing the entire token set, including tokens for brands they don't support.

Theme package sub-path exports

A sub-path export has been added for each brand's theme. This allows consumers to import only the theme they need, rather than the entire package. The previously exported theme named-exports have been removed, so you will need to update your imports to use the new sub-paths. For example:

import Theme, {nib} from '@nib-components/theme';

import Theme from '@nib-group/mesh-theme';
import nib from '@nib-group/mesh-theme/brand/nib';

Theme selectors removed

The theme selectors that were flagged as deprecated in the previous release have now been removed. Any color imports will have to be removed, as well as properties on components like Box that map to theme-based values:

- import {colorBrandBase, colorWarmWhite20, colorWhite, colorDarkest} from '@nib-components/theme';

const App = () => (
-  <Box background="brandBase" foreground="white">
+  <Box sentiment="hero" background="default" foreground="default">
);

Styled Components theme object significantly reduced

In preparation for our move away from Styled Components, we have removed 90% of the properties from our theme object, leaving only the id, some token mapping and some button overrides. We are able to do this because the tokens themselves now contain all the necessary information for styling our components, and the theme object is no longer responsible for providing any additional styling information.

This change will make our migration away from Styled Components much easier, and should help with reducing the bundle size of our theme package.

Package deprecations

We have taken the package migration as an opportunity to clean up some of our older packages that are no longer fit for purpose, or have modern replacements. The following packages have been deprecated and will no longer receive updates:

• react-html
• masked-textbox
• password-textbox

We will also be adding warnings to a number of packages that are still supported but have modern replacements, such as the header, footer and header-footer-layout packages, which have been superseded by the nav-layout package.

Figma support

We are yet to add the new tokens to our Figma libraries, but this is on the roadmap for the next few months. In the meantime, we recommend utilising playroom for prototyping designs, or continue to use the previous version of the tokens in Figma, with annotations to indicate any discrepancies between the old and new tokens.

If you need assistance with understanding the new tokens, or how to use them in your projects, please reach out to the DesignOps team for support.

Next steps

With all these new packages released, the next step is to update your projects to use the new tokens and packages. You can find the new package names in our migration guide.

Feedback and support

Please reach out if you have any questions or feedback, or if you need help updating your assets. We're available on Slack or email.

Posted 16/04/2026