Latest Releases

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.

CSS Framework #

4.0.0New#

• 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.
• 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.
• Release date 6.5.2025.

3.4.0 #

• Expands the stack utility helpers for more fine-grained positioning, by having a way to directly set justify-content and align-items.
• Adds a .n-stack-no-wrap utility helper to remove the default wrapping of the stack utility helpers.
• Release date 29.1.2025.

3.3.1 #

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

3.3.0 #

• Updates all package dependencies to latest.
• Release date 17.9.2024.

3.2.1 #

• Updates readme document details.
• Release date 14.6.2024.

3.2.0 #

• Adds new var(--n-size-top-bar) sizing token that is used for setting the default height of the Top Bar component.
• Release date 11.4.2024.

3.1.1 #

• Remove redundant overscroll-behavior-block: none; from CSS Framework.
• Release date 18.10.2023.

3.1.0 #

• This release adds a new Counter utility that can be used for showing the unread messages count in the Top Bar component.
• Release date 31.5.2023.

3.0.0 #

• New major release that brings various improvements and bug fixes!! ✨🥳
• .n-stack and .n-gap now has a gap of --n-space-m by default instead of none, to mirror the Stack component’s default behaviour.
• We’ve introduced the following new color variables:
  • 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

2.5.1 #

• Add support for using n-input class on wrapper elements.
• Add accompanying n-input-invalid class.
• Improves documentation for misc utilities in CSS Framework.
• Improves documentation for border utilities in CSS Framework.
• Release date 10.5.2023.

2.5.0 #

• Adds new var(--n-space-xs) space token.
• Adds new xs space utilities and missing alignment helpers to CSS Framework.
• Release date 29.3.2023.

2.4.1 #

• Updates Nord Design Tokens to the latest version.
• Release date 24.10.2022.

2.4.0 #

• Adds Description List utility helper to the CSS Framework.
• See updated usage examples for Drawer component.
• Release date 28.9.2022.

2.3.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.

2.2.1 #

• Improves documentation and examples for new status colors.
• Release date 15.9.2022.

2.2.0 #

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

2.1.0 #

• Adds border radius tokens as utility helpers to apply rounded corners to elements.
• Adds box shadow utility helpers to help reflect the elevation of a component or element.
• Release date 9.9.2022.

2.0.0 #

• We’ve redesigned the underlying color system to make it more extensible and better cover the use cases of our different products. For more details, please see migration guidelines.
• Release date 7.9.2022.

Migration guidelines

1.4.1 #

• 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.

1.4.0 #

• Adds margin auto helpers so elements can be centered vertically, horizontally, and both.
• Adds grid item helpers to do the same within a grid.
• Updates demos so that stack and grid helpers are more clearly presented.
• Updates demos to show new helpers.
• Updates docs to explain new helpers.
• Release date 10.8.2022.

1.3.5 #

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

1.3.4 #

• Bugfix: Missing borders and colors in CSS Framework.
• Release date 27.6.2022.

1.3.3 #

• Adds two new high contrast Nord themes.
• Release date 20.6.2022.

1.3.2 #

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

1.3.1 #

• We’ve removed skeleton related gradients from CSS Framework, since the new Skeleton component does not use them anymore.
• Release date 16.6.2022.

1.3.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.

1.2.1 #

• Updates to documentation and examples.
• Release date 24.5.2022.

1.2.0 #

• Adds new .n-clinic-icon helper class to generate clinic icons for Navigation and Dropdown components.
• Updates documentation for misc helpers to include examples of new clinic icons.
• Release date 20.5.2022.

1.1.2 #

• Adds new accent color styles into .n-reset utility class.
• Adds prepare script to fill gaps in npm run bootstrap so that components pkg is ready to start immediately after.
• Release date 20.5.2022.

1.1.1 #

• Adds web server for easier local development of the CSS Framework.
• Add new grid helpers and usage example, please see the documentation.
• Release date 11.5.2022.

1.0.5 #

• Adjust the specificity level of typescale styles to allow margin helpers to apply when using typescale classes.
• Adds n-typecale-m helper back into CSS Framework.
• Darkens the color-nav-surface in vet light theme to provide better contrast.
• Release date 2.5.2022.

1.0.3 #

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

1.0.2 #

• Converts border colors in default Nord theme to be stronger to match Veterinary theme better.
• Adds new less prominent default, card and header box shadows for all themes.
• Release date 10.4.2022.

1.0.0 #

• Initial release of @nordhealth/css.
• For documentation and usage guidelines, please see CSS Framework.
• Release date 30.3.2022.

1.0.0-beta.1 #

• Remove margins from .n-typescale helpers in CSS Framework.
• Only apply margins to typography elements when they’re inside the .n-typeset helper.
• Reduce specificity on .n-typescale helpers.
• Opt out of typeset on the typescale example to demonstrate the lack of margins on them.
• Adjust typescale helpers to be more powerful selectors.
• Release date 30.3.2022.

1.0.0-beta.0 #

• Full rewrite of CSS Framework with bug fixes and performance improvements.
• Adds new form utility classes .n-input, .n-label, .n-hint, .n-error and related states for building custom form fields.
• Adds new .n-caption text utility class.
• Adds new .n-color-accent background color utility class.
• Adds new .n-color-status-* utility classes for applying status background colors.
• Adds new .n-color-status-*-weak utility classes for applying weak status background colors.
• Adds new .n-color-text-success utility class for applying success text color.
• Release date 19.3.2022.

1.0.0-alpha.26 #

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

1.0.0-alpha.25 #

• 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.
• Release date 14.3.2022.

1.0.0-alpha.24 #

• We’re removing color-primary-strong token from the system as it was only referenced in one location.
• Release date 12.3.2022.

1.0.0-alpha.23 #

• Adds new .n-divider helper utility class.
• Release date 7.3.2022.

1.0.0-alpha.22 #

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

1.0.0-alpha.21 #

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

1.0.0-alpha.19 #

• Add anchor styles into reset.
• Add general typography into reset.
• Adjusts typography helpers to use :where() to reduce specificity.
• Adjusts reset to use :where() to reduce specificity.
• Switch to using token variables rather than static values.
• Release date 26.2.2022.

1.0.0-alpha.18 #

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

1.0.0-alpha.17 #

• Adds new text align utilities.
• Release date 23.2.2022.

1.0.0-alpha.16 #

• We’ve created new typographic helpers for our CSS Framework.
• These make it easier to apply an HTML class to a containing element to get the basic type styles you’d expect to present content as clearly and efficiently as possible.
• Release date 18.2.2022.

1.0.0-alpha.15 #

• Updates all library dependencies and migrates to Stylelint 14.
• Release date 11.2.2022.

1.0.0-alpha.14 #

• CSS Framework package does not depend on design tokens package anymore.
• We’ve removed font CSS from the Webfonts package and moved it into this package instead.
• CSS Framework now comes with a base theme (Nord), so that it can be used standalone.
• We’ve updated the CSS Framework utils to generate margin and padding helpers with sizes at the end to improve readability.
• We’ve added diagrams to the documentation to explain how logical properties apply to different sides of an element.
• Release date 8.2.2022.

1.0.0-alpha.13 #

• Brings in latest changes from Design Tokens v2.0.3.
• Release date 13.1.2022.

1.0.0-alpha.12 #

• Complete rewrite of our CSS Framework.
• Provides a method of styling elements with as little friction as possible.
• Makes it possible to use our Design Tokens through memorable CSS based utility classes.
• We’ve tried to strike a balance between readable but brief class names in this release.
• We’ve also made sure that applying tokens using the CSS Framework comes with a reduced risk of error, to e.g. ensure you’re using our colors as they were intended to be used.
• Release date 23.12.2021.

1.0.0-alpha.11 #

• Now only includes the base tokens and relies on theming package for theming.
• Previously output file size was 21.27 KB, now is only 5.62 KB.
• Not ready for production usage.
• Release date 9.12.2021.