# 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/docs/developer.md): Get set up with Nord Design System in code — install the packages and start building for Nordhealth products.

## Components

- [Components](https://nordhealth.design/raw/components.md): Explore Nord's library of accessible Web Components, API references, and examples.
- [nord-accordion](https://nordhealth.design/raw/components/accordion.md)
- [nord-aside-drawer](https://nordhealth.design/raw/components/aside-drawer.md)
- [nord-aside-trigger](https://nordhealth.design/raw/components/aside-trigger.md)
- [nord-aside](https://nordhealth.design/raw/components/aside.md)
- [nord-autocomplete](https://nordhealth.design/raw/components/autocomplete.md)
- [nord-avatar](https://nordhealth.design/raw/components/avatar.md)
- [nord-badge](https://nordhealth.design/raw/components/badge.md)
- [nord-banner](https://nordhealth.design/raw/components/banner.md)
- [nord-button-group](https://nordhealth.design/raw/components/button-group.md)
- [nord-button](https://nordhealth.design/raw/components/button.md)
- [nord-calendar](https://nordhealth.design/raw/components/calendar.md)
- [nord-card](https://nordhealth.design/raw/components/card.md)
- [nord-checkbox](https://nordhealth.design/raw/components/checkbox.md)
- [nord-collapsible](https://nordhealth.design/raw/components/collapsible.md)
- [nord-combobox](https://nordhealth.design/raw/components/combobox.md)
- [nord-command-menu](https://nordhealth.design/raw/components/command-menu.md)
- [nord-date-picker](https://nordhealth.design/raw/components/date-picker.md)
- [nord-divider](https://nordhealth.design/raw/components/divider.md)
- [nord-drawer](https://nordhealth.design/raw/components/drawer.md)
- [nord-dropdown-group](https://nordhealth.design/raw/components/dropdown-group.md)
- [nord-dropdown-item](https://nordhealth.design/raw/components/dropdown-item.md)
- [nord-dropdown-submenu](https://nordhealth.design/raw/components/dropdown-submenu.md): Dropdown submenu nests a secondary menu within a dropdown. It automatically handles opening on hover, closing on outside click, keyboard navigation, and manages accessibility attributes.
- [nord-dropdown](https://nordhealth.design/raw/components/dropdown.md)
- [nord-empty-state](https://nordhealth.design/raw/components/empty-state.md)
- [nord-field](https://nordhealth.design/raw/components/field.md)
- [nord-fieldset](https://nordhealth.design/raw/components/fieldset.md)
- [nord-footer](https://nordhealth.design/raw/components/footer.md)
- [nord-header](https://nordhealth.design/raw/components/header.md)
- [nord-icon](https://nordhealth.design/raw/components/icon.md)
- [nord-input-group](https://nordhealth.design/raw/components/input-group.md)
- [nord-input](https://nordhealth.design/raw/components/input.md)
- [nord-item](https://nordhealth.design/raw/components/item.md)
- [nord-kbd](https://nordhealth.design/raw/components/kbd.md)
- [nord-layout](https://nordhealth.design/raw/components/layout.md)
- [nord-message](https://nordhealth.design/raw/components/message.md)
- [nord-meter](https://nordhealth.design/raw/components/meter.md)
- [nord-modal](https://nordhealth.design/raw/components/modal.md)
- [nord-nav-group](https://nordhealth.design/raw/components/nav-group.md)
- [nord-nav-item](https://nordhealth.design/raw/components/nav-item.md)
- [nord-nav-toggle](https://nordhealth.design/raw/components/nav-toggle.md)
- [nord-navigation](https://nordhealth.design/raw/components/navigation.md)
- [nord-notification-group](https://nordhealth.design/raw/components/notification-group.md)
- [nord-notification](https://nordhealth.design/raw/components/notification.md)
- [nord-number-field](https://nordhealth.design/raw/components/number-field.md)
- [nord-otp-field](https://nordhealth.design/raw/components/otp-field.md)
- [nord-outline](https://nordhealth.design/raw/components/outline.md)
- [nord-overflow-list](https://nordhealth.design/raw/components/overflow-list.md)
- [nord-pagination](https://nordhealth.design/raw/components/pagination.md)
- [nord-popout](https://nordhealth.design/raw/components/popout.md)
- [nord-progress-bar](https://nordhealth.design/raw/components/progress-bar.md)
- [nord-progress](https://nordhealth.design/raw/components/progress.md)
- [nord-qrcode](https://nordhealth.design/raw/components/qrcode.md)
- [nord-radio](https://nordhealth.design/raw/components/radio.md)
- [nord-range](https://nordhealth.design/raw/components/range.md)
- [nord-resizable](https://nordhealth.design/raw/components/resizable.md)
- [nord-segmented-control-item](https://nordhealth.design/raw/components/segmented-control-item.md)
- [nord-segmented-control](https://nordhealth.design/raw/components/segmented-control.md)
- [nord-select](https://nordhealth.design/raw/components/select.md)
- [nord-skeleton](https://nordhealth.design/raw/components/skeleton.md)
- [nord-spinner](https://nordhealth.design/raw/components/spinner.md)
- [nord-stack](https://nordhealth.design/raw/components/stack.md)
- [nord-tab-group](https://nordhealth.design/raw/components/tab-group.md)
- [nord-tab-panel](https://nordhealth.design/raw/components/tab-panel.md)
- [nord-tab](https://nordhealth.design/raw/components/tab.md)
- [nord-table](https://nordhealth.design/raw/components/table.md)
- [nord-tag-group](https://nordhealth.design/raw/components/tag-group.md)
- [nord-tag](https://nordhealth.design/raw/components/tag.md)
- [nord-textarea](https://nordhealth.design/raw/components/textarea.md)
- [nord-timestamp](https://nordhealth.design/raw/components/timestamp.md)
- [nord-toast-group](https://nordhealth.design/raw/components/toast-group.md)
- [nord-toast](https://nordhealth.design/raw/components/toast.md)
- [nord-toggle](https://nordhealth.design/raw/components/toggle.md)
- [nord-tooltip](https://nordhealth.design/raw/components/tooltip.md)
- [nord-top-bar](https://nordhealth.design/raw/components/top-bar.md)
- [nord-truncate](https://nordhealth.design/raw/components/truncate.md)
- [nord-visually-hidden](https://nordhealth.design/raw/components/visually-hidden.md)

## Foundations

- [Accessibility](https://nordhealth.design/raw/design/foundations/accessibility-checklist.md)
- [Color System](https://nordhealth.design/raw/design/foundations/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/design/foundations/color-utilities.md)
- [Principles](https://nordhealth.design/raw/design/foundations/principles.md)
- [Figma Toolkit](https://nordhealth.design/raw/design/foundations/figma.md)
- [Grid](https://nordhealth.design/raw/design/foundations/grid.md)
- [Iconography](https://nordhealth.design/raw/design/foundations/iconography.md)
- [Naming](https://nordhealth.design/raw/design/foundations/naming.md)
- [Nordhealth Brand](https://nordhealth.design/raw/design/foundations/brand.md)
- [Typography](https://nordhealth.design/raw/design/foundations/typography.md)

## Design Tokens

- [Design Tokens](https://nordhealth.design/raw/core/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.

## Tailwind CSS

- [Tailwind CSS](https://nordhealth.design/raw/core/css.md)
- [Tailwind CSS](https://nordhealth.design/raw/core/css/tailwind.md)

## CSS Framework

- [CSS Framework](https://nordhealth.design/raw/docs/developer/css-framework.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/icons.md): Nordicons are used to provide additional meaning or in places where text label doesn't fit.

## Themes

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

## 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)
- [Web Components Changelog](https://nordhealth.design/raw/changelogs.md): Release notes and package changes for Nord Design System.
- [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)
- [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): Guides for upgrading projects between Nord Design System versions.
- [Migration to Tailwind CSS](https://nordhealth.design/raw/migrations/tailwind.md)

## Help & Resources

- [Brand assets](https://nordhealth.design/raw/design/assets.md): Download Nord brand assets, UI resources, print templates, presentations, and Figma toolkits.
- [Tools](https://nordhealth.design/raw/design/tools.md): Interactive tools to help you design, theme, and check Nord-based experiences.
- [Frequently Asked Questions](https://nordhealth.design/raw/docs/developer/faq.md)
- [About the design system](https://nordhealth.design/raw/resources/about.md): Learn about Nord Design System, the team behind it, how we work, and the goals that guide the system.
- [Accessibility Statement](https://nordhealth.design/raw/resources/accessibility-statement.md): Nord Design System's commitment to providing a website that is accessible to everyone and meets WCAG 2.1 level AA standards.
- [Backlog Prioritization](https://nordhealth.design/raw/resources/backlog-prioritization.md): How the Nord team governs and prioritises incoming feature requests from product teams, sales, QA, and support.
- [Careers](https://nordhealth.design/raw/resources/careers.md): Join the team building Nord Design System. See open roles, our tech stack, and what we offer.
- [Contributing](https://nordhealth.design/raw/resources/contributing.md): Nord's contribution model allows product teams to add new features based on their product requirements.
- [Support](https://nordhealth.design/raw/resources/support.md): Get support for Nord Design System — Slack channels, weekly office hours, email, bug reports, and service status.
- [Terms of Use](https://nordhealth.design/raw/resources/terms.md): The Terms of Use governing access to the Nord Design System website and its content.

## Working with AI

- [Working with AI](https://nordhealth.design/raw/docs/developer/working-with-ai.md)
- [LLMs.txt](https://nordhealth.design/raw/docs/developer/working-with-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.
- [Agent Skills](https://nordhealth.design/raw/docs/developer/working-with-ai/skills.md): Install Nord Design System skills for AI coding agents like Claude Code, Cursor, Codex, Copilot, Windsurf, and 40+ more.

## Integration

- [Using Web Components](https://nordhealth.design/raw/docs/developer/web-components.md): Install, bundle, and use Nord Web Components across frameworks or plain HTML.
- [Webfonts](https://nordhealth.design/raw/docs/developer/webfonts.md): Install and use Nord's webfonts package to bring consistent typography to your application.
- [Content Delivery Network](https://nordhealth.design/raw/docs/developer/cdn.md): Load Nord's packages directly from the CDN — available packages, URL structure, and subresource integrity.
- [Localization](https://nordhealth.design/raw/docs/developer/localization.md): Localize Nord components — how it works, registering translations, and handling partial translations.

## 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.
- [Four Alpha Component Families for Product Interfaces](https://nordhealth.design/raw/updates/july-2026-alpha-components.md): Nord 5.1 adds alpha components for input composition, responsive content management, resizable layouts and locale-aware timestamps.
- [18 New Components, 56 Component Parts, and a Redesigned Docs Website](https://nordhealth.design/raw/updates/july-2026-component-updates.md): Explore Nord Design System's July 2026 release: a redesigned documentation website with light and dark mode, richer component pages, copy-paste blocks, quick template previews, and Nord 5 component releases grouped by purpose.
- [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)
- [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.
- [Introducing Storybook and the New Playground Experience](https://nordhealth.design/raw/updates/march-2026-storybook-playground.md)
- [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.