Latest Releases

Color UtilitiesCSS FrameworkESLint PluginFigma ToolkitNordiconsThemesDesign TokensWeb ComponentsWebfonts

Nord Design System’s parts are versioned and released using Node Package Manager. NPM’s organization page lists all packages available and their most recent versions.

Design Tokens

8.0.0 New

  • New major release that unifies the two design system platforms into a one platform that can serve all of Nordhealth. This change allows us to better support the next generation of apps and generative AI experiences at Nordhealth. ✨
  • This new version ships with two distinctive brands, therapy and veterinary. You can choose the currently active brand from the top left corner of this documentation website. Once chosen, you will get content that is tailored specifically for the brand and the business unit you’re working in. Read more.
  • The Design Tokens package now includes veterinary brand colors.
  • This release doesn’t include breaking changes for the existing users of Nord Design System.
  • For detailed description of all changes and the steps required for migration, please see the Migration Guide.
  • See also the updated brand theme guidelines in the Design Tokens documentation page.
  • Release date 6.5.2025.

7.1.2

  • Migrates the monorepo to use pnpm workspaces instead.
  • Release date 24.9.2024.

7.1.1

  • Updates readme document details.
  • Release date 14.6.2024.

7.1.0

7.0.1

  • Improves var(--n-color-nav-hover) to be more consistent with other colors in the light high contrast theme.
  • Release date 31.5.2023.

7.0.0

  • New major release that brings various improvements and bug fixes!! ✨🥳
  • We’ve improved the underlying color system to make it more extensible and better cover the use cases of our different products.
  • We’ve introduced the following new color tokens:
    • var(--n-color-text-danger)
    • var(--n-color-text-highlight)
    • var(--n-color-text-info)
    • var(--n-color-text-neutral)
    • var(--n-color-text-neutral-strong)
    • var(--n-color-text-progress)
    • var(--n-color-text-warning)
    • var(--n-color-text-warning-strong)
    • var(--n-color-border-danger)
    • var(--n-color-border-highlight)
    • var(--n-color-border-info)
    • var(--n-color-border-neutral)
    • var(--n-color-border-progress)
    • var(--n-color-border-success)
    • var(--n-color-border-warning)
    • var(--n-color-surface-lowered)
    • var(--n-color-status-notification)
    • var(--n-color-accent-secondary)
  • For detailed description of all changes, please see Migration guide.
  • Breaking changes are also covered in the migration guide.
  • Release date 19.5.2023.
Migration guide

6.4.0

  • Adds new var(--n-space-xs) space token.
  • See updated documentation.
  • Release date 24.10.2022.

6.3.0

  • We now export design tokens as ES modules for easier usage and better tree shaking.
  • See updated usage documentation.
  • Release date 24.10.2022.

6.2.0

  • Adds new xs (10px) and xxs (8px) icon sizes which are replacements for the old xs size. This is a non-breaking change so no actions are required from your side.
  • This is done to improve the rendering of our smallest icons since they now align with the pixel grid used for icons.
  • Release date 16.9.2022.

6.1.0

  • The small icon dimensions are changed from 11px to 12px.
  • Release date 9.9.2022.

6.0.0

  • We’ve redesigned the underlying color system to make it more extensible and better cover the use cases of our different products.
  • The latest version of Design Tokens introduces a few fundamental changes to the way Nord’s status colors work.
  • For more details, please see migration guidelines.
  • Release date 7.9.2022.
Migration guidelines

5.4.1

  • Improves documentation for Size Design Tokens.
  • Converts var(--n-size-icon-s) token from 12px to 11px, so that it looks visually more balanced inside buttons and similar elements.
  • Updates all Node.js dependencies to latest.
  • Release date 17.8.2022.

5.4.0

  • Deprecates n-index-header and n-index-dropdown tokens.
  • Adds new n-index-nav design token.
  • Release date 4.8.2022.

5.3.0

  • Adds new nord-high-contrast theme and related design tokens.
  • Adds new nord-dark-high-contrast theme and related design tokens.
  • Removes old ui properties and replaces them with theme properties instead.
  • Release date 20.6.2022.

5.2.1

  • Small bug fixed and performance improvements.
  • Release date 17.6.2022.

5.2.0

  • We’ve removed gradients section and skeleton colors, since the new Skeleton component does not utilize these anymore.
  • Release date 16.6.2022.

5.1.0

  • Switches to using REM based font-sizes instead of pixels for better accessibility.
  • Adds new n-color-overlay design token that allows you to distinguish a modal layer from the layer underneath.
  • Release date 14.6.2022.

5.0.0

  • We’re deprecating health-light, health-dark, vet-light and vet-dark themes to simplify and unify Nordhealth’s branding for all digital products.
  • Release date 20.5.2022.

4.2.7

  • Adds new transition-mobile token for mobile menu transitions. Used in mobile versions of Popout and Dropdown components.
  • Release date 11.5.2022.

4.2.5

  • Darkens the color-nav-surface in vet light theme to provide better contrast.
  • Release date 2.5.2022.

4.2.4

  • Adds even stronger border color styles for all light themes.
  • Adds new card shadow styles with raised surfaces.
  • Release date 12.4.2022.

4.2.2

4.2.0

  • Adds new line-height-caption token.
  • Release date 19.3.2022.

4.1.0

  • Adds new color-text-success token.
  • Improves underlying token aliasing.
  • Release date 17.3.2022.

4.0.0

  • We’re renaming color-primary to color-accent to better support our themes.
  • We’re renaming color-text-inverse to color-text-on-accent to better support our themes and better explain where the color should be used.
  • We’re removing color-primary-strong token from the system as it was only referenced in one location.
  • This color is now replaced with CSS filters inside the system which darken the existing color-primary.
  • Hence all of these are breaking changes, we’re releasing a new major version.
  • Release date 14.3.2022.

2.2.1

  • Updates previous weak status colors with new dark variants.
  • Release date 7.3.2022.

2.2.0

  • Adds new weak status colors into design tokens.
  • Release date 5.3.2022.

2.1.0

  • Redesigned dark gray shades for Vet and Nord dark themes.
  • Release date 3.3.2022.

2.0.5

  • Updates licensing and package.json details.
  • Release date 24.2.2022.

2.0.4

  • We’ve changed tokens output to only include nord light theme, and produce additional tokens output for alternative themes to simplify usage.
  • Release date 8.2.2022.

2.0.3

  • Modifies color-border-strong for Nord light theme to match the rest of the themes better.
  • Release date 13.1.2022.

2.0.2

  • Removes size-icon-input design token.
  • Release date 9.12.2021.

2.0.1

  • Adds completely new redesigned and more accessible status colors.
  • Adds new text weakest color tokens.
  • Adds new text error color token.
  • Better automatic sorting for tokens behind the scenes.
  • Release date 4.12.2021.

1.0.8

  • Adds new n-color-surface-raised, n-color-surface-raised-dark, n-color-surface-raised-vet, n-color-surface-raised-vet-dark, n-color-surface-raised-health, n-color-surface-raised-health-dark design tokens.
  • Fixes order meta data on color tokens.
  • Release date 20.10.2021.

1.0.6

  • Converts z-index and transition design tokens to use more consistent naming.
  • Small bug fixes and feature improvements.
  • Updates Nord package dependencies to latest.
  • Release date 17.10.2021.

1.0.0

  • Design Tokens package reaches stable state and is now ready for production usage.
  • We’ve worked on adding extensive usage documentation for the design tokens.
  • Additionally, we’ve added new z-index, transition, and gradient categories.
  • All color themes have been re-designed form the ground up to support dark UI.
  • All dropshadows have been re-designed.
  • Please see the update Design Tokens documentation for more details.
  • Release date 12.10.2021.

1.0.0-alpha.13

  • Adds new box-shadow, box-shadow-modal, box-shadow-tooltip, box-shadow-nav and box-shadow-card tokens.
  • Modifies color-border and color-background and adds new color-border-dark for each theme.
  • Renames border-radius-small to border-radius-s.
  • Changes default border-radius from 8px to 5px.
  • Adds new color-overlay token for modal overlays.
  • Release date 10.8.2021.

1.0.0-alpha.10

  • Modifies dark primary color shades.
  • Updates all package dependencies to latest.
  • Release date 10.6.2021.

Was this page helpful?

Yes No

We use this feedback to improve our documentation.