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

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

Styling:

• Position: sticky, top: 0

• Background: rgba(255, 255, 255, 0.8) with backdrop-filter: blur(8px)

• Border-bottom: 1px solid --border

• Height: 64px (desktop), 56px (mobile)

• Max width: 80rem (1280px), centered

Logo:

• Status indicator: Green dot (8px) + "ready" text

• Path prefix: ~/ in primary color (#cc7a60)

• Path name: Bold, foreground color

• Cursor blink: 2px width, primary color, animated

Navigation Commands:

• Display: Flex, gap --spacing-md

• Button style: Monospace font, small padding (6px 12px)

• Border: 1px solid --border

• Border radius: --radius-lg

• Active state: Primary border color with pulse animation

• Hover: Border color changes to primary with 50% opacity

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:

• Prefix ($): Fluorescent green (#39ff14)

• Keyword: Primary color (#cc7a60) or blue (#3b82f6)

• Flag: Default foreground color

Card Components

Skill Card:

• Background: --bg-card (#fff in light, #111 in dark)

• Border: 1px solid --border

• Border radius: --radius-xl (12px)

• Height: 100% with flex column layout

• Hover: Border changes to primary with 50% opacity, shadow increases (0 25px 50px -12px rgba(204, 122, 96, 0.1)), translateY(-4px)

• Active: translateY(0) scale(0.99)

• Transition: all 0.3s ease

• Line Numbers: Absolute positioned on left, 2rem width, subtle background

• Avatar: 24px × 24px, bordered, scales on hover

• Star Icon: 10px × 10px, warning color

• Like Button: SVG heart icon, changes color on hover

Category Card:

• Same base styling as skill card

• Color Themes: Cyan, Blue, Purple, Amber variants

• Folder Icon: SVG icon, color varies by theme, scales on hover

• Category Dot: Small indicator dot, changes on hover

• Arrow Icon: Appears on hover, positioned bottom-right

• JSON Display: Key-value pairs with theme-colored hover effects

• Command Line: Footer with command-style text

Mention Card:

• Same base styling

• Blockquote styling with quotation marks

• Source attribution with border-top separator

Button Components

Primary Button (Active):

• Background: --primary (#cc7a60)

• Color: --primary-foreground (#fff)

• Border: 1px solid --primary

• Border radius: --radius-lg

• Padding: 6px 12px (small) or --spacing-md --spacing-lg (medium)

• Font: Monospace, --text-xs or --text-sm

Secondary Button:

• Background: --bg-card

• Border: 1px solid --border

• Color: --foreground

• Hover: Border color changes to primary with 50% opacity

• Active: transform: scale(0.95)

Icon Button:

• Square or rounded

• Padding: 6px 12px

• Icon size: 14px or 16px

• Same hover/active states as secondary button

Input Components

Search Input:

• Background: Transparent

• Border: None

• Font: Monospace

• Placeholder: --text-muted color

• Focus: No visible border (minimal design)

Text Input:

• Background: --bg-card

• Border: 1px solid --border

• Border radius: --radius-sm or --radius-md

• Padding: --spacing-sm

• Font: Monospace

Code Display Components

Code Block:

• Background: rgba(255, 255, 255, 0.5) with backdrop blur

• Border: 1px solid --border

• Border radius: --radius-lg

• Padding: --spacing-md

• Font: Monospace

• Line height: --leading-relaxed

Code Line:

• Display: Flex, align baseline

• Gap: --spacing-sm

• Syntax colors applied to different elements

Description Block (Comment Style):

• Border-left: 4px solid rgba(204, 122, 96, 0.5)

• Background: rgba(204, 122, 96, 0.05)

• Padding-left: --spacing-md

• Border-radius: Right side only (--radius-lg)

• Font: Monospace

Grid Layouts

Skills Grid:

• Display: Grid

• Columns: repeat(3, 1fr) (desktop), repeat(2, 1fr) (tablet), 1fr (mobile)

• Gap: --spacing-lg (24px)

Categories Grid:

• Display: Grid

• Columns: repeat(4, 1fr) (desktop), repeat(2, 1fr) (tablet), 1fr (mobile)

• Gap: --spacing-lg

Mentions Grid:

• Display: Grid

• Columns: 1fr 1fr (desktop), 1fr (mobile)

• Gap: --spacing-lg

Animation System

Transitions

Default Transition:

• Duration: 0.15s or 0.2s

• Timing: cubic-bezier(.4,0,.2,1) (ease-in-out)

• Properties: all or specific properties

Common Transitions:

• Hover states: all 0.2s ease

• Active states: transform 0.2s ease

• Color changes: color 0.2s ease or background-color 0.2s ease

Keyframe Animations

Blink Animation (Cursor):

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

• Duration: 1s

• Iteration: infinite

• Used for: Cursor blink effect

Pulse Border Animation:

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

• Duration: 2s

• Timing: ease-in-out

• Iteration: infinite

• Used for: Active navigation items

Fade In Up Animation:

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

• Duration: 0.5s

• Timing: ease

• Used for: Card entrance animations

• Staggered delays: 0.1s increments for grid items

Interactive States

Hover States:

• Buttons: Border color changes, background lightens

• Cards: Border changes to primary, shadow increases, slight lift

• Links: Color changes to primary

• Scale: No scaling on hover (maintains stability)

Active States:

• Buttons: transform: scale(0.95) - subtle press effect

• Duration: 0.2s

Focus States:

• Outline: 2px solid --ring with 2px offset

• Used for: Accessibility, keyboard navigation

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;

• Very subtle grid (2% opacity black)

• 20px × 20px grid cells

• Creates texture without distraction

• Applied to body background

Gradient Backgrounds

Avatar Gradient:

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

• Warm peach gradient

• 135-degree angle

• Used for: User avatars

Chart Gradient:

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

• Primary color gradient

• Used for: Area charts, data visualization

Responsive Design

Breakpoints

Mobile: < 640px

• Single column layouts

• Reduced font sizes

• Simplified navigation

• Stacked grids

Tablet: 640px - 1024px

• Two column layouts

• Medium font sizes

• Collapsed navigation menu

Desktop: 1024px - 1200px

• Three column layouts

• Full navigation visible

• Standard spacing

Large Desktop: > 1200px

• Four column layouts (where applicable)

• Maximum content width: 1400px

• Generous spacing

Responsive Adjustments

Navigation:

• Desktop (>1024px): Full command menu visible

• Tablet/Mobile: Hamburger menu, simplified layout

• Status indicator: Hidden on mobile, visible on tablet+

Hero Section:

• Desktop: Two column grid (text + chart)

• Mobile: Single column, stacked

Grids:

• Skills: 3 → 2 → 1 columns

• Categories: 4 → 2 → 1 columns

• Mentions: 2 → 1 columns

Typography:

• Hero title: 3.5rem → 2.5rem (mobile)

• Section titles: 2.5rem → 2rem (mobile)

• Body text: Maintains readability

Implementation Guidelines

CSS Variable Usage

Always use CSS variables for:

• Colors (never hardcode hex values)

• Spacing (use spacing scale)

• Typography (use text size scale)

• Border radius (use radius scale)

• Shadows (use shadow scale)

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

• Use for: Active states, highlights, keywords, prompts

• Avoid: Large background areas (too intense)

• Opacity variants: Use rgba(204, 122, 96, 0.5) for borders, rgba(204, 122, 96, 0.05) for backgrounds

Fluorescent Green (#39ff14):

• Use ONLY for: Command prefix ($)

• Never use for: Other text, backgrounds, or accents

Green (#22c55e):

• Use for: Success states, positive indicators, string literals

• Avoid: Primary actions (use primary color instead)

Typography Rules

Always use monospace font for:

• Navigation elements

• Buttons

• Code blocks

• Command-line interfaces

• Window titles

• Status text

Font weight guidelines:

• Body text: 400 (normal)

• Labels/keywords: 600 (semibold)

• Headings: 700 (bold)

• Hero text: 700-800 (bold-extrabold)

Spacing Consistency

Use spacing scale:

• Never use arbitrary values (e.g., 13px, 27px)

• Stick to: 4px, 8px, 16px, 24px, 32px, 48px

• For gaps between related items: --spacing-sm to --spacing-md

• For section separation: --spacing-xl to --spacing-2xl

Animation Best Practices

Keep animations subtle:

• Duration: 0.15s - 0.3s maximum

• Easing: Use provided cubic-bezier curves

• Avoid: Bouncy animations, long durations

• Prefer: Fade, translate, scale (small amounts)

Performance:

• Use transform and opacity for animations (GPU accelerated)

• Avoid animating width, height, margin, padding

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:

• Primary text (#111827) on white: WCAG AAA compliant

• Secondary text (#666666) on white: WCAG AA compliant

• Primary color (#cc7a60) on white: WCAG AA compliant for large text

Focus States:

• All interactive elements have visible focus indicators

• Focus ring: 2px solid primary color with 2px offset

Keyboard Navigation:

• All interactive elements are keyboard accessible

• Tab order follows visual hierarchy

• Enter/Space activate buttons

Screen Readers:

• Semantic HTML structure

• ARIA labels where needed

• Status indicators use appropriate roles

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

• --primary: #d99178 - Lighter terracotta for better contrast on dark backgrounds

• --primary-foreground: #0a0a0a - Dark text on primary backgrounds

• --primary-dark: #c57f66 - Darker shade for hover states

• --primary-light: #e5a890 - Lighter shade for subtle accents

• --ring: #d99178 - Focus ring color (lighter primary)

Backgrounds (Dark Mode):

• --background: #0a0a0a - Deep black for main backgrounds

• --bg-main: #0a0a0a - Dark background with subtle white grid pattern

• --bg-card: #111 - Slightly lighter black for card components

• --bg-code: #18181b - Dark gray for code blocks and window headers

• --secondary: #1a1a1a - Dark gray for secondary backgrounds

• --muted: #262626 - Muted dark gray for subtle backgrounds

Text Colors (Dark Mode):

• --foreground: #ededed - Light gray for primary text

• --text-primary: #ededed - Primary text color

• --text-secondary: #a3a3a3 - Medium gray for secondary text

• --text-muted: #a3a3a3 - Muted gray for less important text

• --muted-foreground: #a3a3a3 - Foreground on muted backgrounds

Borders (Dark Mode):

• --border: #606068 - Lighter gray for visibility on dark backgrounds

• --border-light: #27272a - Subtle dark gray for dividers

Syntax Highlighting (Dark Mode):

• --syntax-keyword: #d99178 - Lighter primary for keywords

• --syntax-string: #22c55e - Green (same as light mode)

• --syntax-number: #d99178 - Lighter primary for numbers

• --syntax-comment: #6a9955 - Muted green (same as light mode)

• Blue keywords: #60a5fa (blue-400) - Brighter blue for better contrast

• Purple keywords: #c084fc (purple-400) - Brighter purple for better contrast

Shadows (Dark Mode):

• --shadow-sm: 0 1px 2px rgba(0,0,0,0.3) - Stronger shadows for depth

• --shadow-md: 0 4px 6px rgba(0,0,0,0.4) - Medium shadows

• --shadow-lg: 0 10px 25px rgba(0,0,0,0.5) - Large shadows

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:

• Uses localStorage to persist theme preference

• Detects system preference on first load

• Smoothly transitions between themes

• Updates icon visibility (sun/moon)

• Listens to system theme changes (when no manual preference set)

Key Features:

• Automatic system preference detection

• Manual override with localStorage persistence

• Smooth CSS transitions (0.2s ease-in-out)

• Icon state management (sun for light, moon for dark)

Dark Mode Component Adaptations

Navigation Bar:

• Background: rgba(10, 10, 10, 0.8) with backdrop blur

• Status indicator: Darker background with adjusted border

Terminal Windows:

• Card background: #111 (slightly lighter than main background)

• Window headers: rgba(38, 38, 38, 0.3) for subtle contrast

• All borders use darker mode colors

Skill Cards:

• Line numbers background: rgba(38, 38, 38, 0.2)

• Footer background: rgba(38, 38, 38, 0.2)

• Hover effects maintain same behavior with adjusted colors

Category Cards:

• Each category has theme-specific hover colors:
  • 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:

• Grid lines: #27272a with 0.5 opacity

• Chart container: rgba(17, 17, 17, 0.3)

• All text colors adapt to dark mode

FAB Button:

• Light mode: Dark background #1a1a1a with white icon

• Dark mode: White background with dark icon (inverted)

Dark Mode Best Practices

Color Contrast:

• All text maintains WCAG AA compliance in dark mode

• Primary color is lightened for better visibility

• Borders are lighter for clear definition

Transitions:

• All color changes use transition: color 0.2s ease-in-out

• Background changes use transition: background-color 0.2s ease-in-out

• Smooth theme switching without jarring changes

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:

• Same spacing system

• Same typography scale

• Same component structure

• Same animation timing

• Enhanced shadows for depth perception

Performance Optimization

CSS Variables:

• All colors/spacing use CSS variables for easy theming

• Variables defined in :root for global access

Animations:

• Use transform and opacity (GPU accelerated)

• Avoid layout-triggering properties

• Keep durations short (0.15s - 0.3s)

Font Loading:

• Preconnect to Google Fonts

• Use font-display: swap for better performance

• Provide fallback fonts in stack

Browser Support

Modern Browsers:

• Chrome/Edge: Full support

• Firefox: Full support

• Safari: Full support (with -webkit- prefixes for backdrop-filter)

Features Used:

• CSS Grid: Full support in modern browsers

• CSS Variables: Full support

• Backdrop Filter: Requires -webkit- prefix for Safari

• Flexbox: Full support

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:

• Persists theme preference in localStorage

• Detects system preference on first load

• Smoothly transitions between themes

• Updates icon visibility automatically

• Listens to system theme changes (when no manual override)

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.