Components v5.0.0 — 18 new components, Light DOM APIs, and updates across forms, filters, data display, and navigation.See what's new

ClickorKeyboard shortcut Alt + L

Dragto resize

Nord Design System SearchDeveloperDeveloperGetting startedUsing Web ComponentsWebfontsCDNLocalizationCSS Framework Legacy ESLint PluginWorking with AIFAQDesignDesignGetting startedFoundationsAccessibilityColor SystemColor UtilitiesPrinciplesFigma ToolkitGridIconographyNamingNordhealth BrandTypographyThemesBrand assetsToolsComponentsComponentsAccordion New Aside New Autocomplete New AvatarBadgeBanner Updated ButtonButton GroupCalendar Updated Card Updated Chart New Checkbox Updated Collapsible New Combobox New Command MenuData Table New Date Picker Updated Date Range Picker New DividerDrawer Updated DropdownEmpty StateField New FieldsetFilter Bar New FooterHeaderIconInput Updated Input Group New Item New Kbd New LayoutMessageMeter New Modal Updated NavigationNotificationNumber Field New Otp Field New Outline New Overflow List New Pagination New Popout Updated ProgressProgress BarQrcodeRadio Updated Range Updated Resizable New Rich Text Editor New Scroll Area New Segmented ControlSelect Updated SkeletonSpinnerStackTabTableTagTextarea Updated Time Picker New Timestamp New ToastToggle Updated TooltipTop BarTruncate New Visually HiddenDesign TokensDesign TokensTailwind CSSTailwind CSSBlocksBlocksTemplatesTemplatesIconsIconsPlaygroundPlaygroundLatest UpdatesLatest UpdatesChangelogChangelogMigration guidesMigration guides
GitHub

Clickto expandKeyboard shortcut Alt + L

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/