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:** ```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`, `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:** ```html <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):** ```css @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } ``` - Duration: `1s` - Iteration: `infinite` - Used for: Cursor blink effect **Pulse Border Animation:** ```css @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:** ```css @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) ```css 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:** ```css background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); ``` - Warm peach gradient - 135-degree angle - Used for: User avatars **Chart Gradient:** ```css 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:** ```css .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 ```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 here --> </div> </div> ``` ### Command Button ```html <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 ```html <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) ```html <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: ```css [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:** ```html <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:** ```css /* 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:** ```css /* 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:** ```javascript (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.