# Send Terminal UI Website Design to your agent Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually. ## Fast path - Download the package from Yavira. - Extract it into a folder your agent can access. - Paste one of the prompts below and point your agent at the extracted folder. ## Suggested prompts ### New install ```text I downloaded a skill package from Yavira. Read SKILL.md from the extracted folder and install it by following the included instructions. Tell me what you changed and call out any manual steps you could not complete. ``` ### Upgrade existing ```text I downloaded an updated skill package from Yavira. Read SKILL.md from the extracted folder, compare it with my current installation, and upgrade it while preserving any custom configuration unless the package docs explicitly say otherwise. Summarize what changed and any follow-up checks I should run. ``` ## Machine-readable fields ```json { "schemaVersion": "1.0", "item": { "slug": "terminal-ui-website-design", "name": "Terminal UI Website Design", "source": "tencent", "type": "skill", "category": "开发工具", "sourceUrl": "https://clawhub.ai/chyinan/terminal-ui-website-design", "canonicalUrl": "https://clawhub.ai/chyinan/terminal-ui-website-design", "targetPlatform": "OpenClaw" }, "install": { "downloadUrl": "/downloads/terminal-ui-website-design", "sourceDownloadUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=terminal-ui-website-design", "sourcePlatform": "tencent", "targetPlatform": "OpenClaw", "packageFormat": "ZIP package", "primaryDoc": "SKILL.md", "includedAssets": [ "SKILL.md", "references/complete-css-variables.css", "references/component-templates.html", "references/design-tokens.json" ], "downloadMode": "redirect", "sourceHealth": { "source": "tencent", "status": "healthy", "reason": "direct_download_ok", "recommendedAction": "download", "checkedAt": "2026-05-07T17:22:31.273Z", "expiresAt": "2026-05-14T17:22:31.273Z", "httpStatus": 200, "finalUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=afrexai-annual-report", "contentType": "application/zip", "probeMethod": "head", "details": { "probeUrl": "https://wry-manatee-359.convex.site/api/v1/download?slug=afrexai-annual-report", "contentDisposition": "attachment; filename=\"afrexai-annual-report-1.0.0.zip\"", "redirectLocation": null, "bodySnippet": null }, "scope": "source", "summary": "Source download looks usable.", "detail": "Yavira can redirect you to the upstream package for this source.", "primaryActionLabel": "Download for OpenClaw", "primaryActionHref": "/downloads/terminal-ui-website-design" }, "validation": { "installChecklist": [ "Use the Yavira download entry.", "Review SKILL.md after the package is downloaded.", "Confirm the extracted package contains the expected setup assets." ], "postInstallChecks": [ "Confirm the extracted package includes the expected docs or setup files.", "Validate the skill or prompts are available in your target agent workspace.", "Capture any manual follow-up steps the agent could not complete." ] } }, "links": { "detailUrl": "https://openagent3.xyz/skills/terminal-ui-website-design", "downloadUrl": "https://openagent3.xyz/downloads/terminal-ui-website-design", "agentUrl": "https://openagent3.xyz/skills/terminal-ui-website-design/agent", "manifestUrl": "https://openagent3.xyz/skills/terminal-ui-website-design/agent.json", "briefUrl": "https://openagent3.xyz/skills/terminal-ui-website-design/agent.md" } } ``` ## Documentation ### 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 ### 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 ### 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 ### Terminal Window Component Structure:
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: 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: 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 ### 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 ### 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 ### 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 ### 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 ### 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: 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: 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: /* 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: /* 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: 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. ## Trust - Source: tencent - Verification: Indexed source record - Publisher: chyinan - Version: 1.0.0 ## Source health - Status: healthy - Source download looks usable. - Yavira can redirect you to the upstream package for this source. - Health scope: source - Reason: direct_download_ok - Checked at: 2026-05-07T17:22:31.273Z - Expires at: 2026-05-14T17:22:31.273Z - Recommended action: Download for OpenClaw ## Links - [Detail page](https://openagent3.xyz/skills/terminal-ui-website-design) - [Send to Agent page](https://openagent3.xyz/skills/terminal-ui-website-design/agent) - [JSON manifest](https://openagent3.xyz/skills/terminal-ui-website-design/agent.json) - [Markdown brief](https://openagent3.xyz/skills/terminal-ui-website-design/agent.md) - [Download page](https://openagent3.xyz/downloads/terminal-ui-website-design)