Building a CLI app with **Textual** is a great choice for that "retro-futuristic" or stylized aesthetic. Since Textual is built on top of **Rich**, you have a surprisingly deep toolbox for visual storytelling that goes way beyond just picking a color palette.

To achieve an **Art Deco** or **Film Noir** vibe, you’ll want to focus on geometry, high contrast, and typography. Here is how you can push the boundaries of TUI (Terminal User Interface) design:

---

## 1. Graphical Elements & Borders

Textual doesn't use pixels, but it uses **Unicode characters** to simulate graphics.

- **Custom Borders:** Instead of standard boxes, use the `border` CSS property with specific styles. For Art Deco, "heavy" or "double" borders provide that architectural weight.
    
- **Edge Displays:** Use the `Edge` class to create vertical or horizontal lines that divide the screen into "panels," mimicking the sharp geometric lines of the 1920s.
    
- **Braille Patterns & Block Elements:** You can use symbols like `█`, `▓`, `▒`, and `░` to create gradients or "shadows" without needing images.
    
- **ASCII/ANSI Art:** For a Film Noir look, you can include a "splash screen" using ASCII art to create a silhouette effect.
    

---

## 2. Layout as Design (Geometry)

The "vibe" often comes from how you space things out rather than what you put in them.

- **Symmetry (Art Deco):** Use `Grid` layouts to create perfectly symmetrical sidebars or central columns. Art Deco is obsessed with "stepping"—you can mimic this by nesting containers with varying widths.
    
- **Negative Space (Film Noir):** Noir is all about shadows. Use wide margins and large empty areas to make your text feel "isolated" or dramatic.
    
- **Rule of Thirds:** Avoid filling the whole screen. A small, high-contrast window in the center of a dark terminal creates an immediate sense of mystery.
    

---

## 3. Typography & Styling

Since you can't change the user's terminal font, you have to get creative with how you present text.

- **Big Text:** Use the `Figlet` or `Textual.widgets.Digits` for headers. A tall, skinny font style fits Art Deco perfectly.
    
- **Text Properties:** Use `italic` for a noir "detective's inner monologue" feel, or `bold` for the heavy, industrial look of the 30s.
    
- **Character Spacing:** You can simulate "kerning" by manually adding spaces between letters in headers (e.g., `S E A R C H`) to give it a high-end, cinematic look.
    

---

## 4. Visual Effects (The "Atmosphere")

Textual allows for dynamic elements that can enhance the mood:

|Effect|Noir Application|Art Deco Application|
|---|---|---|
|**Blink/Pulse**|A flickering neon "Open" sign.|A slow, "breathing" golden glow on a border.|
|**Opacity**|Use `opacity: 50%` to make background elements fade into the shadows.|Layering elements to create a sense of depth.|
|**Screens**|Use "fades" when switching screens to mimic a camera cut.|Sharp, instant transitions that feel like shifting gears.|

Export to Sheets

---

## 5. The "Noir/Deco" Palette Strategy

Even though you asked for things _besides_ color, how you use the color is a design choice in itself:

- **Film Noir:** Stick to `grayscale`. Use `white`, `gray`, and `black`. Use `reverse` styling (black text on white background) sparingly to represent a "flash" or a spotlight.
    
- **Art Deco:** High-contrast pairings. Think `gold` (`#D4AF37`) on `deep navy` (`#000080`) or `black`.
    

> **Pro Tip:** Check out the **[Rich Gallery](https://rich.readthedocs.io/en/latest/appendix/colors.html)** for a full list of standard colors, or use hex codes if the user's terminal supports TrueColor (most modern ones do).

---

## 6. Swappable Design Elements (Future Themes)

The current `ThemeConfig` supports CSS, vocabulary, aliases, and narrative. To enable full theme swaps, consider these **element categories** that can be mixed/matched:

### 6.1 Border Styles

Different border styles dramatically change the feel:

| Style | Unicode | Best For | Example |
|-------|---------|----------|---------|
| **Noir/Heavy** | `━ ┃ ┏ ┓ ┗ ┛` | Industrial, serious | Current noir theme |
| **Double** | `═ ║ ╔ ╗ ╚ ╝` | Art Deco, formal, upscale | Future "Gilded Age" theme |
| **Light** | `─ │ ┌ ┐ └ ┘` | Minimal, modern, clean | Future "Cyberpunk" theme |
| **ASCII** | `- | + + + +` | Retro 80s, raw terminal | Future "Hacker" theme |
| **Rounded** | `─ │ ╭ ╮ ╰ ╯` | Friendly, soft, approachable | Future "Cozy" theme |
| **Dotted** | `╌ ╎ ┌ ┐ └ ┘` | Tech, dotted matrix | Future "Terminal" theme |

**Implementation approach:**
```python
@dataclass
class BorderSet:
    """Unicode box-drawing characters for a theme."""
    horizontal: str
    vertical: str
    top_left: str
    top_right: str
    bottom_left: str
    bottom_right: str

NOIR_BORDERS = BorderSet("━", "┃", "┏", "┓", "┗", "┛")
ART_DECO_BORDERS = BorderSet("═", "║", "╔", "╗", "╚", "╝")
```

### 6.2 Decorative Elements

Non-functional visual accents that add personality:

| Element | Noir Style | Art Deco Style | Cyberpunk Style |
|---------|------------|----------------|-----------------|
| **Divider** | `━━━✦━━━` | `═══◆═══` | `───▶───` |
| **Bullet** | `•` or `◦` | `◆` or `❖` | `▸` or `■` |
| **Corner accent** | `╾╼` | `❰❱` | `》` |
| **Progress fill** | `█▓▒░` | `▮▯` | `▰▱` |
| **Quote marks** | `""` | `「」` | `『』` |
| **Separator line** | `┄┄┄` | `┅┅┅` | `·····` |

### 6.3 ASCII/Unicode Art Blocks

For splash screens, headers, or atmospheric decoration:

**Film Noir - Venetian blinds effect:**
```
║▓▓▓▓▓▓║
║░░░░░░║
║▓▓▓▓▓▓║
║░░░░░░║
```

**Art Deco - Sunburst header:**
```
╲ ╳ ╱ ╲ ╳ ╱ ╲ ╳ ╱
══╩═══╩═══╩═══╩══
    ◇ ART DECO ◇
══╦═══╦═══╦═══╦══
╱ ╳ ╲ ╱ ╳ ╲ ╱ ╳ ╲
```

**Cyberpunk - Glitchy header:**
```
▓░▒█ UNFAMILIAR █▒░▓
[▓▓▓▓▓▓░░░░] 60%
```

### 6.4 Atmospheric Gradients

Block characters create depth without images:

| Gradient Type | Characters | Use Case |
|---------------|------------|----------|
| **Shadow edge** | `░▒▓█` | Panel edges, fade-to-black |
| **Light spill** | `█▓▒░` | Spotlight effects |
| **Noise/static** | `▚▞▌▐` | CRT monitor effect |
| **Rain** | `│┃╽╿` | Noir rain effect |

**CSS pattern for shadow edges:**
```css
/* Left shadow strip on panels */
.shadow-edge {
    background: $noir-bg;
    border-left: solid $noir-bg-darker;
    padding-left: 1;
    /* Then render ░▒▓ as content */
}
```

### 6.5 Widget "Frames"

Container decorations that wrap content:

| Frame Style | Description |
|-------------|-------------|
| **File folder tab** | Top-left tab like manila folders |
| **Ticket stub** | Perforated edge on one side |
| **Polaroid** | Bottom caption space, thick bottom border |
| **Newspaper clipping** | Jagged/torn edge effect |
| **Police report** | "CONFIDENTIAL" stamp corner |
| **Typewriter** | Monospace with uneven ink |

### 6.6 Icon Sets (for status indicators)

| Status | Noir | Art Deco | Cyberpunk |
|--------|------|----------|-----------|
| Available | `○` | `◇` | `□` |
| Completed | `●` | `◆` | `■` |
| Locked | `🔒` | `⚿` | `🔒` |
| Warning | `⚡` | `⚠` | `△` |
| Error | `✗` | `✕` | `╳` |
| Info | `ℹ` | `ⅰ` | `◎` |

---

## 7. Theme Element Architecture

To support swappable elements, extend `ThemeConfig`:

```python
@dataclass(frozen=True)
class ThemeElements:
    """Swappable visual elements for a theme."""
    borders: BorderSet
    dividers: dict[str, str]  # "section", "heavy", "light"
    bullets: dict[str, str]   # "primary", "secondary", "decorative"
    gradients: dict[str, str] # "shadow", "light_spill", etc.
    frames: dict[str, str]    # "folder", "ticket", etc.
    icons: dict[str, str]     # status indicators
    ascii_art: dict[str, list[str]]  # splash screens, headers

@dataclass(frozen=True)
class ThemeConfig:
    name: str
    display_name: str
    css_path: Path
    aliases: dict[str, str]
    vocabulary: dict[str, str]
    narrative: NarrativeConfig
    elements: ThemeElements  # NEW
```

---

## 8. Theme Sandbox Concept

A **development sandbox** for prototyping elements before committing them to a theme.

### 8.1 Sandbox File Structure

```
src/unfamiliar/tui/themes/
├── sandbox/
│   ├── __init__.py
│   ├── elements_preview.py    # Widget to preview all elements
│   ├── borders_gallery.py     # All border styles side-by-side
│   ├── ascii_gallery.py       # ASCII art prototypes
│   ├── gradients_demo.py      # Gradient effects demo
│   └── test_elements.py       # Standalone element tests
└── film_noir/
    └── ...
```

### 8.2 Sandbox CLI Command

Add a dev command to launch the sandbox:

```bash
# Preview all border styles
unfamiliar theme-sandbox borders

# Preview specific element
unfamiliar theme-sandbox gradients

# Preview full element set for a theme
unfamiliar theme-sandbox preview film_noir

# Interactive element playground
unfamiliar theme-sandbox playground
```

### 8.3 Sandbox Screen Mockup

```
╭───────────────────────────────────────────────────────────────────╮
│ THEME ELEMENT SANDBOX                                    [q] quit │
├───────────────────────────────────────────────────────────────────┤
│                                                                   │
│  BORDERS                      DIVIDERS                           │
│  ┏━━━━━━━━━━━┓ Heavy          ───✦─── Decorative                │
│  ╔═══════════╗ Double         ═══◆═══ Formal                     │
│  ┌───────────┐ Light          ─────── Minimal                    │
│  ╭───────────╮ Rounded                                         │
│                                                                   │
│  GRADIENTS                    ICONS                              │
│  ░▒▓█ Shadow edge             ○ ● 🔒 ⚡ ✗ ℹ Noir                 │
│  █▓▒░ Light spill             ◇ ◆ ⚿ ⚠ ✕ ⅰ Art Deco             │
│  ▚▞▌▐ Noise/static            □ ■ 🔒 △ ╳ ◎ Cyberpunk            │
│                                                                   │
│  ASCII ART PREVIEW                                                │
│  ╲ ╳ ╱ ╲ ╳ ╱ ╲ ╳ ╱                                               │
│  ══╩═══╩═══╩═══╩══                                               │
│      ◇ ART DECO ◇                                                │
│                                                                   │
│  [1] Borders  [2] Dividers  [3] Gradients  [4] Art  [5] Icons    │
╰───────────────────────────────────────────────────────────────────╯
```

### 8.4 Element Testing Checklist

When adding new elements, verify:

- [ ] Renders correctly at 80 columns
- [ ] Renders correctly at 120+ columns
- [ ] Doesn't break line wrapping
- [ ] Works with light terminal backgrounds (or gracefully degrades)
- [ ] Screen reader compatible (has text fallback)
- [ ] Consistent with theme's `tone` description
- [ ] Documented in theme's element catalog

---

## 9. Future Theme Ideas

Quick reference for potential future themes:

| Theme | Tone | Border | Accent Colors | Vocabulary Source |
|-------|------|--------|---------------|-------------------|
| **Art Deco** | Elegant, geometric, 1920s luxury | Double `═` | Gold on navy | Architecture, jazz age |
| **Cyberpunk** | Neon, gritty, high-tech low-life | Light `─` | Cyan/magenta on black | Hacking, corporate dystopia |
| **Cozy Mystery** | Friendly, small-town, warm | Rounded `╭` | Warm browns, creams | Village life, baking |
| **Hard Sci-Fi** | Technical, precise, sterile | ASCII `-` | Green on black | Space, engineering |
| **Steampunk** | Victorian, brass, mechanical | Heavy `━` | Brass/copper tones | Clockwork, airships |
| **Spy Thriller** | Cold war, tension, bureaucracy | Light `─` | Red accents on gray | Intelligence, codenames |


## 10 Galleries

While there isn't one single "Art Station" for terminal apps yet, the community around **Textual** and **Rich** is incredibly creative. To see what people are pushing the boundaries of TUI (Terminal User Interface) design, here are the best places to look:

### 1. The Textualize Gallery

The creators of Textual maintain an official gallery that showcases functional and beautiful apps. It’s the best place to see how "Widgets" can be styled into a cohesive UI.

- **Where to look:** [Textualize.io Gallery](https://www.google.com/search?q=https://www.textualize.io/gallery/)
    
- **What to look for:** Check out **"Frogmouth"** (a Markdown viewer) for clean layout inspiration or **"Trogon"** for a modern command-line interface look.
    

### 2. The "Show and Tell" on GitHub

This is where the most experimental designs live. Developers often post screenshots of their custom dashboards, music players, and system monitors.

- **Where to look:** [Textual GitHub Discussions (Show and Tell)](https://github.com/Textualize/textual/discussions/categories/show-and-tell)
    
- **Why it's great:** You can see how people use CSS-like styling to create unique layouts, including "Art Deco" style borders and high-contrast "Noir" dashboards.
    

### 3. "Awesome TUI" Lists

There are curated lists of terminal applications that aren't limited to Python/Textual but show off what is possible with character-based graphics (like using Braille dots for smooth curves).

- **Where to look:** Search for **"Awesome TUI"** on GitHub.
    
- **Inspiration:** Look for apps like **`btop`** or **`glance`**. Even if they aren't built in Textual, you can replicate their visual language (the use of thin lines, heavy blocks, and geometric spacing) using Textual's CSS.
    

### 4. Terminal Art & ANSI Galleries

Since you mentioned **Film Noir** and **Art Deco**, you might find the best "artistic" inspiration in the ANSI art scene. These artists create full-screen illustrations using only terminal characters.

- **Where to look:** [Sixteencolors.net](https://sixteencolors.net/)
    
- **Application:** You can take a classic ANSI art piece and use it as a static background or a "splash screen" for your application to set that dark, moody Noir atmosphere.