Nord

# Nord — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Nordhealth. "Nord" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Nord
**Owner:** Nordhealth
**Official documentation:** https://nordhealth.design/
**Visual character:** Healthcare-software hygiene: clinical blue restraint, generous touch targets for gloved hands, and web components that theme per clinic.

---

## Summary

Nordhealth's framework-agnostic system of Lit web components, tokens, and themes for healthcare software products.

_Confidence: high. Values are drawn from well-documented public token references._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Nord Blue / Primary | `#3559c7` | `--n-color-accent` | Primary actions and focus |
| Text | `#171c22` | `--n-color-text` | Primary text |
| Text Weaker | `#6e7893` | `--n-color-text-weaker` | Secondary text |
| Surface | `#ffffff` | `--n-color-surface` | Cards and panels |
| Background | `#f4f5f7` | `--n-color-background` | App background |
| Border | `#d6dbe1` | `--n-color-border` | Borders |
| Danger | `#d92b2b` | `--n-color-status-danger` | Errors |
| Success | `#20873c` | `--n-color-status-success` | Success |
| Warning | `#ee7d00` | `--n-color-status-warning` | Warnings |

## Typography

- **Body:** Nord Sans / system — weights 400, 500, 700 — `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| heading-xxl | `32px` | `40px` |
| heading-l | `22px` | `28px` |
| heading-m | `18px` | `24px` |
| body | `16px` | `24px` |
| caption | `12px` | `16px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `32px` · `48px`

## Corner radius

| Name | Value |
| --- | --- |
| small | `4px` |
| default | `8px` |
| pill | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| small | `0 1px 2px rgba(23,28,34,0.08)` |
| medium | `0 4px 12px rgba(23,28,34,0.12)` |

## Motion

| Name | Value |
| --- | --- |
| quickly | `150ms ease` |

## Quick start (CSS)

```css
/* Nord — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://nordhealth.design/ */

:root {
  /* Color */
  --n-color-accent: #3559c7; /* Primary actions and focus */
  --n-color-text: #171c22; /* Primary text */
  --n-color-text-weaker: #6e7893; /* Secondary text */
  --n-color-surface: #ffffff; /* Cards and panels */
  --n-color-background: #f4f5f7; /* App background */
  --n-color-border: #d6dbe1; /* Borders */
  --n-color-status-danger: #d92b2b; /* Errors */
  --n-color-status-success: #20873c; /* Success */
  --n-color-status-warning: #ee7d00; /* Warnings */

  /* Typography */
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Type scale */
  --text-heading-xxl: 32px /* line-height 40px */;
  --text-heading-l: 22px /* line-height 28px */;
  --text-heading-m: 18px /* line-height 24px */;
  --text-body: 16px /* line-height 24px */;
  --text-caption: 12px /* line-height 16px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Radius */
  --radius-small: 4px;
  --radius-default: 8px;
  --radius-pill: 9999px;

  /* Elevation */
  --shadow-small: 0 1px 2px rgba(23,28,34,0.08);
  --shadow-medium: 0 4px 12px rgba(23,28,34,0.12);

  /* Motion */
  --motion-quickly: 150ms ease;
}
```

## Engineering profile

- **Ships for:** Web Components, Vue, React
- **Source model:** Open source
- **Figma:** Official Figma kit

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Nord by Nordhealth — Nordhealth's framework-agnostic system of Lit web components, tokens, and themes for healthcare software products. Character: Healthcare-software hygiene: clinical blue restraint, generous touch targets for gloved hands, and web components that theme per clinic. Use a primary colour near #3559c7, the typeface "Nord Sans / system" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 4px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Nord documentation](https://nordhealth.design/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/nordhealth-nord) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._