# Rosé Pine — TUI Design System

> All natural, nothing artificial. Inspired by the popular Rosé Pine color palette. Soft, muted, elegant — the terminal equivalent of a cozy evening.

## 1. Theme Overview

- **Mood**: Warm, soft, cozy
- **Density**: Balanced — readable without feeling sparse
- **Target**: Code editors, note apps, personal tools, writing environments
- **Terminal**: 256-color minimum, TrueColor recommended

## 2. Color Palette

### Semantic Roles (Rosé Pine Main)

| Role | Hex | ANSI 256 | ANSI 16 | Usage |
|------|-----|----------|---------|-------|
| Background (Base) | `#191724` | `233` | `black` | Main background |
| Foreground (Text) | `#e0def4` | `189` | `white` | Default text |
| Primary (Rose) | `#ebbcba` | `181` | `bright red` | Key elements, focus |
| Secondary (Iris) | `#c4a7e7` | `183` | `bright magenta` | Supporting, links |
| Accent (Gold) | `#f6c177` | `222` | `yellow` | Highlights, attention |
| Success (Pine) | `#31748f` | `30` | `cyan` | Positive status |
| Warning (Gold) | `#f6c177` | `222` | `yellow` | Caution |
| Error (Love) | `#eb6f92` | `204` | `red` | Error, destructive |
| Muted (Subtle) | `#6e6a86` | `60` | `bright black` | Dim, inactive |
| Surface | `#1f1d2e` | `234` | `black` | Raised surfaces |

### Extended Palette

| Name | Hex | ANSI 256 | Usage |
|------|-----|----------|-------|
| Overlay | `#26233a` | `235` | Popups, menus |
| Highlight Low | `#21202e` | `234` | Subtle hover |
| Highlight Med | `#403d52` | `238` | Active selection |
| Highlight High | `#524f67` | `240` | Strong emphasis |
| Foam | `#9ccfd8` | `152` | Strings, paths |

## 3. Typography & ASCII Art

- **Header font**: `small` (figlet) — delicate, compact
- **Body text**: plain terminal font
- **Emphasis**: `bold` with Rose or Iris, `italic` if terminal supports
- **Code/values**: Foam color

### Text Hierarchy

| Level | Style | Example Usage |
|-------|-------|---------------|
| H1 | figlet `small` + Rose | App title |
| H2 | BOLD + Rose | Section headers |
| H3 | BOLD + Iris | Subsections |
| Body | Text (foreground) | Content |
| Caption | Subtle (muted) | Help, metadata |
| Data | Foam | Paths, values, strings |

## 4. Borders & Box Drawing

### Primary Border

```
╭──────────────╮
│   content    │
╰──────────────╯
```

Rounded corners in Muted color. Soft and unobtrusive.

### Parts Table

| Part | Character | Color | Usage |
|------|-----------|-------|-------|
| top_left | `╭` | Muted | Panel corners |
| top_right | `╮` | Muted | |
| bottom_left | `╰` | Muted | |
| bottom_right | `╯` | Muted | |
| horizontal | `─` | Muted | |
| vertical | `│` | Muted | |
| cross | `┼` | Muted | Tables |
| tee_down | `┬` | Muted | |
| tee_up | `┴` | Muted | |
| tee_right | `├` | Muted | |
| tee_left | `┤` | Muted | |

Borders are always in Muted color — they frame, not compete.

### Dividers

- Horizontal: `──────────────────` (Muted)
- Section break: `── ◦ ──` (Muted + Rose dot)
- Subtle: dim `│` for vertical separation

## 5. Components

### Buttons / Actions

```
  ▸ Save     Cancel     Help
    ↑          ↑         ↑
 focused    normal     muted
```

- Focused: `▸` prefix + BOLD + Rose bg (reverse)
- Normal: Text color, no decoration
- Disabled: Subtle (muted) + dim

### Input Fields

```
  Title  ──────────────────
         My new note_
```

- Active: Rose color underline, visible cursor
- Inactive: Muted underline
- Error: Love (error) underline + error message in Love

Underline-style inputs — no box borders. Minimal.

### Tables

```
  Name             Role          Status
  ────────────────────────────────────────
  Alice            Developer     ▸ Active
  Bob              Designer      · Idle
  Carol            PM            ▸ Active
```

Borderless. Single divider line in Muted. Clean.

### Lists / Menus

```
    Morning routine
  ▸ Write documentation
    Review pull requests
    Update dependencies
```

- Selected: `▸` prefix + BOLD + Rose
- Normal: 4-space indent + Text
- Disabled: Subtle + dim

### Panels / Cards

```
╭── Notes ──────────────────────╮
│                                │
│  Today I worked on the new     │
│  design system. The colors     │
│  feel right this time.         │
│                                │
│  ◦ 2 min read · edited 1h ago │
╰────────────────────────────────╯
```

Rounded borders in Muted. Title in Rose. Footer metadata in Subtle.

### Tabs

```
 ▸ Notes    Journal    Archive    Settings
 ──────────────────────────────────────────
```

Active: `▸` + Rose + BOLD. Inactive: Subtle.

### Status Bar

```
 ▸ notes.md · 142 words · saved                          ~/documents
```

Rose for active indicator. `·` separators. Right-aligned path in Foam.

## 6. Layout & Spacing

- **Min terminal width**: `80`
- **Ideal terminal width**: `90`
- **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 everything
- Right-align only status bar secondary info
- Generous vertical margins
- Let the background breathe — less is more

## 7. Icons & Indicators

| Purpose | Icon | Color | Fallback |
|---------|------|-------|----------|
| Active | `▸` | Rose | `>` |
| Inactive | `·` | Subtle | `.` |
| Success | `✓` | Pine | `+` |
| Error | `✗` | Love | `x` |
| Warning | `!` | Gold | `!` |
| Info | `·` | Iris | `-` |
| Spinner | `⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏` | Iris | `\|/-` |
| Arrow | `→` | Rose | `->` |
| Bullet | `◦` | Subtle | `o` |
| Dot | `·` | Subtle | `.` |

Minimal, unobtrusive icons. Single-width only.

## 8. Animation & Motion

### Spinners

- Default: `⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏` at 100ms in Iris
- Gentle: `·  ` → `·· ` → `···` → `·· ` → `·  ` → `   ` at 300ms in Rose

### Transitions

- No animated transitions
- Instant state changes
- Spinner only for async operations

### Progress

```
  ·············◦◦◦◦◦◦◦◦ 58%
```

- Filled: `·` in Rose, Empty: `◦` in Subtle
- Minimal caps — no brackets
- Small, unobtrusive percentage

## 9. Agent Prompt Guide

### Quick Reference

```
Background: #191724  (dark purple-black)
Foreground: #e0def4  (lavender white)
Rose:       #ebbcba  (warm pink — primary)
Iris:       #c4a7e7  (soft purple — secondary)
Gold:       #f6c177  (warm gold — accent)
Foam:       #9ccfd8  (teal — data/code)
Border:     ╭─╮│╰─╯  (rounded, muted color)
Style:      warm, muted, cozy, minimal borders in dim color, lots of breathing room
```

### Example Prompts

- "Build a note-taking app: Rosé Pine palette, rounded dim borders, warm pink accents, underline-style inputs, generous spacing, ▸ for selection"
- "Create a task list: dark purple bg, lavender text, warm pink for active items, ◦ bullets, borderless tables with single dim divider"
- "Design a file browser: Rosé Pine colors, foam/teal for paths, muted borders, ▸ selector, · separators in status bar"

## Do's and Don'ts

### Do

- Use muted/dim borders — they should frame, not shout
- Use Rose sparingly — it's the accent, not the base
- Mix Rose (warm) and Iris (cool) for visual depth
- Use Foam for any data, paths, or code-like content
- Keep the overall feeling cozy and intimate

### Don't

- Don't use bright neon anything — this is a muted theme
- Don't use heavy or double-line borders — too aggressive
- Don't use ALL CAPS — too loud
- Don't use emoji — clean Unicode only
- Don't over-decorate — the beauty is in restraint