Nord — TUI Design System

Arctic, north-bluish clean aesthetic. Based on the Nord color palette — inspired by the beauty of the arctic.

1. Theme Overview

Mood: Clean, cool, serene
Density: Balanced — structured with clear visual hierarchy
Target: System tools, config editors, monitoring dashboards, professional CLI
Terminal: 256-color minimum, TrueColor recommended

2. Color Palette

Semantic Roles

Role	Hex	ANSI 256	ANSI 16	Usage
Background	`#2e3440`	`236`	`black`	Polar Night — darkest
Foreground	`#eceff4`	`255`	`white`	Snow Storm — brightest
Primary	`#88c0d0`	`110`	`cyan`	Frost — primary accent
Secondary	`#81a1c1`	`109`	`blue`	Frost — secondary
Accent	`#5e81ac`	`67`	`bright blue`	Frost — deep accent
Success	`#a3be8c`	`144`	`green`	Aurora — green
Warning	`#ebcb8b`	`222`	`yellow`	Aurora — yellow
Error	`#bf616a`	`131`	`red`	Aurora — red
Muted	`#4c566a`	`240`	`bright black`	Polar Night — lightest
Surface	`#3b4252`	`238`	`black`	Polar Night — raised

Extended Nord Palette

Name	Hex	ANSI 256	Usage
Nord 7 (Teal)	`#8fbcbb`	`109`	Frost — standalone, classes
Nord 12 (Orange)	`#d08770`	`173`	Aurora — urgent, values
Nord 13 (Purple)	`#b48ead`	`139`	Aurora — special, decorative
Polar 2	`#434c5e`	`239`	Selection background

3. Typography & ASCII Art

Header font: small (figlet) — clean, compact
Body text: plain terminal font
Emphasis: bold + Primary (Frost cyan)
Code/values: Nord 7 (Teal)

Text Hierarchy

Level	Style	Example Usage
H1	figlet `small` + Primary	App title
H2	BOLD + Primary	Section headers
H3	BOLD + Secondary	Subsections
Body	Foreground (Snow Storm)	Content
Caption	Muted (Polar Night)	Help, metadata
Data	Teal (Nord 7)	Values, constants

4. Borders & Box Drawing

Primary Border

┌──────────────┐
│   content    │
└──────────────┘

Single-line in Muted (Polar Night). Clean and structured.

Parts Table

Part	Character	Usage
top_left	`┌`	Panel corners
top_right	`┐`
bottom_left	`└`
bottom_right	`┘`
horizontal	`─`
vertical	`│`
cross	`┼`	Table intersections
tee_down	`┬`
tee_up	`┴`
tee_right	`├`
tee_left	`┤`

Dividers

Horizontal: ────────────────── (Muted)
Section break: ── ● ──

5. Components

Buttons / Actions

 ▸ Apply     Cancel     Help
   ↑           ↑         ↑
 focused     normal    muted

Focused: ▸ prefix + reverse (Primary bg) + BOLD
Normal: Foreground
Disabled: Muted + dim

Input Fields

  Hostname: ┌────────────────────────┐
            │ 192.168.1.1_           │
            └────────────────────────┘

Active: Primary (Frost) border
Inactive: Muted border
Error: Error (Aurora red) border

Tables

  ┌───────────────┬──────────┬─────────┐
  │ Service       │ Status   │ Uptime  │
  ├───────────────┼──────────┼─────────┤
  │ nginx         │ ✓ active │ 14d     │
  │ postgres      │ ✓ active │ 14d     │
  │ redis         │ ✗ down   │ --      │
  └───────────────┴──────────┴─────────┘

Full single-line borders. Structured and organized — the Nord way.

Lists / Menus

    System settings
  ▸ Network config
    Security
    Logs

Selected: ▸ + BOLD + Primary
Normal: Foreground
Disabled: Muted + dim

Panels / Cards

┌── System Monitor ──────────────┐
│                                 │
│  CPU   ████████░░░░░░░░  52%   │
│  MEM   ██████████████░░  87%   │
│  DISK  ████░░░░░░░░░░░░  28%   │
│                                 │
└─────────────────────────────────┘

Title embedded in top border (Primary color). Body in Foreground.

Status Bar

 ▸ connected · node-01 · uptime 14d 3h                   192.168.1.1

Primary status indicator. Muted separators.

6. Layout & Spacing

Min terminal width: 80
Ideal terminal width: 100
Padding inside panels: 1 line top/bottom, 1 char left/right
Gap between components: 1 empty line
Indent level: 2 spaces

Alignment Principles

Left-align content
Right-align numeric values in tables
Structured grid feel — consistent spacing

7. Icons & Indicators

Purpose	Icon	Fallback (ASCII)
Success	`✓`	`+`
Error	`✗`	`x`
Warning	`▲`	`!`
Info	`●`	`*`
Pending	`○`	`o`
Running	`▸`	`>`
Spinner	`⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏`	`\|/-`
Arrow	`→`	`->`
Bullet	`●`	`*`
Selected	`▸`	`>`

8. Animation & Motion

Spinners

Default: ⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏ at 80ms in Primary (Frost)
Subtle: · → ·· → · → at 250ms in Secondary

Transitions

No animated transitions — instant, predictable state changes
Spinners for async operations only

Progress

  ▕████████████░░░░░░░░▏ 58%

Filled: █ in Primary (Frost), Empty: ░ in Muted
Caps: ▕ ▏
Show percentage
Color shifts to Success on completion

9. Agent Prompt Guide

Quick Reference

Background: #2e3440  (Polar Night dark)
Foreground: #eceff4  (Snow Storm bright)
Primary:    #88c0d0  (Frost cyan)
Secondary:  #81a1c1  (Frost blue)
Accent:     #5e81ac  (Frost deep blue)
Success:    #a3be8c  (Aurora green)
Warning:    #ebcb8b  (Aurora yellow)
Error:      #bf616a  (Aurora red)
Muted:      #4c566a  (Polar Night light)
Border:     ┌─┐│└─┘  (single line, muted color)
Style:      arctic clean, cool blues, structured layout, single-line borders

Example Prompts

“Build a system monitor: Nord palette, single-line bordered panels, frost cyan headers, aurora colors for status, structured grid layout”
“Create a config editor: dark polar background, frost blue accents, fully bordered tables, ▸ selector, clean and structured”
“Design a network dashboard: Nord theme, muted borders, frost cyan for active connections, aurora red for errors, aurora green for healthy nodes”

Do’s and Don’ts

Do

Use the Frost palette (blues/cyans) as primary accents
Use Aurora colors only for semantic meaning (green=ok, yellow=warn, red=error)
Use single-line borders consistently — they are the Nord signature
Keep the overall feel cool and structured
Use full borders on tables — Nord is about structure

Don’t

Don’t use rounded corners — too soft, Nord is about clean lines
Don’t use double-line or heavy borders — Nord is understated
Don’t use warm colors as accents — stay in the cool spectrum
Don’t mix too many Aurora colors in one view — save them for meaning
Don’t use emoji — clean Unicode only

Palette

At a glance

Design System · Nord