Nord

---
name: nord-arctic
description: Apply the Nord visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Nord, mentions nord theme, arctic palette, polar night, or describes arctic blue-grey base, icy frost-blue accents, dimmed pastel aurora colors — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Nord Design System

An arctic, north-bluish design language: four dark blue-grey Polar Night shades, three near-white Snow Storm tones, four icy Frost blues for action, and five muted Aurora colors for meaning. Calm, dimmed, and disciplined — the Scandinavian minimalism of terminal themes.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values come from the officially published token set. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Nord.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (nord theme, arctic palette, polar night, frost palette, nordic color scheme), or describes its traits: arctic blue-grey base; icy frost-blue accents; dimmed pastel aurora colors; flat and uncluttered surfaces; cool desaturated calm.

## Design tokens

### Color palette

- Page background — nord0, darkest Polar Night: `#2e3440` (--color-bg)
- Elevated cards and panels — nord1: `#3b4252` (--color-surface)
- Second elevation step, active states — nord2: `#434c5e` (--color-surface-2)
- Borders, dividers, disabled text — nord3: `#4c566a` (--color-border)
- Primary headings and emphasis — nord6, brightest Snow Storm: `#eceff4` (--color-text)
- Body text and secondary content — nord4: `#d8dee9` (--color-text-muted)
- Primary UI accent, links and buttons — nord8, core Frost blue: `#88c0d0` (--color-accent)
- Secondary accent, hover and supporting UI — nord9: `#81a1c1` (--color-accent-2)
- Tertiary dark Frost blue for fills and visited states — nord10: `#5e81ac` (--color-accent-deep)
- Errors and destructive actions — nord11, Aurora red: `#bf616a` (--color-red)
- Warnings and highlights — nord13, Aurora yellow: `#ebcb8b` (--color-yellow)
- Success states and additions — nord14, Aurora green: `#a3be8c` (--color-green)

### Typography

- Display / headings: Fira Code (fallback: SFMono-Regular, Menlo, monospace)
- Body: Inter (fallback: -apple-system, Segoe UI, sans-serif)
- Mono / data: Fira Code (fallback: SFMono-Regular, Menlo, monospace)
- Type scale: 1.25 ratio, base 16px — computed steps: 16px / 20px / 25px / 31px / 39px / 49px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 500, line-height 1.25, letter-spacing -0.01em
- Body: line-height 1.7, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 16, 24, 32, 48, 64, 96 — Uncluttered and even — Nord's official style is minimal and flat, so give sections wide, regular whitespace and let the four-step elevation ladder do the structuring.
- Border radius: sm 4px, md 8px — Modest, functional rounding. Nord is restrained — nothing pill-shaped except tags.
- Border treatment: 1px solid #4c566a — nord3 hairlines everywhere; elevation is otherwise communicated by the nord0→nord3 background ladder.

### Shadows

- none: `none` — Default — Nord is explicitly flat; use the Polar Night elevation ladder instead
- modal: `0 8px 32px rgba(0, 0, 0, 0.35)` — Modals and command palettes only

### Layout

- Max content width: 1200px
- Elevation via the Polar Night ladder: nord0 page, nord1 cards, nord2 hover, nord3 borders
- Frost owns interactivity; Aurora owns semantics — the two groups never trade jobs
- Dashboard-friendly: dense data tables on nord1 with nord3 row dividers read beautifully

### Effects

- Code blocks on nord1 with Frost/Aurora syntax colors and a nord3 left rule
- Optional faint aurora-gradient accent line (nord7→nord8→nord9) atop the page header

### Motion

- Easing: cubic-bezier(0.4, 0, 0.2, 1); durations 100ms / 180ms / 300ms
- Cool and unhurried: opacity and background-color transitions, minimal movement
- Hover moves one step up the Polar Night ladder rather than adding glow

## CSS variables (drop-in)

```css
:root {
  --color-bg: #2e3440;
  --color-surface: #3b4252;
  --color-surface-2: #434c5e;
  --color-border: #4c566a;
  --color-text: #eceff4;
  --color-text-muted: #d8dee9;
  --color-accent: #88c0d0;
  --color-accent-2: #81a1c1;
  --color-accent-deep: #5e81ac;
  --color-red: #bf616a;
  --color-yellow: #ebcb8b;
  --color-green: #a3be8c;
  --radius-sm: 4px;
  --radius-md: 8px;
  --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.35);
  --border-default: 1px solid #4c566a;
  --font-display: "Fira Code", SFMono-Regular, Menlo, monospace;
  --font-body: Inter, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Fira Code", SFMono-Regular, Menlo, monospace;
  --text-base: 16px;
  --leading-heading: 1.25;
  --leading-body: 1.7;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 100ms;
  --duration-base: 180ms;
  --duration-slow: 300ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;700&family=Inter:wght@400;600&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** Flat bar on nord0 with a 1px nord3 bottom border; links in nord4, active link in nord8 frost blue; a Fira Code wordmark keeps the terminal lineage visible.
- **Hero:** Left-aligned headline in nord6 over nord0, subhead in nord4, primary CTA in nord8; a decorative terminal window on nord1 shows Nord syntax highlighting as the hero art.
- **Card:** nord1 panel, 8px radius, 1px nord3 border, 24px padding; hover lifts background to nord2 with no shadow; title nord6, body nord4, link nord8.
- **Button (primary):** nord8 #88c0d0 fill with nord0 #2e3440 text, 4px radius, 600 weight; hover deepens to nord9 #81a1c1.
- **Button (secondary):** Transparent, 1px nord3 border, nord4 text; hover fills nord1 and brightens border to nord8.
- **Form fields:** nord1 input with 1px nord3 border, 4px radius; focus border nord8 with a 2px frost outline; placeholder in nord3 (decorative only, not the sole label).

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The Frost group doing all interactive work: icy #88c0d0 cyan-blue links and buttons glowing coolly against the #2e3440 Polar Night base, with never a warm or saturated color except a muted Aurora accent carrying semantic meaning. Spend boldness here; keep everything else quiet.

## Do

- Keep every color one of the 16 published Nord values — the discipline is the aesthetic
- Use Frost blues for everything interactive and Aurora strictly for status/semantic color
- Prefer background-ladder elevation over shadows; Nord is documented as flat and minimal
- Use nord6 for headings and nord4 for body to get two text tiers for free

## Don't

- Don't introduce warm or saturated accent colors — Nord's identity is its dimmed, cool register
- Don't use Aurora red/green for decoration; they read as status at a glance
- Don't stack heavy shadows or gradients on Polar Night surfaces

## Accessibility notes

- Snow Storm text on nord0 is strong: nord6 ~12.5:1 and nord4 ~10:1, both pass AAA
- Frost nord8 #88c0d0 on nord0 passes AA (~7:1) for text; darker nord10 #5e81ac is fills-only — it fails AA as text on Polar Night
- Aurora colors pass AA on nord0 as large text or icons, but nord11 red is borderline (~3.9:1) for small text — pair status colors with icons or labels
- nord3 #4c566a is published as the disabled/non-focus tone and is intentionally low contrast — never use it for meaningful text

## Reference sites

- Nord colors and palettes docs: https://www.nordtheme.com/docs/colors-and-palettes
- Nord GitHub repository: https://github.com/nordtheme/nord

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip nord-arctic.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/nord-arctic.json

Settings → Capabilities → Skills → Upload skill → nord-arctic.zip