Tencent SkillHub · Developer Tools

Terminal UI Website Design

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.

skill openclawclawhub Free

0 Downloads

0 Stars

0 Installs

0 Score

High Signal

⬇ 0 downloads ★ 0 stars Unverified but indexed

Install for OpenClaw

Quick setup

Download the package from Yavira.
Extract the archive and review SKILL.md first.
Import or place the package into your OpenClaw setup.

Requirements

Target platform: OpenClaw
Install method: Manual import
Extraction: Extract archive
Prerequisites: OpenClaw
Primary doc: SKILL.md

Package facts

Download mode: Yavira redirect
Package format: ZIP package
Source platform: Tencent SkillHub
What's included: SKILL.md, references/complete-css-variables.css, references/component-templates.html, references/design-tokens.json

Validation

Use the Yavira download entry.
Review SKILL.md after the package is downloaded.
Confirm the extracted package contains the expected setup assets.

Install with your agent

Agent handoff

Hand the extracted package to your coding agent with a concrete install brief instead of figuring it out manually.

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.

New install

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

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.

Open Send to Agent page Open JSON manifest Open Markdown brief

Trust & source

Release facts

Source: Tencent SkillHub
Verification: Indexed source record
Version: 1.0.0

Provenance

Publisher: chyinan
Source page: View original listing
Canonical URL: Open canonical page

Documentation

ClawHub primary doc Primary doc: SKILL.md 49 sections Open source page

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: <div class="terminal-window"> <div class="window-header"> <div class="window-dots"> <span class="dot red"></span> <span class="dot yellow"></span> <span class="dot green"></span> </div> <span class="window-title">filename.ext</span> <span class="window-status">ready</span> </div> <div class="window-content">  </div> </div> Styling: Background: --bg-card (#fff) Border: 1px solid --border (#8b929e) Border radius: --radius-lg (8px) Box shadow: --shadow-sm Header background: --bg-code (#fafafa) Header border-bottom: 1px solid --border-light (#e5e7eb) Header padding: --spacing-sm --spacing-md (8px 16px) Content padding: --spacing-lg (24px) Window Dots: Size: 12px × 12px Gap: 6px Colors: Red (#ff5f57), Yellow (#febc2e), Green (#28c840) Fully rounded (border-radius: 50%) Window Title: Font size: 0.85rem Color: --text-secondary (#666666) Font: Monospace Window Status: Font size: 0.75rem Color: --text-muted (#5b6370) Position: Right side of header

Navigation Bar

Structure: <nav class="navbar"> <div class="navbar-container"> <div class="navbar-content">  </div> </div> </nav> Styling: Position: sticky, top: 0 Background: rgba(255, 255, 255, 0.8) with backdrop-filter: blur(8px) Border-bottom: 1px solid --border Height: 64px (desktop), 56px (mobile) Max width: 80rem (1280px), centered Logo: Status indicator: Green dot (8px) + "ready" text Path prefix: ~/ in primary color (#cc7a60) Path name: Bold, foreground color Cursor blink: 2px width, primary color, animated Navigation Commands: Display: Flex, gap --spacing-md Button style: Monospace font, small padding (6px 12px) Border: 1px solid --border Border radius: --radius-lg Active state: Primary border color with pulse animation Hover: Border color changes to primary with 50% opacity Command Button Structure: <button class="nav-cmd"> <span class="cmd-prefix">$</span> <span class="cmd-keyword">ai</span> <span class="cmd-flag">--search</span> </button> Command Colors: Prefix ($): Fluorescent green (#39ff14) Keyword: Primary color (#cc7a60) or blue (#3b82f6) Flag: Default foreground color

Card Components

Skill Card: Background: --bg-card (#fff in light, #111 in dark) Border: 1px solid --border Border radius: --radius-xl (12px) Height: 100% with flex column layout Hover: Border changes to primary with 50% opacity, shadow increases (0 25px 50px -12px rgba(204, 122, 96, 0.1)), translateY(-4px) Active: translateY(0) scale(0.99) Transition: all 0.3s ease Line Numbers: Absolute positioned on left, 2rem width, subtle background Avatar: 24px × 24px, bordered, scales on hover Star Icon: 10px × 10px, warning color Like Button: SVG heart icon, changes color on hover Category Card: Same base styling as skill card Color Themes: Cyan, Blue, Purple, Amber variants Folder Icon: SVG icon, color varies by theme, scales on hover Category Dot: Small indicator dot, changes on hover Arrow Icon: Appears on hover, positioned bottom-right JSON Display: Key-value pairs with theme-colored hover effects Command Line: Footer with command-style text Mention Card: Same base styling Blockquote styling with quotation marks Source attribution with border-top separator

Button Components

Primary Button (Active): Background: --primary (#cc7a60) Color: --primary-foreground (#fff) Border: 1px solid --primary Border radius: --radius-lg Padding: 6px 12px (small) or --spacing-md --spacing-lg (medium) Font: Monospace, --text-xs or --text-sm Secondary Button: Background: --bg-card Border: 1px solid --border Color: --foreground Hover: Border color changes to primary with 50% opacity Active: transform: scale(0.95) Icon Button: Square or rounded Padding: 6px 12px Icon size: 14px or 16px Same hover/active states as secondary button

Input Components

Search Input: Background: Transparent Border: None Font: Monospace Placeholder: --text-muted color Focus: No visible border (minimal design) Text Input: Background: --bg-card Border: 1px solid --border Border radius: --radius-sm or --radius-md Padding: --spacing-sm Font: Monospace

Code Display Components

Code Block: Background: rgba(255, 255, 255, 0.5) with backdrop blur Border: 1px solid --border Border radius: --radius-lg Padding: --spacing-md Font: Monospace Line height: --leading-relaxed Code Line: Display: Flex, align baseline Gap: --spacing-sm Syntax colors applied to different elements Description Block (Comment Style): Border-left: 4px solid rgba(204, 122, 96, 0.5) Background: rgba(204, 122, 96, 0.05) Padding-left: --spacing-md Border-radius: Right side only (--radius-lg) Font: Monospace

Grid Layouts

Skills Grid: Display: Grid Columns: repeat(3, 1fr) (desktop), repeat(2, 1fr) (tablet), 1fr (mobile) Gap: --spacing-lg (24px) Categories Grid: Display: Grid Columns: repeat(4, 1fr) (desktop), repeat(2, 1fr) (tablet), 1fr (mobile) Gap: --spacing-lg Mentions Grid: Display: Grid Columns: 1fr 1fr (desktop), 1fr (mobile) Gap: --spacing-lg

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

<div class="terminal-window"> <div class="window-header"> <div class="window-dots"> <span class="dot red"></span> <span class="dot yellow"></span> <span class="dot green"></span> </div> <span class="window-title">filename.ext</span> <span class="window-status">ready</span> </div> <div class="window-content">  </div> </div>

Command Button

<button class="nav-cmd"> <span class="cmd-prefix">$</span> <span class="cmd-keyword">command</span> <span class="cmd-flag">--flag</span> </button>

Code Block Display

<div class="stats-code-block"> <div class="code-line"> <span class="keyword">const</span> <span class="variable-name">variable</span> <span class="operator">=</span> <span class="number">123</span> <span class="operator">;</span> </div> <div class="code-comment"> <span class="comment-symbol">// </span>Comment text </div> </div>

Description Block (Comment Style)

<div class="description-block"> <div class="comment-start">/**</div> <div class="comment-text"> <span class="comment-asterisk"> * </span>Description text </div> <div class="comment-end"> */</div> </div>

Accessibility Considerations

Color Contrast: Primary text (#111827) on white: WCAG AAA compliant Secondary text (#666666) on white: WCAG AA compliant Primary color (#cc7a60) on white: WCAG AA compliant for large text Focus States: All interactive elements have visible focus indicators Focus ring: 2px solid primary color with 2px offset Keyboard Navigation: All interactive elements are keyboard accessible Tab order follows visual hierarchy Enter/Space activate buttons Screen Readers: Semantic HTML structure ARIA labels where needed Status indicators use appropriate roles

Dark Mode Implementation

The design system includes a complete dark mode implementation using [data-theme="dark"] attribute selector. Dark mode is fully integrated with smooth transitions and maintains all design principles.

Dark Mode Color System

Primary Colors (Dark Mode): --primary: #d99178 - Lighter terracotta for better contrast on dark backgrounds --primary-foreground: #0a0a0a - Dark text on primary backgrounds --primary-dark: #c57f66 - Darker shade for hover states --primary-light: #e5a890 - Lighter shade for subtle accents --ring: #d99178 - Focus ring color (lighter primary) Backgrounds (Dark Mode): --background: #0a0a0a - Deep black for main backgrounds --bg-main: #0a0a0a - Dark background with subtle white grid pattern --bg-card: #111 - Slightly lighter black for card components --bg-code: #18181b - Dark gray for code blocks and window headers --secondary: #1a1a1a - Dark gray for secondary backgrounds --muted: #262626 - Muted dark gray for subtle backgrounds Text Colors (Dark Mode): --foreground: #ededed - Light gray for primary text --text-primary: #ededed - Primary text color --text-secondary: #a3a3a3 - Medium gray for secondary text --text-muted: #a3a3a3 - Muted gray for less important text --muted-foreground: #a3a3a3 - Foreground on muted backgrounds Borders (Dark Mode): --border: #606068 - Lighter gray for visibility on dark backgrounds --border-light: #27272a - Subtle dark gray for dividers Syntax Highlighting (Dark Mode): --syntax-keyword: #d99178 - Lighter primary for keywords --syntax-string: #22c55e - Green (same as light mode) --syntax-number: #d99178 - Lighter primary for numbers --syntax-comment: #6a9955 - Muted green (same as light mode) Blue keywords: #60a5fa (blue-400) - Brighter blue for better contrast Purple keywords: #c084fc (purple-400) - Brighter purple for better contrast Shadows (Dark Mode): --shadow-sm: 0 1px 2px rgba(0,0,0,0.3) - Stronger shadows for depth --shadow-md: 0 4px 6px rgba(0,0,0,0.4) - Medium shadows --shadow-lg: 0 10px 25px rgba(0,0,0,0.5) - Large shadows

Dark Mode Background Pattern

Dark mode uses a subtle white grid pattern instead of black: [data-theme="dark"] body { background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px); }

Theme Toggle Implementation

HTML Structure: <button class="theme-toggle-btn theme-toggle" title="切换主题" aria-label="切换主题"> <svg class="icon-sun theme-icon"></svg> <svg class="icon-moon theme-icon" style="display: none;"></svg> </button> JavaScript Implementation: Uses localStorage to persist theme preference Detects system preference on first load Smoothly transitions between themes Updates icon visibility (sun/moon) Listens to system theme changes (when no manual preference set) Key Features: Automatic system preference detection Manual override with localStorage persistence Smooth CSS transitions (0.2s ease-in-out) Icon state management (sun for light, moon for dark)

Dark Mode Component Adaptations

Navigation Bar: Background: rgba(10, 10, 10, 0.8) with backdrop blur Status indicator: Darker background with adjusted border Terminal Windows: Card background: #111 (slightly lighter than main background) Window headers: rgba(38, 38, 38, 0.3) for subtle contrast All borders use darker mode colors Skill Cards: Line numbers background: rgba(38, 38, 38, 0.2) Footer background: rgba(38, 38, 38, 0.2) Hover effects maintain same behavior with adjusted colors Category Cards: Each category has theme-specific hover colors: Cyan: #22d3ee (dark) vs #06b6d4 (light) Blue: #60a5fa (dark) vs #3b82f6 (light) Purple: #c084fc (dark) vs #a855f7 (light) Amber: #fbbf24 (dark) vs #f59e0b (light) Charts: Grid lines: #27272a with 0.5 opacity Chart container: rgba(17, 17, 17, 0.3) All text colors adapt to dark mode FAB Button: Light mode: Dark background #1a1a1a with white icon Dark mode: White background with dark icon (inverted)

Dark Mode Best Practices

Color Contrast: All text maintains WCAG AA compliance in dark mode Primary color is lightened for better visibility Borders are lighter for clear definition Transitions: All color changes use transition: color 0.2s ease-in-out Background changes use transition: background-color 0.2s ease-in-out Smooth theme switching without jarring changes Implementation Pattern: /* 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.

Category context

Code helpers, APIs, CLIs, browser automation, testing, and developer operations.

Source: Tencent SkillHub

Largest current source with strong distribution and engagement signals.

Package contents

Included in package

2 Files1 Docs1 Config

SKILL.md Primary doc
references/design-tokens.json Config
references/complete-css-variables.css Files
references/component-templates.html Files