π¦ ClawHub
Terminal UI Website Design
by @chyinan
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
clawhub install terminal-ui-website-designπ About This Skill
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:
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 accentsSemantic 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 backgroundsText 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 backgroundsBorders:
--border: #8b929e - Medium gray for main borders--border-light: #e5e7eb - Light gray for subtle dividers--input: #8b929e - Input border colorStatus Colors:
--success: #22c55e - Green for success states--warning: #f59e0b - Amber for warnings--danger: #ef4444 - Red for errors/destructive actions--accent: #f59e0b - Amber accent colorSyntax 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 namesCommand Prefix:
$) uses fluorescent green: #39ff14 - Creates terminal-like appearanceCode Elements:
--text-comment: #6a9955 - Comment text colormacOS 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:
>)Fluorescent Green (#39ff14) Usage:
$) - creates authentic terminal feelGreen (#22c55e) Usage:
Blue (#3b82f6) Usage:
Typography System
Font Families
Primary Font Stack:
--font-mono: "JetBrains Mono", "JetBrains Mono Fallback", 'Fira Code', 'Consolas', monospace;
Sans-serif Fallback:
--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
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 headingsFont 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 textTypography Usage
Headings:
Body Text:
--text-secondary--text-mutedCode/Command Text:
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 sectionsUsage Guidelines:
--spacing-md to --spacing-lg--spacing-xl to --spacing-2xl--spacing-sm to --spacing-md--spacing-sm to --spacing-mdBorder 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 radiusUsage:
--radius-lg (8px)--radius-lg (8px)--radius-lg (8px)--radius-md (6px)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:
--shadow-sm--shadow-md--shadow-lgrgba(204, 122, 96, 0.1) for primary-themed elementsComponent Specifications
Terminal Window Component
Structure:
filename.ext
ready
Styling:
--bg-card (#fff)1px solid --border (#8b929e)--radius-lg (8px)--shadow-sm--bg-code (#fafafa)1px solid --border-light (#e5e7eb)--spacing-sm --spacing-md (8px 16px)--spacing-lg (24px)Window Dots:
12px Γ 12px6pxWindow Title:
0.85rem--text-secondary (#666666)Window Status:
0.75rem--text-muted (#5b6370)Navigation Bar
Structure:
Styling:
sticky, top: 0rgba(255, 255, 255, 0.8) with backdrop-filter: blur(8px)1px solid --border64px (desktop), 56px (mobile)80rem (1280px), centeredLogo:
~/ in primary color (#cc7a60)Navigation Commands:
--spacing-md1px solid --border--radius-lgCommand Button Structure:
Command Colors:
$): Fluorescent green (#39ff14)Card Components
Skill Card:
--bg-card (#fff in light, #111 in dark)1px solid --border--radius-xl (12px)100% with flex column layout0 25px 50px -12px rgba(204, 122, 96, 0.1)), translateY(-4px)translateY(0) scale(0.99)all 0.3s ease2rem width, subtle backgroundCategory Card:
Mention Card:
Button Components
Primary Button (Active):
--primary (#cc7a60)--primary-foreground (#fff)1px solid --primary--radius-lg6px 12px (small) or --spacing-md --spacing-lg (medium)--text-xs or --text-smSecondary Button:
--bg-card1px solid --border--foregroundtransform: scale(0.95)Icon Button:
6px 12px14px or 16pxInput Components
Search Input:
--text-muted colorText Input:
--bg-card1px solid --border--radius-sm or --radius-md--spacing-smCode Display Components
Code Block:
rgba(255, 255, 255, 0.5) with backdrop blur1px solid --border--radius-lg--spacing-md--leading-relaxedCode Line:
--spacing-smDescription Block (Comment Style):
4px solid rgba(204, 122, 96, 0.5)rgba(204, 122, 96, 0.05)--spacing-md--radius-lg)Grid Layouts
Skills Grid:
repeat(3, 1fr) (desktop), repeat(2, 1fr) (tablet), 1fr (mobile)--spacing-lg (24px)Categories Grid:
repeat(4, 1fr) (desktop), repeat(2, 1fr) (tablet), 1fr (mobile)--spacing-lgMentions Grid:
1fr 1fr (desktop), 1fr (mobile)--spacing-lgAnimation System
Transitions
Default Transition:
0.15s or 0.2scubic-bezier(.4,0,.2,1) (ease-in-out)all or specific propertiesCommon Transitions:
all 0.2s easetransform 0.2s easecolor 0.2s ease or background-color 0.2s easeKeyframe Animations
Blink Animation (Cursor):
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
1sinfinitePulse Border Animation:
@keyframes pulse-border {
0%, 100% { border-color: rgba(204, 122, 96, 0.5); }
50% { border-color: var(--ring); }
}
2sease-in-outinfiniteFade In Up Animation:
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
0.5seaseInteractive States
Hover States:
Active States:
transform: scale(0.95) - subtle press effect0.2sFocus States:
2px solid --ring with 2px offsetBackground 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;
body backgroundGradient Backgrounds
Avatar Gradient:
background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
Chart Gradient:
linearGradient: #cc7a60 with opacity stops (0%: 0.6, 100%: 0)
Responsive Design
Breakpoints
Mobile: < 640px
Tablet: 640px - 1024px
Desktop: 1024px - 1200px
Large Desktop: > 1200px
1400pxResponsive Adjustments
Navigation:
Hero Section:
Grids:
Typography:
Implementation Guidelines
CSS Variable Usage
Always use CSS variables for:
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: 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):
rgba(204, 122, 96, 0.5) for borders, rgba(204, 122, 96, 0.05) for backgroundsFluorescent Green (#39ff14):
$)Green (#22c55e):
Typography Rules
Always use monospace font for:
Font weight guidelines:
Spacing Consistency
Use spacing scale:
13px, 27px)--spacing-sm to --spacing-md--spacing-xl to --spacing-2xlAnimation Best Practices
Keep animations subtle:
Performance:
transform and opacity for animations (GPU accelerated)width, height, margin, paddingCommon Patterns
Terminal Window Card
filename.ext
ready
Command Button
Code Block Display
const
variable
=
123
;
// Comment text
Description Block (Comment Style)
/**
* Description text
*/
Accessibility Considerations
Color Contrast:
Focus States:
Keyboard Navigation:
Screen Readers:
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 backgroundsText 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 backgroundsBorders (Dark Mode):
--border: #606068 - Lighter gray for visibility on dark backgrounds--border-light: #27272a - Subtle dark gray for dividersSyntax 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)#60a5fa (blue-400) - Brighter blue for better contrast#c084fc (purple-400) - Brighter purple for better contrastShadows (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 shadowsDark 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:
JavaScript Implementation:
localStorage to persist theme preferenceKey Features:
Dark Mode Component Adaptations
Navigation Bar:
rgba(10, 10, 10, 0.8) with backdrop blurTerminal Windows:
#111 (slightly lighter than main background)rgba(38, 38, 38, 0.3) for subtle contrastSkill Cards:
rgba(38, 38, 38, 0.2)rgba(38, 38, 38, 0.2)Category Cards:
#22d3ee (dark) vs #06b6d4 (light)
- Blue: #60a5fa (dark) vs #3b82f6 (light)
- Purple: #c084fc (dark) vs #a855f7 (light)
- Amber: #fbbf24 (dark) vs #f59e0b (light)Charts:
#27272a with 0.5 opacityrgba(17, 17, 17, 0.3)FAB Button:
#1a1a1a with white iconDark Mode Best Practices
Color Contrast:
Transitions:
transition: color 0.2s ease-in-outtransition: background-color 0.2s ease-in-outImplementation Pattern:
/* 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:
Performance Optimization
CSS Variables:
:root for global accessAnimations:
transform and opacity (GPU accelerated)Font Loading:
font-display: swap for better performanceBrowser Support
Modern Browsers:
-webkit- prefixes for backdrop-filter)Features Used:
-webkit- prefix for SafariDesign Tokens Summary
Quick Reference:
/* 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:
(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:
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.