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

filename.ext ready

``` **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 ``` **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 ``` **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

filename.ext ready

``` ### Command Button ```html ``` ### Code Block Display ```html

const variable = 123 ;

// Comment text

``` ### Description Block (Comment Style) ```html

/**

* Description text

``` ## 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 ``` **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.

Terminal UI Design System

Install this skill

Comments