# Nord Design System

> A comprehensive design system with accessible, production-ready web components built with Lit. Used by Nordhealth products to create coherent, user-friendly experiences.

## Getting Started

- [Getting Started](https://nordhealth.design/raw/start.md): Welcome to Nord Design System. Get started with designing and developing for Nordhealth products.
- [About Nord](https://nordhealth.design/raw/start/about.md): Learn about Nord Design System and its mission

## What's New

- [What's New](https://nordhealth.design/raw/new.md): Stay up to date with the latest releases and updates from the Nord team.

## Components

- [Web Components](https://nordhealth.design/raw/components.md): Explore Nord's library of accessible web components
- [nord-avatar](https://nordhealth.design/raw/component-usage/avatar/readme.md)
- [nord-badge](https://nordhealth.design/raw/component-usage/badge/readme.md)
- [nord-banner](https://nordhealth.design/raw/component-usage/banner/readme.md)
- [nord-button-group](https://nordhealth.design/raw/component-usage/button-group/readme.md)
- [nord-button](https://nordhealth.design/raw/component-usage/button/readme.md)
- [nord-calendar](https://nordhealth.design/raw/component-usage/calendar/readme.md)
- [nord-card](https://nordhealth.design/raw/component-usage/card/readme.md)
- [nord-checkbox](https://nordhealth.design/raw/component-usage/checkbox/readme.md)
- [nord-command-menu](https://nordhealth.design/raw/component-usage/command-menu/readme.md)
- [nord-date-picker](https://nordhealth.design/raw/component-usage/date-picker/readme.md)
- [nord-divider](https://nordhealth.design/raw/component-usage/divider/readme.md)
- [nord-drawer](https://nordhealth.design/raw/component-usage/drawer/readme.md)
- [nord-dropdown-group](https://nordhealth.design/raw/component-usage/dropdown-group/readme.md)
- [nord-dropdown-item](https://nordhealth.design/raw/component-usage/dropdown-item/readme.md)
- [nord-dropdown](https://nordhealth.design/raw/component-usage/dropdown/readme.md)
- [nord-empty-state](https://nordhealth.design/raw/component-usage/empty-state/readme.md)
- [nord-fieldset](https://nordhealth.design/raw/component-usage/fieldset/readme.md)
- [nord-footer](https://nordhealth.design/raw/component-usage/footer/readme.md)
- [nord-header](https://nordhealth.design/raw/component-usage/header/readme.md)
- [nord-icon](https://nordhealth.design/raw/component-usage/icon/readme.md)
- [nord-input](https://nordhealth.design/raw/component-usage/input/readme.md)
- [nord-layout](https://nordhealth.design/raw/component-usage/layout/readme.md)
- [nord-message](https://nordhealth.design/raw/component-usage/message/readme.md)
- [nord-modal](https://nordhealth.design/raw/component-usage/modal/readme.md)
- [nord-nav-group](https://nordhealth.design/raw/component-usage/nav-group/readme.md)
- [nord-nav-item](https://nordhealth.design/raw/component-usage/nav-item/readme.md)
- [nord-nav-toggle](https://nordhealth.design/raw/component-usage/nav-toggle/readme.md)
- [nord-navigation](https://nordhealth.design/raw/component-usage/navigation/readme.md)
- [nord-notification-group](https://nordhealth.design/raw/component-usage/notification-group/readme.md)
- [nord-notification](https://nordhealth.design/raw/component-usage/notification/readme.md)
- [nord-popout](https://nordhealth.design/raw/component-usage/popout/readme.md)
- [nord-progress-bar](https://nordhealth.design/raw/component-usage/progress-bar/readme.md)
- [nord-progress](https://nordhealth.design/raw/component-usage/progress/readme.md)
- [nord-qrcode](https://nordhealth.design/raw/component-usage/qrcode/readme.md)
- [nord-radio](https://nordhealth.design/raw/component-usage/radio/readme.md)
- [nord-range](https://nordhealth.design/raw/component-usage/range/readme.md)
- [nord-segmented-control-item](https://nordhealth.design/raw/component-usage/segmented-control-item/readme.md)
- [nord-segmented-control](https://nordhealth.design/raw/component-usage/segmented-control/readme.md)
- [nord-select](https://nordhealth.design/raw/component-usage/select/readme.md)
- [nord-skeleton](https://nordhealth.design/raw/component-usage/skeleton/readme.md)
- [nord-spinner](https://nordhealth.design/raw/component-usage/spinner/readme.md)
- [nord-stack](https://nordhealth.design/raw/component-usage/stack/readme.md)
- [nord-tab-group](https://nordhealth.design/raw/component-usage/tab-group/readme.md)
- [nord-tab-panel](https://nordhealth.design/raw/component-usage/tab-panel/readme.md)
- [nord-tab](https://nordhealth.design/raw/component-usage/tab/readme.md)
- [nord-table](https://nordhealth.design/raw/component-usage/table/readme.md)
- [nord-tag-group](https://nordhealth.design/raw/component-usage/tag-group/readme.md)
- [nord-tag](https://nordhealth.design/raw/component-usage/tag/readme.md)
- [nord-textarea](https://nordhealth.design/raw/component-usage/textarea/readme.md)
- [nord-toast-group](https://nordhealth.design/raw/component-usage/toast-group/readme.md)
- [nord-toast](https://nordhealth.design/raw/component-usage/toast/readme.md)
- [nord-toggle](https://nordhealth.design/raw/component-usage/toggle/readme.md)
- [nord-tooltip](https://nordhealth.design/raw/component-usage/tooltip/readme.md)
- [nord-top-bar](https://nordhealth.design/raw/component-usage/top-bar/readme.md)
- [nord-visually-hidden](https://nordhealth.design/raw/component-usage/visually-hidden/readme.md)

## Design Guidelines

- [Accessibility](https://nordhealth.design/raw/accessibility-checklist.md)
- [Color System](https://nordhealth.design/raw/colors.md): Nord Design System uses a color system to guide users, create a branded look-and-feel, draw attention to important information, and make content more accessible.
- [Color Utilities](https://nordhealth.design/raw/color-utilities.md)
- [Content Delivery Network](https://nordhealth.design/raw/cdn.md)
- [Principles](https://nordhealth.design/raw/principles.md)
- [Figma Toolkit](https://nordhealth.design/raw/figma.md)
- [Grid](https://nordhealth.design/raw/grid.md)
- [Iconography](https://nordhealth.design/raw/iconography.md)
- [Localization](https://nordhealth.design/raw/localization.md)
- [Naming](https://nordhealth.design/raw/naming.md)
- [Nordhealth Brand](https://nordhealth.design/raw/brand.md)
- [Typography](https://nordhealth.design/raw/typography.md)
- [Web Components](https://nordhealth.design/raw/web-components.md)
- [Webfonts](https://nordhealth.design/raw/webfonts.md)

## Design Tokens

- [Design Tokens](https://nordhealth.design/raw/tokens.md): Design tokens are a tech-agnostic way to store variables. We use tokens instead of hard coded values to ensure a better UI consistency across different platforms.

## CSS Framework

- [CSS](https://nordhealth.design/raw/css.md)
- [Tailwind CSS](https://nordhealth.design/raw/css/tailwind.md)
- [Legacy CSS Framework](https://nordhealth.design/raw/css/css-framework.md)
- [ESLint Plugin](https://nordhealth.design/raw/css/eslint.md)

## Templates

- [Templates](https://nordhealth.design/raw/templates.md): Layout and user interface patterns showing how to combine Nord components to build complete application views.

## Nordicons

- [Nordicons](https://nordhealth.design/raw/nordicons.md): Nordicons are used to provide additional meaning or in places where text label doesn't fit.

## Themes

- [Themes](https://nordhealth.design/raw/themes.md)

## Community Assets

- [Community Assets](https://nordhealth.design/raw/community-assets.md): Product-specific community assets from feature teams built using Nord Design System tools.
- [Pcnf Accordion](https://nordhealth.design/raw/community-assets-docs/pcnf-accordion.md): Accordions allow users to expand and collapse sections of content, facilitating efficient information organization.
- [Pcnf Breadcrumbs](https://nordhealth.design/raw/community-assets-docs/pcnf-breadcrumbs.md): Breadcrumbs show the navigation path users followed to arrive at the current page, making it simple to return to earlier sections.
- [Pcnf Card Collapsible](https://nordhealth.design/raw/community-assets-docs/pcnf-card-collapsible.md): Card collapsible is designed to organize related content in a space-efficient way. It allows users to expand or collapse sections.
- [Pcnf Combobox](https://nordhealth.design/raw/community-assets-docs/pcnf-combobox.md): Combobox is an autocomplete input that allows users to filter a list of options and select one or more values.
- [Pcnf Cta And Links](https://nordhealth.design/raw/community-assets-docs/pcnf-cta-and-links.md): CTAs (call-to-actions) and Links enable users to navigate between pages or trigger specific actions within an application. CTA is based on the existing Button component.
- [Pcnf Legend Counter](https://nordhealth.design/raw/community-assets-docs/pcnf-legend-counter.md): Legend counter is used to display a set of counters with labels and corresponding values, styled according to their status. It supports translation for labels and offers size customization.
- [Pcnf Money](https://nordhealth.design/raw/community-assets-docs/pcnf-money.md): Money is a composable that converts monetary values from integers to various monetary string formats and vice versa, ensuring proper formatting for both display and JSON:API interactions.
- [Pcnf Tab Menu](https://nordhealth.design/raw/community-assets-docs/pcnf-tab-menu.md): Tab Menu is a navigational menu designed to display a list of links with customizable labels.
- [Pcnf Time Picker](https://nordhealth.design/raw/community-assets-docs/pcnf-time-picker.md): Time picker is designed to allow the user to type time or select it from a predefined dropdown menu.

## Changelogs

- [Color Utilities Changelog](https://nordhealth.design/raw/changelogs/color.md)
- [CSS Framework Changelog](https://nordhealth.design/raw/changelogs/css.md)
- [ESLint Plugin Changelog](https://nordhealth.design/raw/changelogs/eslint-plugin.md)
- [Figma Toolkit Changelog](https://nordhealth.design/raw/changelogs/figma.md)
- [Nordicons Changelog](https://nordhealth.design/raw/changelogs/nordicons.md)
- [Themes Changelog](https://nordhealth.design/raw/changelogs/themes.md)
- [Design Tokens Changelog](https://nordhealth.design/raw/changelogs/tokens.md)
- [Web Components Changelog](https://nordhealth.design/raw/changelogs/web-components.md)
- [Webfonts Changelog](https://nordhealth.design/raw/changelogs/webfonts.md)

## Migration Guides

- [Migration to 1.0.0 Web Components](https://nordhealth.design/raw/migrations/1.0.0.md)
- [Migration to 2.0.0 Web Components](https://nordhealth.design/raw/migrations/2.0.0.md): Guide for migrating from Nord Web Components 1.x to 2.0.0, including breaking changes and upgrade steps.
- [Migration to 3.0.0 Web Components](https://nordhealth.design/raw/migrations/3.0.0.md)
- [Migration to 4.0.0 Web Components](https://nordhealth.design/raw/migrations/4.0.0.md)
- [Migration to 3.0.0 Figma Toolkit](https://nordhealth.design/raw/migrations/figma-3.0.0.md)
- [Migration to 4.0.0 Figma Toolkit](https://nordhealth.design/raw/migrations/figma-4.0.0.md)
- [Migration Guides](https://nordhealth.design/raw/migrations.md)
- [Migration to Tailwind CSS](https://nordhealth.design/raw/migrations/tailwind.md)

## Help & Resources

- [Downloads](https://nordhealth.design/raw/downloads.md)
- [Frequently Asked Questions](https://nordhealth.design/raw/faq.md)
- [About Nord](https://nordhealth.design/raw/about.md)
- [Accessibility](https://nordhealth.design/raw/accessibility.md)
- [Careers](https://nordhealth.design/raw/careers.md)
- [Contributing](https://nordhealth.design/raw/contributing.md): Nord's contribution model allows product teams to add new features based on their product requirements.
- [Help & Feedback](https://nordhealth.design/raw/help.md)
- [Terms of Use](https://nordhealth.design/raw/terms.md): Welcome to Nord Design System website (the “Website”). There are a few rules that you must follow when using our Website and the Content in it, so we ask all our visitors to read our Terms of Use carefully.

## AI Integration

- [AI Integration](https://nordhealth.design/raw/ai.md)
- [LLMs.txt](https://nordhealth.design/raw/ai/llms-txt.md): How to get AI tools like Cursor, Windsurf, GitHub Copilot, ChatGPT, and Claude to understand Nord Design System components, design tokens, and best practices.

## Product Updates

- [Launching Nord Design System](https://nordhealth.design/raw/updates/april-2022-launching-nord-design-system.md)
- [How we use Custom Properties in Web Components](https://nordhealth.design/raw/updates/august-2022-custom-properties-web-components.md)
- [December, 2021](https://nordhealth.design/raw/updates/december-2021.md): You’re reading the sixth Nord Design System monthly update. This month we’ve grown the team, further expanded on our components and began growing our CSS Framework.
- [February, 2021](https://nordhealth.design/raw/updates/february-2021.md): You’re reading the first ever Nord Design System monthly update. We’re just starting our design systems journey at Nordhealth and have created this documentation platform to support these efforts.
- [Nord Design System architecture](https://nordhealth.design/raw/updates/february-2022-design-system-architecture.md): You’re reading the eigth Nord Design System monthly update. This month I wanted to give a little more insight into how we’ve architectured Nord’s packages and how they’re interconnected.
- [Redesigning Nordicons Icon Library](https://nordhealth.design/raw/updates/february-2023-redesigning-nordicons-icon-library.md): Brand Designer Ilkka Janatuinen has been drawing on computers since the 1980s and is now designing brands, drawing UI and tweaking the tiniest design details at H23 Agency. Ilkka Helped Nordhealth to redesign the Nordicons icon library in 2022.
- [Interview with Design System Guide](https://nordhealth.design/raw/updates/february-2024-interview.md)
- [Rewriting Nord Docs with Nuxt](https://nordhealth.design/raw/updates/february-2026-nuxt-docs-rewrite.md)
- [Latest Updates](https://nordhealth.design/raw/updates.md): Blog posts and announcements from the Nord Design System team.
- [How we use Figma](https://nordhealth.design/raw/updates/january-2022.md): You’re reading the seventh Nord Design System monthly update. This month we’ve worked on improving the system’s architecture, added new components and worked on refining Nord Figma Toolkit.
- [June, 2021](https://nordhealth.design/raw/updates/june-2021.md): You’re reading the third Nord Design System monthly update. This month we’ve been focusing on onboarding new team members and also rolling out the new brand guidelines into the documentation.
- [Tabs components](https://nordhealth.design/raw/updates/june-2022-tabs-web-components.md)
- [Introducing Brands for Nord Design System](https://nordhealth.design/raw/updates/june-2025-brands.md)
- [Introducing Community Assets for Nord Design System](https://nordhealth.design/raw/updates/june-2025-community-assets.md)
- [Statistics for the first year](https://nordhealth.design/raw/updates/march-2022-statistics-for-the-first-year.md): You’re reading the ninth Nord Design System monthly update. During the past month we’ve been preparing the system for official launch and making sure we offer stable API and comprehensive docs.
- [May, 2021](https://nordhealth.design/raw/updates/may-2021.md): You’re reading the second Nord Design System monthly update. Since February, we’ve been busy rethinking our design processes and brand identity that was launched a few weeks ago.
- [Finalist for the Best Design System Award](https://nordhealth.design/raw/updates/may-2023-jammies-nomination-copy.md): Nord Design System was recently nominated for the Best Design System award at Grand One competition and won an honorable mention for the best developer experience.
- [October, 2021](https://nordhealth.design/raw/updates/october-2021.md): You’re reading the fifth Nord Design System monthly update. This month we’ve gained great momentum and have published four new packages, and made many improvements to Nord documentation.
- [Finalist for the Jamstack Conf Jammies](https://nordhealth.design/raw/updates/october-2022-jammies-nomination.md): Nord Design System was recently nominated for the Jamstack Conf Jammies award in “Project of the Year” category. Winners will be announced live at Jamstack Conf on November 7 – 8.
- [September, 2021](https://nordhealth.design/raw/updates/september-2021.md): You’re reading the fourth Nord Design System monthly update. This month we’ve been working on making sure that everyone at Nordhealth understands how and why we’re building a design system.

## Documentation Sets

- [Nord Design System Full Documentation](https://nordhealth.design/llms-full.txt): Complete documentation for Nord Design System including all components, design tokens, guidelines, and examples.

## Notes

- LLM guidance: Nord Design System is a comprehensive design system with accessible, production-ready web components built with Lit. It provides components, design tokens, CSS framework, and guidelines for building consistent user experiences.
- LLM guidance: Components are web components using the `nord-` prefix (e.g., `<nord-button>`, `<nord-input>`). They work with any framework including React, Vue, Angular, or plain HTML.
- LLM guidance: Design tokens are available as CSS custom properties (e.g., `--n-color-accent`, `--n-space-m`) and can be used directly in CSS.
- LLM guidance: The CSS framework provides utility classes with the `n:` prefix (e.g., `n:stack`, `n:cluster`) for layout and styling.
- The content is automatically generated from the official Nord Design System documentation.