Getting Started
Welcome to Nord! Nord is Nordhealth’s design system for products, digital experiences and brand. If you’re just getting started with designing or developing something, you’re in the right place.
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/
Nordhealth Brand
nordhealth.design/brand/
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 Components
nordhealth.design/web-components/#react
Vue Integration
npmjs.com/package/@nordhealth/vue
CSS Framework
nordhealth.design/css/
Themes
nordhealth.design/themes/
Nordicons
nordhealth.design/nordicons/
Design Tokens
nordhealth.design/tokens/
Webfonts
nordhealth.design/typography/
Color Utilities
npmjs.com/package/@nordhealth/color
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 Components:
npm install @nordhealth/react
# Vue integration:
npm install @nordhealth/vue
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.
Monthly updates
nordhealth.design/updates/
Latest releases (changelog)
nordhealth.design/changelog/
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.
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.