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

Converted and distributed by TomeVault — claim your Tome and manage your conversions.