| 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:
- 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">
</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">
</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:
- Container with border and radius
- Header with dots, title, status
- Content area with padding
- Consistent spacing throughout
Command-Line Pattern:
- Prefix (
$) in fluorescent green
- Keyword in primary or blue
- Flags/arguments in default color
- 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">
</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"></svg>
<svg class="icon-moon theme-icon" style="display: none;"></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:
.component {
background: var(--bg-card);
color: var(--foreground);
}
[data-theme="dark"] .component {
background: var(--bg-card);
color: var(--foreground);
}
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:
Primary: #cc7a60
Fluorescent Green: #39ff14 (command prefix only)
Success: #22c55e
Blue: #3b82f6
Foreground: #111827
Border: #8b929e
Primary: #d99178
Foreground: #ededed
Background: #0a0a0a
Card: #111
Border: #606068
Blue: #60a5fa (brighter for contrast)
xs: 4px, sm: 8px, md: 16px, lg: 24px, xl: 32px, 2xl: 48px
Font: JetBrains Mono
Sizes: 0.75rem - 3.75rem scale
Weights: 400, 500, 600, 700, 800
xs: 2px, sm: 4px, md: 6px, lg: 8px, xl: 12px, 2xl: 16px
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)
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;
function getInitialTheme() {
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
return savedTheme;
}
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
return 'dark';
}
return 'light';
}
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);
}
function toggleTheme() {
const currentTheme = html.getAttribute('data-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
setTheme(newTheme);
}
const initialTheme = getInitialTheme();
setTheme(initialTheme);
themeToggles.forEach(button => {
button.addEventListener('click', toggleTheme);
});
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:
- Start with CSS variables - Import or define all color/spacing variables (including dark mode)
- Use terminal window pattern - Wrap content in terminal-window component
- Apply monospace font - Use JetBrains Mono for all UI text
- Follow spacing scale - Use defined spacing values consistently
- Use semantic colors - Apply colors based on meaning, not appearance
- Implement theme toggle - Add theme toggle button and JavaScript
- Maintain consistency - Reuse component patterns throughout
- Test responsiveness - Ensure layouts work at all breakpoints
- Test both themes - Verify light and dark modes work correctly
- 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.
