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:

--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:

--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:

<div class="terminal-window">
  <div class="window-header">
    <div class="window-dots">
      <span