Terminal UI Design System

---

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

Color System

Primary Palette

**Main Brand Color:**

**Warm Accent:**

Semantic Colors

**Backgrounds:**

**Text Colors:**

**Borders:**

**Status Colors:**

Syntax Highlighting Colors

**Code Syntax:**

**Command Prefix:**

**Code Elements:**

macOS Window Dots

**Terminal Window Controls:**

Color Usage Guidelines

**Primary Color (#cc7a60) Usage:**

**Fluorescent Green (#39ff14) Usage:**

**Green (#22c55e) Usage:**

**Blue (#3b82f6) Usage:**

Typography System

Font Families

**Primary Font Stack:**

--font-mono: "JetBrains Mono", "JetBrains Mono Fallback", 'Fira Code', 'Consolas', monospace;

**Sans-serif Fallback:**

--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

Font Size Scale

**Base Unit System:**

**Font Weights:**

**Line Heights:**

Typography Usage

**Headings:**

**Body Text:**

**Code/Command Text:**

Spacing System

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

**Spacing Scale:**

**Usage Guidelines:**

Border Radius System

**Radius Scale:**

**Usage:**

Shadow System

**Shadow Scale:**

**Usage:**

Component Specifications

Terminal Window Component

**Structure:**

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

**Window Dots:**

**Window Title:**

**Window Status:**

Navigation Bar

**Structure:**

<nav class="navbar">
  <div class="navbar-container">
    <div class="navbar-content">
      <!-- Logo, commands, actions -->
    </div>
  </div>
</nav>

**Styling:**

**Logo:**

**Navigation Commands:**

**Command Button Structure:**

<button class="nav-cmd">
  <span class="cmd-prefix">$</span>
  <span class="cmd-keyword">ai</span>
  <span class="cmd-flag">--search</span>
</button>

**Command Colors:**

Card Components

**Skill Card:**

**Category Card:**

**Mention Card:**

Button Components

**Primary Button (Active):**

**Secondary Button:**

**Icon Button:**

Input Components

**Search Input:**

**Text Input:**

Code Display Components

**Code Block:**

**Code Line:**

**Description Block (Comment Style):**

Grid Layouts

**Skills Grid:**

**Categories Grid:**

**Mentions Grid:**

Animation System

Transitions

**Default Transition:**

**Common Transitions:**

Keyframe Animations

**Blink Animation (Cursor):**

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

**Pulse Border Animation:**

@keyframes pulse-border {
  0%, 100% { border-color: rgba(204, 122, 96, 0.5); }
  50% { border-color: var(--ring); }
}

**Fade In Up Animation:**

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

Interactive States

**Hover States:**

**Active States:**

**Focus States:**

Background Patterns

Grid Pattern (Page Background)

background-image: 
  linear-gradient(rgba(0, 0, 0, 0.02) 1px, transparent 1px),
  linear-gradient(90deg, rgba(0, 0, 0, 0.02) 1px, transparent 1px);
background-size: 20px 20px;

Gradient Backgrounds

**Avatar Gradient:**

background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);

**Chart Gradient:**

linearGradient: #cc7a60 with opacity stops (0%: 0.6, 100%: 0)

Responsive Design

Breakpoints

**Mobile:** `< 640px`

**Tablet:** `640px - 1024px`

**Desktop:** `1024px - 1200px`

**Large Desktop:** `> 1200px`

Responsive Adjustments

**Navigation:**

**Hero Section:**

**Grids:**

**Typography:**

Implementation Guidelines

CSS Variable Usage

**Always use CSS variables** for:

**Example:**

.button {
  background: var(--bg-card);
  color: var(--foreground);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

Component Structure

**Terminal Window Pattern:**

1. Container with border and radius

2. Header with dots, title, status

3. Content area with padding

4. Consistent spacing throughout

**Command-Line Pattern:**

1. Prefix (`$`) in fluorescent green

2. Keyword in primary or blue

3. Flags/arguments in default color

4. Monospace font throughout

Color Application Rules

**Primary Color (#cc7a60):**

**Fluorescent Green (#39ff14):**

**Green (#22c55e):**

Typography Rules

**Always use monospace font** for:

**Font weight guidelines:**

Spacing Consistency

**Use spacing scale:**

Animation Best Practices

**Keep animations subtle:**

**Performance:**

Common Patterns

Terminal Window Card

<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 here -->
  </div>
</div>

Command Button

<button class="nav-cmd">
  <span class="cmd-prefix">$</span>
  <span class="cmd-keyword">command</span>
  <span class="cmd-flag">--flag</span>
</button>

Code Block Display

<div class="stats-code-block">
  <div class="code-line">
    <span class="keyword">const</span>
    <span class="variable-name">variable</span>
    <span class="operator">=</span>
    <span class="number">123</span>
    <span class="operator">;</span>
  </div>
  <div class="code-comment">
    <span class="comment-symbol">// </span>Comment text
  </div>
</div>

Description Block (Comment Style)

<div class="description-block">
  <div class="comment-start">/**</div>
  <div class="comment-text">
    <span class="comment-asterisk"> * </span>Description text
  </div>
  <div class="comment-end"> */</div>
</div>

Accessibility Considerations

**Color Contrast:**

**Focus States:**

**Keyboard Navigation:**

**Screen Readers:**

Dark Mode Implementation

The design system includes a complete dark mode implementation using `[data-theme="dark"]` attribute selector. Dark mode is fully integrated with smooth transitions and maintains all design principles.

Dark Mode Color System

**Primary Colors (Dark Mode):**

**Backgrounds (Dark Mode):**

**Text Colors (Dark Mode):**

**Borders (Dark Mode):**

**Syntax Highlighting (Dark Mode):**

**Shadows (Dark Mode):**

Dark Mode Background Pattern

Dark mode uses a subtle white grid pattern instead of black:

[data-theme="dark"] body {
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
}

Theme Toggle Implementation

**HTML Structure:**

<button class="theme-toggle-btn theme-toggle" title="切换主题" aria-label="切换主题">
  <svg class="icon-sun theme-icon"><!-- Sun icon --></svg>
  <svg class="icon-moon theme-icon" style="display: none;"><!-- Moon icon --></svg>
</button>

**JavaScript Implementation:**

**Key Features:**

Dark Mode Component Adaptations

**Navigation Bar:**

**Terminal Windows:**

**Skill Cards:**

**Category Cards:**

- Cyan: `#22d3ee` (dark) vs `#06b6d4` (light)

- Blue: `#60a5fa` (dark) vs `#3b82f6` (light)

- Purple: `#c084fc` (dark) vs `#a855f7` (light)

- Amber: `#fbbf24` (dark) vs `#f59e0b` (light)

**Charts:**

**FAB Button:**

Dark Mode Best Practices

**Color Contrast:**

**Transitions:**

**Implementation Pattern:**

/* Light mode (default) */
.component {
  background: var(--bg-card);
  color: var(--foreground);
}

/* Dark mode */
[data-theme="dark"] .component {
  background: var(--bg-card); /* Automatically uses dark value */
  color: var(--foreground); /* Automatically uses dark value */
}

**Maintains:**

Performance Optimization

**CSS Variables:**

**Animations:**

**Font Loading:**

Browser Support

**Modern Browsers:**

**Features Used:**

Design Tokens Summary

**Quick Reference:**

/* Colors - Light Mode */
Primary: #cc7a60
Fluorescent Green: #39ff14 (command prefix only)
Success: #22c55e
Blue: #3b82f6
Foreground: #111827
Border: #8b929e

/* Colors - Dark Mode */
Primary: #d99178
Foreground: #ededed
Background: #0a0a0a
Card: #111
Border: #606068
Blue: #60a5fa (brighter for contrast)

/* Spacing */
xs: 4px, sm: 8px, md: 16px, lg: 24px, xl: 32px, 2xl: 48px

/* Typography */
Font: JetBrains Mono
Sizes: 0.75rem - 3.75rem scale
Weights: 400, 500, 600, 700, 800

/* Radius */
xs: 2px, sm: 4px, md: 6px, lg: 8px, xl: 12px, 2xl: 16px

/* Shadows - Light Mode */
sm: 0 1px 2px rgba(0,0,0,0.05)
md: 0 4px 6px rgba(0,0,0,0.07)
lg: 0 10px 25px rgba(0,0,0,0.1)

/* Shadows - Dark Mode */
sm: 0 1px 2px rgba(0,0,0,0.3)
md: 0 4px 6px rgba(0,0,0,0.4)
lg: 0 10px 25px rgba(0,0,0,0.5)

Theme Toggle JavaScript Implementation

**Complete Implementation:**

(function() {
  const themeToggles = document.querySelectorAll('.theme-toggle');
  const html = document.documentElement;
  
  // Get initial theme from localStorage or system preference
  function getInitialTheme() {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      return savedTheme;
    }
    // Check system preference
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      return 'dark';
    }
    return 'light';
  }
  
  // Set theme and update icons
  function setTheme(theme) {
    if (theme === 'dark') {
      html.setAttribute('data-theme', 'dark');
      document.querySelectorAll('.icon-sun').forEach(icon => {
        icon.style.display = 'none';
      });
      document.querySelectorAll('.icon-moon').forEach(icon => {
        icon.style.display = 'block';
      });
    } else {
      html.removeAttribute('data-theme');
      document.querySelectorAll('.icon-sun').forEach(icon => {
        icon.style.display = 'block';
      });
      document.querySelectorAll('.icon-moon').forEach(icon => {
        icon.style.display = 'none';
      });
    }
    localStorage.setItem('theme', theme);
  }
  
  // Toggle theme
  function toggleTheme() {
    const currentTheme = html.getAttribute('data-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    setTheme(newTheme);
  }
  
  // Initialize
  const initialTheme = getInitialTheme();
  setTheme(initialTheme);
  
  // Add event listeners
  themeToggles.forEach(button => {
    button.addEventListener('click', toggleTheme);
  });
  
  // Listen to system theme changes (only if no manual preference)
  if (window.matchMedia) {
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    mediaQuery.addEventListener('change', (e) => {
      if (!localStorage.getItem('theme')) {
        setTheme(e.matches ? 'dark' : 'light');
      }
    });
  }
})();

**Key Features:**

Usage Examples

When implementing this design system:

1. **Start with CSS variables** - Import or define all color/spacing variables (including dark mode)

2. **Use terminal window pattern** - Wrap content in terminal-window component

3. **Apply monospace font** - Use JetBrains Mono for all UI text

4. **Follow spacing scale** - Use defined spacing values consistently

5. **Use semantic colors** - Apply colors based on meaning, not appearance

6. **Implement theme toggle** - Add theme toggle button and JavaScript

7. **Maintain consistency** - Reuse component patterns throughout

8. **Test responsiveness** - Ensure layouts work at all breakpoints

9. **Test both themes** - Verify light and dark modes work correctly

10. **Optimize animations** - Keep transitions smooth and performant

This design system creates a cohesive, developer-friendly interface that feels both modern and familiar to users comfortable with terminal interfaces. The complete dark mode implementation ensures the interface works beautifully in any lighting condition.