terminal-ui-design-system

# Terminal UI Design System

A comprehensive design system for creating terminal-inspired user interfaces with macOS-style window decorations, monospace typography, and a warm, developer-friendly color palette. This design system is optimized for developer tools, code marketplaces, technical documentation, and any interface that benefits from a command-line aesthetic.

## Design Philosophy

**Core Principles:**
- **Terminal Aesthetic**: Mimics macOS terminal windows with colored dots, monospace fonts, and command-line syntax
- **Developer-First**: Uses syntax highlighting colors, code-like structures, and terminal metaphors
- **Warm & Approachable**: Warm terracotta primary color (#cc7a60) creates a friendly, non-intimidating feel
- **High Contrast**: Clear visual hierarchy with distinct text colors and backgrounds
- **Functional Beauty**: Every design element serves a purpose while maintaining visual appeal

## Color System

### Primary Palette

**Main Brand Color:**
- `--primary: #cc7a60` - Warm terracotta/orange-brown, used for primary actions, accents, and highlights
- `--primary-foreground: #fff` - White text on primary backgrounds
- `--primary-dark: #b56850` - Darker shade for hover states
- `--primary-light: #d8907a` - Lighter shade for subtle accents
- `--ring: #cc7a60` - Focus ring color (same as primary)

**Warm Accent:**
- `--warm-red: #c85a3f` - Used for code block borders and warm accents

### Semantic Colors

**Backgrounds:**
- `--background: #fff` - Pure white for main backgrounds
- `--bg-main: #f8f8f8` - Light gray for page background (with subtle grid pattern)
- `--bg-card: #fff` - White for card components
- `--bg-code: #fafafa` - Very light gray for code blocks and window headers
- `--secondary: #f9fafb` - Light gray for secondary backgrounds
- `--muted: #f3f4f6` - Muted gray for subtle backgrounds

**Text Colors:**
- `--foreground: #111827` - Near-black for primary text (excellent readability)
- `--text-prim...