# Ocean — TUI Design System

> Calm, deep, focused. The serenity of ocean depths. Inspired by deep-sea blues, soft greens, and the feeling of flow state.

## 1. Theme Overview

- **Mood**: Calm, professional, focused
- **Density**: Balanced — comfortable reading with clear hierarchy
- **Target**: Productivity tools, note-taking, task managers, documentation viewers
- **Terminal**: 256-color minimum, TrueColor recommended

## 2. Color Palette

### Semantic Roles

| Role | Hex | ANSI 256 | ANSI 16 | Usage |
|------|-----|----------|---------|-------|
| Background | `#0b1929` | `233` | `black` | Deep ocean dark |
| Foreground | `#c8d6e5` | `152` | `white` | Soft blue-white |
| Primary | `#48dbfb` | `81` | `bright cyan` | Sky blue — main accent |
| Secondary | `#0abde3` | `38` | `cyan` | Deeper blue — supporting |
| Accent | `#55efc4` | `85` | `bright green` | Sea foam green |
| Success | `#00d2d3` | `44` | `cyan` | Teal success |
| Warning | `#feca57` | `221` | `yellow` | Sandy yellow |
| Error | `#ff6b6b` | `203` | `red` | Coral red |
| Muted | `#576574` | `60` | `bright black` | Storm gray |
| Surface | `#152d45` | `235` | `black` | Deeper blue surface |

### Depth Scale

| Depth | Hex | Usage |
|-------|-----|-------|
| Shallow | `#1e3a5f` | Active surface, hover |
| Mid | `#152d45` | Default surface |
| Deep | `#0b1929` | Background |
| Abyss | `#060f1a` | Deepest BG, overlays |

## 3. Typography & ASCII Art

- **Header font**: `small` or `mini` (figlet) — understated
- **Body text**: plain terminal font
- **Emphasis**: `bold` + Primary, or `underline` for links
- **Code/values**: Accent (seafoam green)

### Text Hierarchy

| Level | Style | Example Usage |
|-------|-------|---------------|
| H1 | figlet `small` + Primary | App title |
| H2 | BOLD + Primary | Section headers |
| H3 | BOLD + Foreground | Subsections |
| Body | Foreground | Content |
| Caption | Muted | Timestamps, help |
| Data | Accent (green) | Values, counts |

## 4. Borders & Box Drawing

### Primary Border

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

Rounded corners. Soft and approachable.

### 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 | `┤` | |

### Secondary Border

Dim single-line (same characters, Muted color) for nested elements.

### Dividers

- Horizontal: `─ ─ ─ ─ ─ ─ ─ ─ ─` (dashed, like gentle waves)
- Section break: `── ~ ──`
- Subtle: `·   ·   ·   ·` (scattered dots, like bubbles)

## 5. Components

### Buttons / Actions

```
 ╭──────────╮   ╭──────────╮   ╭──────────╮
 │ ◆ Save   │   │  Cancel  │   │   Help   │
 ╰──────────╯   ╰──────────╯   ╰──────────╯
     ↑               ↑              ↑
 focused(pri)   unfocused(fg)    muted
```

- Focused: rounded border + Primary color + `◆` prefix
- Unfocused: rounded border + Foreground
- Disabled: rounded border + Muted + dim

### Input Fields

```
  Title: ╭────────────────────────╮
         │ My ocean project_      │
         ╰────────────────────────╯
```

- Active: Primary color border
- Inactive: Muted border
- Error: Error (coral) border

### Tables

```
  Name              Status         Updated
  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
  project-alpha     ◆ Active       2h ago
  project-beta      ◇ Paused       1d ago
  project-gamma     ◆ Active       5m ago
```

No outer border. Dashed separator. Clean and open.

### Lists / Menus

```
    project-alpha
  ◆ project-beta
    project-gamma
    project-delta
```

- Selected: `◆` prefix + BOLD + Primary
- Normal: 4-space indent + Foreground
- Disabled: Muted + dim

### Panels / Cards

```
╭── Tasks ─────────────────────╮
│                               │
│  ◆ Review design spec         │
│  ◇ Update dependencies        │
│  ◇ Write tests                │
│                               │
│  3 remaining · 1 complete     │
╰───────────────────────────────╯
```

Title integrated in top border. Footer info in Muted.

### Tabs

```
 ◆ Overview   ◇ Tasks   ◇ Notes   ◇ Settings
 ─────────────────────────────────────────────
```

Active: `◆` + BOLD + Primary. Inactive: `◇` + Muted.

### Status Bar

```
 ◆ project-alpha · 3 tasks · last saved 2m ago                    ~/projects
```

Single line. `◆` status. Separated by ` · `. Right-aligned path.

## 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 all content
- Right-align status bar secondary info
- Generous vertical spacing — don't crowd the interface
- Let the dark background serve as natural separation

## 7. Icons & Indicators

| Purpose | Icon | Fallback (ASCII) |
|---------|------|-------------------|
| Active | `◆` | `*` |
| Inactive | `◇` | `o` |
| Success | `✓` | `+` |
| Error | `✗` | `x` |
| Warning | `△` | `!` |
| Info | `○` | `-` |
| Spinner | `⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏` | `\|/-` |
| Arrow | `→` | `->` |
| Bullet | `·` | `-` |
| Wave | `~` | `~` |
| Separator | `·` | `.` |

Soft, rounded icons. No sharp edges.

## 8. Animation & Motion

### Spinners

- Default: `⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏` at 100ms — smooth dots
- Gentle: `○ ◔ ◑ ◕ ●` at 200ms — filling circle

### Transitions

- Gentle fade: dim → normal (text appears softly)
- No harsh flashes or blinks
- Smooth progress, no jumping values

### Progress

```
  ○○○○○○○○○○○○○○○○○○○○ 0%
  ●●●●●●●●●●○○○○○○○○○○ 50%
  ●●●●●●●●●●●●●●●●●●●● 100% ✓
```

- Filled: `●` in Primary, Empty: `○` in Muted
- No frame/caps — floating style
- Show percentage, checkmark on completion

## 9. Agent Prompt Guide

### Quick Reference

```
Background: #0b1929  (deep ocean)
Foreground: #c8d6e5  (soft blue-white)
Primary:    #48dbfb  (sky blue)
Accent:     #55efc4  (seafoam green)
Border:     ╭─╮│╰─╯  (rounded)
Style:      calm ocean, soft blues, rounded borders, generous spacing, no harsh elements
```

### Example Prompts

- "Build a task manager: ocean theme, rounded borders, ◆/◇ status diamonds, sky blue accent, dashed table separators, soft and spacious layout"
- "Create a note viewer: deep blue background, seafoam green for data/code, rounded panels with embedded titles, ── ~ ── section breaks"
- "Design a project dashboard: calm blue palette, ●○ circle progress, · separated status bar, rounded cards with padding"

## Do's and Don'ts

### Do

- Use rounded corners — they define this theme
- Use generous whitespace — the calm is in the breathing room
- Use dashed lines (`─ ─ ─`) for gentle separation
- Use `◆` / `◇` diamonds for selection states
- Keep animations smooth and slow

### Don't

- Don't use double-line or heavy borders — too aggressive
- Don't use ALL CAPS — too loud for this theme
- Don't use bright neon colors — keep everything soft
- Don't use emoji — clean Unicode symbols only
- Don't pack information too densely — this theme values clarity over density