| 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. Use when this capability is needed. |
| metadata | {"author":"demerzels-lab"} |
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,)
lg: (,,,)
sm: (,,,)
md: (,,,)
lg: (,,,)
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';
});
.().( {
icon.. = ;
});
} {
html.();
.().( {
icon.. = ;
});
.().( {
icon.. = ;
});
}
.(, theme);
}
() {
currentTheme = html.();
newTheme = currentTheme === ? : ;
(newTheme);
}
initialTheme = ();
(initialTheme);
themeToggles.( {
button.(, toggleTheme);
});
(.) {
mediaQuery = .();
mediaQuery.(, {
(!.()) {
(e. ? : );
}
});
}
})();
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.
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
