Getting Started

Welcome to the Nord Design System. If you’re just getting started with designing or developing something for our therapyveterinary products, you’re in the right place. For veterinary, please switch brandFor therapy, please switch brand.

Nord Design System is a collection of reusable components and tools, guided by clear standards, that can be assembled together to build digital products and experiences for Nordhealth.

The goal of Nord Design System is to improve UI consistency and quality, while making our software design and development processes more efficient. The system also helps to establish a common vocabulary between everyone in our organization and ease collabo­ration between different teams and disciplines.

Nord Design System ships with two distinctive brands, therapy and veterinary. You can switch the currently active brand from the top left corner of this documentation website.



Design guidelines

Check out these practical guides to help you understand how to design for Nordhealth’s platforms using Nord Design System.


Nord Design Principles

nordhealth.design/principles/

Figma Toolkit

nordhealth.design/figma/

Color guidelines

nordhealth.design/colors/

Iconography guidelines

nordhealth.design/iconography/

Grid guidelines

nordhealth.design/grid/

Typography guidelines

nordhealth.design/typography/

Theming guidelines

nordhealth.design/themes/

Design Tokens

nordhealth.design/tokens/

Components

nordhealth.design/components/

Templates

nordhealth.design/templates/

Nordicons

nordhealth.design/nordicons/

Downloads

nordhealth.design/downloads/


Development packages

Nord is a collection of reusable components and tools that are divided into nine packages. They can be used together or separately depending on your team’s needs.


Web Components

nordhealth.design/web-components/

React Wrappers (deprecated)

nordhealth.design/web-components/#react

Vue Types (deprecated)

nordhealth.design/web-components/#types-and-editor-integration-with-vue

CSS Framework

nordhealth.design/css/

Themes

nordhealth.design/themes/

Nordicons

nordhealth.design/nordicons/

Design Tokens

nordhealth.design/tokens/

Webfonts

nordhealth.design/webfonts/

Color Utilities

nordhealth.design/color-utilities/

AG Grid Theme

/components/table/


Each package can be installed using Node Package Manager. To do so, run the following command(s) in your terminal:

# Design Tokens, CSS Framework, Themes, Nordicons, Webfonts:
# (For usage with any framework)
npm install @nordhealth/tokens
npm install @nordhealth/css
npm install @nordhealth/themes
npm install @nordhealth/icons
npm install @nordhealth/fonts
npm install @nordhealth/color
npm install @nordhealth/ag-theme-nord
# Web Components for HTML, Vue.js and Vanilla JS:
npm install @nordhealth/components
# React Wrappers (deprected):
npm install @nordhealth/react
# Vue Types (deprected):
npm install @nordhealth/vue

For further installation and integration guidelines for each Nord Design System package, please see documentation linked above.


What’s new

This section is updated regularly with new content to help you stay up to date with the latest releases and updates from the Nord team. We also have an RSS feed you can subscribe to.


Changelog

nordhealth.design/changelog/

Latest Updates

nordhealth.design/updates/

Migration Guides

nordhealth.design/migration/


Browser support

Nord Design System is tested in the latest two versions of the following browsers. Our team addresses critical bug fixes in earlier versions based on their severity and impact. If you need to support IE11 or pre-Chromium Edge, this library isn’t for you.


Chrome Safari Chrome Chrome Chrome

Can I use Nord in my own project?

Nord Design System is solely meant for building digital products and experiences for Nordhealth. Please see the terms of use for full license details.


Getting support

If you experience any issues while getting started with any of Nord’s tools, please head over to the Support page for more guidelines and help.


Was this page helpful?

YesNo
Send feedback

We use this feedback to improve our documentation.

 
Edit page
Choose therapy brandChoose veterinary brandAbout Nord Design SystemGet support