Getting Started
Welcome to the Nord Design System developer docs. If you're building something in code for Nordhealth products, you're in the right place.
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 collaboration between different teams and disciplines.
How Nord fits together
Nord is framework-agnostic: the components are standard custom elements, so they can be used from plain HTML or from frameworks like Vue, React, and Angular.
The system is made from a few layers that can be adopted together or separately:
- Components provide the interactive UI building blocks.
- CSS and Tailwind utilities apply Nord tokens in application layouts and custom UI.
- Themes set the active Nordhealth brand, color mode, and high-contrast variant.
- Supporting packages provide icons, fonts, tokens, and specialist integrations when needed.
Most teams do not need to think about the internal component rendering model to get started. Where it affects styling or integration, the relevant component and setup pages call it out directly.
Start with the essentials
Most implementations only need the component package, the CSS and Tailwind utilities, and the active Nordhealth theme. Install only the parts your app uses; each page below includes its own setup instructions.
Install Web Components
Set up Nord components in plain HTML, Vue, React, or another framework.
Browse Components
Find component APIs, examples, and usage guidance.
Tailwind CSS
Use Nord tokens through Tailwind CSS utility classes.
Themes
Apply the correct Nordhealth brand and color mode.
For supporting packages, see Nordicons, Design Tokens, Webfonts, and the AG Grid Theme.
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/changelogs
Latest Updates
nordhealth.design/updates/
Migration Guides
nordhealth.design/migrations/
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.