ClickorKeyboard shortcut Alt + L

Dragto resize

Developer

Getting started

Using Web Components

Webfonts

CDN

Localization

CSS Framework

Legacy

ESLint Plugin

Working with AI

FAQ

Design

Getting started

Foundations

Accessibility

Color System

Color Utilities

Principles

Figma Toolkit

Grid

Iconography

Naming

Nordhealth Brand

Typography

Themes

Brand assets

Tools

Components

Accordion

New

Aside

New

Autocomplete

New

Avatar

Badge

Banner

Button

Button Group

Calendar

Card

Updated

Checkbox

Collapsible

New

Combobox

New

Command Menu

Date Picker

Date Range Picker

New

Divider

Drawer

Updated

Dropdown

Empty State

Field

New

Fieldset

Filter Add Button

Filter Date

Filter Date Range

Filter Dropdown

Filter Field

Filter Input

Filter Reset Button

Footer

Header

Icon

Input

Input Group

New

Item

New

Kbd

New

Layout

Message

Meter

New

Modal

Updated

Navigation

Notification

Number Field

New

Otp Field

New

Outline

New

Overflow List

New

Pagination

New

Popout

Progress

Progress Bar

Qrcode

Radio

Range

Resizable

New

Scroll Area

New

Segmented Control

Select

Skeleton

Spinner

Stack

Tab

Table

Tag

Textarea

Time Picker

New

Timestamp

New

Toast

Toggle

Tooltip

Top Bar

Truncate

New

Visually Hidden

Design Tokens

Tailwind CSS

Blocks

Templates

Icons

Playground

Latest Updates

Changelog

Migration guides

GitHub

Getting Started

Welcome to the design side of Nord. If you're designing something for Nordhealth products, start here.

Nord Design System helps you design consistent, accessible experiences for Nordhealth. These practical guides cover the principles, foundations, and tools you'll use day to day.

Building with Nord in code instead? Head to the developer documentation to get set up.

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/design/foundations/principles/

Figma Toolkit

nordhealth.design/design/foundations/figma/

Color guidelines

nordhealth.design/design/foundations/colors/

Iconography guidelines

nordhealth.design/design/foundations/iconography/

Grid guidelines

nordhealth.design/design/foundations/grid/

Typography guidelines

nordhealth.design/design/foundations/typography/

Theming guidelines

nordhealth.design/design/themes/

Design Tokens

nordhealth.design/core/tokens/

Components, templates & assets

Browse the building blocks you'll assemble into designs, and download the resources you need.

Components

nordhealth.design/components/

Templates

nordhealth.design/templates/

Nordicons

nordhealth.design/icons/

Downloads

nordhealth.design/design/assets/

Tools

nordhealth.design/design/tools/