# Getting Started

> Get set up with Nord Design System in code — install the packages and start building for Nordhealth products.

*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](https://nordhealth.com){rel="[\"nofollow\"]"}.

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.

> [!NOTE]
> Designing rather than building? Start with the [design documentation](/design/) for principles, foundations, tokens, and the Figma toolkit.

---

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

<div>

---



</div>

## 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](/docs/developer/web-components/)** - Set up Nord components in plain HTML, Vue, React, or another framework.

**[Browse Components](/components/)** - Find component APIs, examples, and usage guidance.

**[Tailwind CSS](/core/css/tailwind/)** - Use Nord tokens through Tailwind CSS utility classes.

**[Themes](/design/themes/)** - Apply the correct Nordhealth brand and color mode.

For supporting packages, see [Nordicons](/icons/), [Design Tokens](/core/tokens/), [Webfonts](/docs/developer/webfonts/), and the [AG Grid Theme](/components/table/#recommendation-for-component-based-libraries).

<div>

---



</div>

## What's new

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



**[Changelog](/changelogs)** - nordhealth.design/changelogs

**[Latest Updates](/updates/)** - nordhealth.design/updates/

**[Migration Guides](/migrations/)** - nordhealth.design/migrations/

<div>

---



</div>

## Browser support

Nord Design System is tested in the latest two versions of the following browsers. Our team addresses critical [bug fixes](/resources/support/) 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.



**Supported browsers:** Chrome, Safari, Edge, Firefox, Opera

<div>

---



</div>

## Can I use Nord in my own project?

Nord Design System is solely meant for building digital products and experiences for [Nordhealth](https://nordhealth.com){rel="[\"nofollow\"]"}. Please see the [terms of use](/resources/terms/) for full license details.

<div>

---



</div>

## Getting support

If you experience any issues while getting started with any of Nord's tools, please head over to the [Support page](/resources/support/) for more guidelines and help.