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
• INLINECODE1 - White text on primary backgrounds
• INLINECODE2 - Darker shade for hover states
• INLINECODE3 - Lighter shade for subtle accents
• INLINECODE4 - 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
• INLINECODE7 - Light gray for page background (with subtle grid pattern)
• INLINECODE8 - White for card components
• INLINECODE9 - Very light gray for code blocks and window headers
• INLINECODE10 - Light gray for secondary backgrounds
• INLINECODE11 - Muted gray for subtle backgrounds

Text Colors:

• - --foreground: #111827 - Near-black for primary text (excellent readability)
• INLINECODE13 - Primary text color
• INLINECODE14 - Medium gray for secondary text
• INLINECODE15 - Muted gray for less important text
• INLINECODE16 - Foreground on muted backgrounds

Borders:

• - --border: #8b929e - Medium gray for main borders
• INLINECODE18 - Light gray for subtle dividers
• INLINECODE19 - Input border color

Status Colors:

• - --success: #22c55e - Green for success states
• INLINECODE21 - Amber for warnings
• INLINECODE22 - Red for errors/destructive actions
• INLINECODE23 - Amber accent color

Syntax Highlighting Colors

Code Syntax:

• - --syntax-keyword: #cc7a60 - Primary color for keywords (const, export, etc.)
• INLINECODE25 - Green for strings
• INLINECODE26 - Primary color for numbers
• INLINECODE27 - Muted green for comments
• INLINECODE28 - 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)
• INLINECODE33 - Minimize button (macOS yellow)
• INLINECODE34 - 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
• INLINECODE38 (14px) - Secondary text, descriptions
• INLINECODE39 (16px) - Body text, default size
• INLINECODE40 (18px) - Slightly emphasized text
• INLINECODE41 (20px) - Subheadings
• INLINECODE42 (24px) - Section titles
• INLINECODE43 (30px) - Large numbers, stats
• INLINECODE44 (36px) - Hero numbers
• INLINECODE45 (48px) - Large headings
• INLINECODE46 (60px) - Extra large headings

Font Weights:

• - --font-weight-normal: 400 - Body text
• INLINECODE48 - Medium emphasis
• INLINECODE49 - Semibold (keywords, labels)
• INLINECODE50 - Bold (headings, important text)
• INLINECODE51 - Extra bold (hero text)

Line Heights:

• - --leading-tight: 1.25 - Tight spacing for headings
• INLINECODE53 - 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 INLINECODE54
• Muted: 0.75rem, color INLINECODE55

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
• INLINECODE58 (0.5rem) - Small gaps, button padding
• INLINECODE59 (1rem) - Standard spacing, card padding
• INLINECODE60 (1.5rem) - Large gaps, section spacing
• INLINECODE61 (2rem) - Extra large gaps, major sections
• INLINECODE62 (3rem) - Maximum spacing, page sections

Usage Guidelines:

• - Use consistent spacing multiples (4px base)
• Card padding: --spacing-md to INLINECODE64
• Section margins: --spacing-xl to INLINECODE66
• Button padding: --spacing-sm to INLINECODE68
• Gap between related elements: --spacing-sm to INLINECODE70

Border Radius System

Radius Scale:

• - --radius-xs: 2px (0.125rem) - Minimal rounding
• INLINECODE72 (0.25rem) - Small elements
• INLINECODE73 (0.375rem) - Buttons, inputs
• INLINECODE74 (0.5rem) - Cards, windows (most common)
• INLINECODE75 (0.75rem) - Large cards
• INLINECODE76 (1rem) - Extra large elements
• INLINECODE77 (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
• INLINECODE84 - Medium elevation (cards on hover)
• INLINECODE85 - Large elevation (floating buttons)

Usage:

• - Default cards: INLINECODE86
• Hover states: INLINECODE87
• Floating elements: INLINECODE88
• Primary-colored shadows: rgba(204, 122, 96, 0.1) for primary-themed elements

Component Specifications

Terminal Window Component

Structure:
CODEBLOCK2

Styling:

• - Background: --bg-card (#fff)
• Border: 1px solid --border (#8b929e)
• Border radius: --radius-lg (8px)
• Box shadow: INLINECODE93
• 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: INLINECODE98
• Gap: INLINECODE99
• Colors: Red (#ff5f57), Yellow (#febc2e), Green (#28c840)
• Fully rounded (border-radius: 50%)

Window Title:

• - Font size: INLINECODE100
• Color: --text-secondary (#666666)
• Font: Monospace

Window Status:

• - Font size: INLINECODE102
• Color: --text-muted (#5b6370)
• Position: Right side of header

Navigation Bar

Structure:
CODEBLOCK3

Styling:

• - Position: sticky, INLINECODE105
• Background: rgba(255, 255, 255, 0.8) with INLINECODE107
• Border-bottom: INLINECODE108
• 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 INLINECODE113
• Button style: Monospace font, small padding (6px 12px)
• Border: INLINECODE114
• Border radius: INLINECODE115
• Active state: Primary border color with pulse animation
• Hover: Border color changes to primary with 50% opacity

Command Button Structure:
CODEBLOCK4

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: INLINECODE118
• 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)), INLINECODE122
• Active: INLINECODE123
• Transition: INLINECODE124
• 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: INLINECODE128
• Border radius: INLINECODE129
• Padding: 6px 12px (small) or --spacing-md --spacing-lg (medium)
• Font: Monospace, --text-xs or INLINECODE133

Secondary Button:

• - Background: INLINECODE134
• Border: INLINECODE135
• Color: INLINECODE136
• Hover: Border color changes to primary with 50% opacity
• Active: INLINECODE137

Icon Button:

• - Square or rounded
• Padding: INLINECODE138
• Icon size: 14px or INLINECODE140
• 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: INLINECODE142
• Border: INLINECODE143
• Border radius: --radius-sm or INLINECODE145
• Padding: INLINECODE146
• Font: Monospace

Code Display Components

Code Block:

• - Background: rgba(255, 255, 255, 0.5) with backdrop blur
• Border: INLINECODE148
• Border radius: INLINECODE149
• Padding: INLINECODE150
• Font: Monospace
• Line height: INLINECODE151

Code Line:

• - Display: Flex, align baseline
• Gap: INLINECODE152
• Syntax colors applied to different elements

Description Block (Comment Style):

• - Border-left: INLINECODE153
• Background: INLINECODE154
• Padding-left: INLINECODE155
• 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: INLINECODE164

Mentions Grid:

• - Display: Grid
• Columns: 1fr 1fr (desktop), 1fr (mobile)
• Gap: INLINECODE167

Animation System

Transitions

Default Transition:

• - Duration: 0.15s or INLINECODE169
• Timing: cubic-bezier(.4,0,.2,1) (ease-in-out)
• Properties: all or specific properties

Common Transitions:

• - Hover states: INLINECODE172
• Active states: INLINECODE173
• Color changes: color 0.2s ease or INLINECODE175

Keyframe Animations

Blink Animation (Cursor):

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

• - Duration: INLINECODE176
• Iteration: INLINECODE177
• 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: INLINECODE178
• Timing: INLINECODE179
• Iteration: INLINECODE180
• Used for: Active navigation items

Fade In Up Animation:

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

• - Duration: INLINECODE181
• Timing: INLINECODE182
• 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: INLINECODE184

Focus States:

• - Outline: 2px solid --ring with 2px offset
• Used for: Accessibility, keyboard navigation

Background Patterns

Grid Pattern (Page Background)

CODEBLOCK8

• - 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: INLINECODE192
• 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:
CODEBLOCK11

Component Structure

Terminal Window Pattern:

1. 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. 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 INLINECODE200
• For section separation: --spacing-xl to INLINECODE202

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, INLINECODE208

Common Patterns

Terminal Window Card

CODEBLOCK12

Command Button

CODEBLOCK13

Code Block Display

CODEBLOCK14

Description Block (Comment Style)

CODEBLOCK15

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
• INLINECODE211 - Dark text on primary backgrounds
• INLINECODE212 - Darker shade for hover states
• INLINECODE213 - Lighter shade for subtle accents
• INLINECODE214 - Focus ring color (lighter primary)

Backgrounds (Dark Mode):

• - --background: #0a0a0a - Deep black for main backgrounds
• INLINECODE216 - Dark background with subtle white grid pattern
• INLINECODE217 - Slightly lighter black for card components
• INLINECODE218 - Dark gray for code blocks and window headers
• INLINECODE219 - Dark gray for secondary backgrounds
• INLINECODE220 - Muted dark gray for subtle backgrounds

Text Colors (Dark Mode):

• - --foreground: #ededed - Light gray for primary text
• INLINECODE222 - Primary text color
• INLINECODE223 - Medium gray for secondary text
• INLINECODE224 - Muted gray for less important text
• INLINECODE225 - Foreground on muted backgrounds

Borders (Dark Mode):

• - --border: #606068 - Lighter gray for visibility on dark backgrounds
• INLINECODE227 - Subtle dark gray for dividers

Syntax Highlighting (Dark Mode):

• - --syntax-keyword: #d99178 - Lighter primary for keywords
• INLINECODE229 - Green (same as light mode)
• INLINECODE230 - Lighter primary for numbers
• INLINECODE231 - 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
• INLINECODE235 - Medium shadows
• INLINECODE236 - Large shadows

Dark Mode Background Pattern

Dark mode uses a subtle white grid pattern instead of black:

CODEBLOCK16

Theme Toggle Implementation

HTML Structure:
CODEBLOCK17

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: INLINECODE241
• Footer background: INLINECODE242
• Hover effects maintain same behavior with adjusted colors

Category Cards:

• - Each category has theme-specific hover colors:

Charts:

• - Grid lines: #27272a with 0.5 opacity
• Chart container: INLINECODE252
• 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 INLINECODE254
• Background changes use INLINECODE255
• Smooth theme switching without jarring changes

Implementation Pattern:
CODEBLOCK18

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:

CODEBLOCK19

Theme Toggle JavaScript Implementation

Complete Implementation:
CODEBLOCK20

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