terminal-ui-website-design

---
name: terminal-ui-design-system
description: Create terminal-inspired UI interfaces with macOS-style window decorations, monospace typography, and a warm color palette. Use this skill when building developer tools, code marketplaces, technical documentation sites, or any interface that benefits from a terminal/command-line aesthetic. Provides complete design system specifications including color palette, typography, spacing, components, and CSS implementation details.
---

# 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-primary: #111827` - Primary text color
- `--text-secondary: #666666` - Medium gray for secondary text
- `--text-muted: #5b6370` - Muted gray for less important text
- `--muted-foreground: #5b6370` - Foreground on muted backgrounds

**Borders:**
- `--border: #8b929e` - Medium gray for main borders
- `--border-light: #e5e7eb` - Light gray for subtle dividers
- `--input: #8b929e` - Input border color

**Status Colors:**
- `--success: #22c55e` - Green for success states
- `--warning: #f59e0b` - Amber for warnings
- `--danger: #ef4444` - Red for errors/destructive actions
- `--accent: #f59e0b` - Amber accent color

### Syntax Highlighting Colors

**Code Syntax:**
- `--syntax-keyword: #cc7a60` - Primary color for keywords (const, export, etc.)
- `--syntax-string: #22c55e` - Green for strings
- `--syntax-number: #cc7a60` - Primary color for numbers
- `--syntax-comment: #6a9955` - Muted green for comments
- `--syntax-function: #dcdcaa` - Light yellow for function names

**Command Prefix:**
- Command prefix (`

  
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    
    

    
    
    
    
    
  
  


  
    ) uses fluorescent green: `#39ff14` - Creates terminal-like appearance

**Code Elements:**
- `--text-comment: #6a9955` - Comment text color

### macOS Window Dots

**Terminal Window Controls:**
- `--dot-red: #ff5f57` - Close button (macOS red)
- `--dot-yellow: #febc2e` - Minimize button (macOS yellow)
- `--dot-green: #28c840` - Maximize button (macOS green)

### Color Usage Guidelines

**Primary Color (#cc7a60) Usage:**
- Command keywords in navigation
- Prompt symbols (`>`)
- Active states and highlights
- Focus rings
- Hover borders
- Primary buttons when active
- Chart lines and data visualization

**Fluorescent Green (#39ff14) Usage:**
- Command prefix (`

  
    
    
    
    
    
    
    
    
    
    
    
    

    
    
    
    

    
    
    
    
    
  
  


  
    ) - creates authentic terminal feel
- Only used for dollar signs, never for other elements

**Green (#22c55e) Usage:**
- Success indicators
- Status dots (online/ready)
- String literals in code
- Positive actions

**Blue (#3b82f6) Usage:**
- Command keywords (cd, watch, man, api)
- Code keywords (const, let, var)
- Links and interactive elements

## Typography System

### Font Families

**Primary Font Stack:**
```css
--font-mono: "JetBrains Mono", "JetBrains Mono Fallback", 'Fira Code', 'Consolas', monospace;
```
- **Primary**: JetBrains Mono (400-800 weights)
- **Fallbacks**: Fira Code, Consolas, system monospace
- Used for: All UI text, navigation, buttons, code blocks

**Sans-serif Fallback:**
```css
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
```
- Used as fallback only, monospace is preferred

### Font Size Scale

**Base Unit System:**
- `--text-xs: 0.75rem` (12px) - Small labels, hints, window status
- `--text-sm: 0.875rem` (14px) - Secondary text, descriptions
- `--text-base: 1rem` (16px) - Body text, default size
- `--text-lg: 1.125rem` (18px) - Slightly emphasized text
- `--text-xl: 1.25rem` (20px) - Subheadings
- `--text-2xl: 1.5rem` (24px) - Section titles
- `--text-3xl: 1.875rem` (30px) - Large numbers, stats
- `--text-4xl: 2.25rem` (36px) - Hero numbers
- `--text-5xl: 3rem` (48px) - Large headings
- `--text-6xl: 3.75rem` (60px) - Extra large headings

**Font Weights:**
- `--font-weight-normal: 400` - Body text
- `--font-weight-medium: 500` - Medium emphasis
- `--font-weight-semibold: 600` - Semibold (keywords, labels)
- `--font-weight-bold: 700` - Bold (headings, important text)
- `--font-weight-extrabold: 800` - Extra bold (hero text)

**Line Heights:**
- `--leading-tight: 1.25` - Tight spacing for headings
- `--leading-relaxed: 1.625` - Relaxed spacing for body text

### Typography Usage

**Headings:**
- Hero titles: 3.5rem, weight 700, line-height 1.1
- Section titles: 2.5rem, weight 700
- FAQ titles: 2rem, weight 700

**Body Text:**
- Default: 1rem, weight 400, line-height 1.5
- Secondary: 0.875rem, color `--text-secondary`
- Muted: 0.75rem, color `--text-muted`

**Code/Command Text:**
- Always use monospace font
- Command prefix: fluorescent green (#39ff14)
- Keywords: primary color (#cc7a60) or blue (#3b82f6)
- Flags/arguments: default foreground color

## Spacing System

**Base Unit:** `--spacing: 0.25rem` (4px)

**Spacing Scale:**
- `--spacing-xs: 4px` (0.25rem) - Tight spacing, icon padding
- `--spacing-sm: 8px` (0.5rem) - Small gaps, button padding
- `--spacing-md: 16px` (1rem) - Standard spacing, card padding
- `--spacing-lg: 24px` (1.5rem) - Large gaps, section spacing
- `--spacing-xl: 32px` (2rem) - Extra large gaps, major sections
- `--spacing-2xl: 48px` (3rem) - Maximum spacing, page sections

**Usage Guidelines:**
- Use consistent spacing multiples (4px base)
- Card padding: `--spacing-md` to `--spacing-lg`
- Section margins: `--spacing-xl` to `--spacing-2xl`
- Button padding: `--spacing-sm` to `--spacing-md`
- Gap between related elements: `--spacing-sm` to `--spacing-md`

## Border Radius System

**Radius Scale:**
- `--radius-xs: 2px` (0.125rem) - Minimal rounding
- `--radius-sm: 4px` (0.25rem) - Small elements
- `--radius-md: 6px` (0.375rem) - Buttons, inputs
- `--radius-lg: 8px` (0.5rem) - Cards, windows (most common)
- `--radius-xl: 12px` (0.75rem) - Large cards
- `--radius-2xl: 16px` (1rem) - Extra large elements
- `--radius: 10px` (0.625rem) - Default radius

**Usage:**
- Terminal windows: `--radius-lg` (8px)
- Buttons: `--radius-lg` (8px)
- Cards: `--radius-lg` (8px)
- Inputs: `--radius-md` (6px)
- Avatar: `9999px` (fully rounded)

## Shadow System

**Shadow Scale:**
- `--shadow-sm: 0 1px 2px rgba(0,0,0,0.05)` - Subtle elevation
- `--shadow-md: 0 4px 6px rgba(0,0,0,0.07)` - Medium elevation (cards on hover)
- `--shadow-lg: 0 10px 25px rgba(0,0,0,0.1)` - Large elevation (floating buttons)

**Usage:**
- Default cards: `--shadow-sm`
- Hover states: `--shadow-md`
- Floating elements: `--shadow-lg`
- Primary-colored shadows: `rgba(204, 122, 96, 0.1)` for primary-themed elements

## Component Specifications

### Terminal Window Component

**Structure:**
```html
<div class="terminal-window">
  <div class="window-header">
    <div class="window-dots">
      <span class="dot red"></span>
      <span class="dot yellow"></span>
      <span class="dot green"></span>
    </div>
    <span class="window-title">filename.ext</span>
    <span class="window-status">ready</span>
  </div>
  <div class="window-content">
    <!-- Content -->
  </div>
</div>
```

**Styling:**
- Background: `--bg-card` (#fff)
- Border: `1px solid --border` (#8b929e)
- Border radius: `--radius-lg` (8px)
- Box shadow: `--shadow-sm`
- Header background: `--bg-code` (#fafafa)
- Header border-bottom: `1px solid --border-light` (#e5e7eb)
- Header padding: `--spacing-sm --spacing-md` (8px 16px)
- Content padding: `--spacing-lg` (24px)

**Window Dots:**
- Size: `12px × 12px`
- Gap: `6px`
- Colors: Red (#ff5f57), Yellow (#febc2e), Green (#28c840)
- Fully rounded (border-radius: 50%)

**Window Title:**
- Font size: `0.85rem`
- Color: `--text-secondary` (#666666)
- Font: Monospace

**Window Status:**
- Font size: `0.75rem`
- Color: `--text-muted` (#5b6370)
- Position: Right side of header

### Navigation Bar

**Structure:**
```html
<nav class="navbar">
  <div class="navbar-container">
    <div class="navbar-content">
      <!-- Logo, commands, actions -->
    </div>
  </div>
</nav>
```

**Styling:**
- Position: `sticky`

... (truncated)