终端 UI 设计系统

一个完整的终端风格用户界面设计系统，采用 macOS 风格窗口装饰、等宽字体和温暖的开发者友好配色方案。该设计系统专为开发工具、代码市场、技术文档以及任何需要命令行美学的界面而优化。

设计理念

核心原则：

• 终端美学：模仿 macOS 终端窗口，包含彩色圆点、等宽字体和命令行语法
• 开发者优先：使用语法高亮颜色、代码式结构和终端隐喻
• 温暖亲和：主色调为暖陶土色（#cc7a60），营造友好、不具压迫感的氛围
• 高对比度：清晰的视觉层级，区分明显的文字与背景颜色
• 功能之美：每个设计元素兼具实用性与视觉美感

色彩系统

主要配色

品牌主色：

• --primary: #cc7a60 - 暖陶土/橙棕色，用于主要操作、强调和高光
• --primary-foreground: #fff - 主色背景上的白色文字
• --primary-dark: #b56850 - 悬停状态使用的深色版本
• --primary-light: #d8907a - 用于细微强调的浅色版本
• --ring: #cc7a60 - 聚焦环颜色（与主色一致）

暖色强调：

• --warm-red: #c85a3f - 用于代码块边框和暖色调强调

语义色彩

背景色：

• --background: #fff - 纯白，用于主背景
• --bg-main: #f8f8f8 - 浅灰，用于页面背景（带细微网格图案）
• --bg-card: #fff - 白色，用于卡片组件
• --bg-code: #fafafa - 极浅灰，用于代码块和窗口标题栏
• --secondary: #f9fafb - 浅灰，用于次要背景
• --muted: #f3f4f6 - 柔和灰，用于低强度背景

文字颜色：

• --foreground: #111827 - 接近黑色，用于主要文字（可读性极佳）
• --text-primary: #111827 - 主要文字颜色
• --text-secondary: #666666 - 中等灰色，用于次要文字
• --text-muted: #5b6370 - 柔和灰，用于不重要的文字
• --muted-foreground: #5b6370 - 在柔和背景上的前景色

边框颜色：

• --border: #8b929e - 主边框中等灰色
• --border-light: #e5e7eb - 细微分隔线的浅灰色
• --input: #8b929e - 输入框边框颜色

状态颜色：

• --success: #22c55e - 绿色，用于成功状态
• --warning: #f59e0b - 橙黄色，用于警告
• --danger: #ef4444 - 红色，用于错误或破坏性操作
• --accent: #f59e0b - 橙黄色强调色

语法高亮颜色

代码语法：

• --syntax-keyword: #cc7a60 - 关键字颜色（如 const、export 等）
• --syntax-string: #22c55e - 字符串绿色
• --syntax-number: #cc7a60 - 数字使用主色
• --syntax-comment: #6a9955 - 注释使用柔绿色
• --syntax-function: #dcdcaa - 函数名使用浅黄色

命令前缀：

• 命令前缀（$）使用荧光绿色：#39ff14，营造终端风格

代码元素：

• --text-comment: #6a9955 - 注释文本颜色

macOS 窗口圆点

终端窗口控制按钮：

• --dot-red: #ff5f57 - 关闭按钮（macOS 红色）
• --dot-yellow: #febc2e - 最小化按钮（macOS 黄色）
• --dot-green: #28c840 - 最大化按钮（macOS 绿色）

色彩使用规范

主色 (#cc7a60) 使用场景：

• 导航中的命令关键字
• 提示符符号（>）
• 激活状态与高光
• 聚焦环
• 悬停边框
• 激活状态下的主按钮
• 图表线条与数据可视化

荧光绿 (#39ff14) 使用场景：

• 命令前缀（$）——营造真实终端感
• 仅限美元符号使用，不得用于其他元素

绿色 (#22c55e) 使用场景：

• 成功提示
• 状态圆点（在线/就绪）
• 代码中的字符串字面量
• 正向操作

蓝色 (#3b82f6) 使用场景：

• 命令关键字（cd、watch、man、api）
• 代码关键字（const、let、var）
• 链接与交互元素

字体系统

字体族

主字体堆栈：

--font-mono: "JetBrains Mono", "JetBrains Mono Fallback", 'Fira Code', 'Consolas', monospace;

• 主字体：JetBrains Mono（400–800 字重）
• 备用字体：Fira Code、Consolas、系统等宽字体
• 用途：所有 UI 文本、导航、按钮、代码块

无衬线备用字体：

--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

• 仅作为备用，推荐始终使用等宽字体

字号体系

基础单位系统：

• --text-xs: 0.75rem (12px) - 小标签、提示、窗口状态
• --text-sm: 0.875rem (14px) - 次要文字、描述信息
• --text-base: 1rem (16px) - 正文默认字号
• --text-lg: 1.125rem (18px) - 稍微强调的文字
• --text-xl: 1.25rem (20px) - 副标题
• --text-2xl: 1.5rem (24px) - 节标题
• --text-3xl: 1.875rem (30px) - 大数字、统计数据
• --text-4xl: 2.25rem (36px) - 主标题数字
• --text-5xl: 3rem (48px) - 大标题
• --text-6xl: 3.75rem (60px) - 特大标题

字重：

• --font-weight-normal: 400 - 正文
• --font-weight-medium: 500 - 中等强调
• --font-weight-semibold: 600 - 半粗体（关键字、标签）
• --font-weight-bold: 700 - 粗体（标题、重要文字）
• --font-weight-extrabold: 800 - 特粗体（主标题文字）

行高：

• --leading-tight: 1.25 - 标题紧凑间距
• --leading-relaxed: 1.625 - 正文宽松间距

字体使用规范

标题：

• 主标题：3.5rem，字重 700，行高 1.1
• 节标题：2.5rem，字重 700
• FAQ 标题：2rem，字重 700

正文：

• 默认：1rem，字重 400，行高 1.5
• 次要文字：0.875rem，颜色 --text-secondary
• 柔和文字：0.75rem，颜色 --text-muted

代码/命令文本：

• 始终使用等宽字体
• 命令前缀：荧光绿色 (#39ff14)
• 关键字：主色调 (#cc7a60) 或蓝色 (#3b82f6)
• 标志/参数：默认前景色

间距系统

基础单位： --spacing: 0.25rem（4px）

间距比例：

• --spacing-xs: 4px（0.25rem）——紧密间距，图标内边距
• --spacing-sm: 8px（0.5rem）——小间距，按钮内边距
• --spacing-md: 16px（1rem）——标准间距，卡片内边距
• --spacing-lg: 24px（1.5rem）——大间距，区块间距
• --spacing-xl: 32px（2rem）——超大间距，主要区块
• --spacing-2xl: 48px（3rem）——最大间距，页面区块

使用规范：

• 使用统一的间距倍数（以 4px 为基准）
• 卡片内边距：--spacing-md 至 --spacing-lg
• 区块外边距：--spacing-xl 至 --spacing-2xl
• 按钮内边距：--spacing-sm 至 --spacing-md
• 相关元素之间的间距：--spacing-sm 至 --spacing-md

边框圆角系统

圆角比例：

• --radius-xs: 2px（0.125rem）——极小圆角
• --radius-sm: 4px（0.25rem）——小元素
• --radius-md: 6px（0.375rem）——按钮、输入框
• --radius-lg: 8px（0.5rem）——卡片、终端窗口（最常用）
• --radius-xl: 12px（0.75rem）——大卡片
• --radius-2xl: 16px（1rem）——超大元素
• --radius: 10px（0.625rem）——默认圆角

使用建议：

• 终端窗口：--radius-lg（8px）
• 按钮：--radius-lg（8px）
• 卡片：--radius-lg（8px）
• 输入框：--radius-md（6px）
• 头像：9999px（完全圆形）

阴影系统

阴影比例：

• --shadow-sm: 0 1px 2px rgba(0,0,0,0.05) —— 微弱抬升
• --shadow-md: 0 4px 6px rgba(0,0,0,0.07) —— 中等抬升（卡片悬停状态）
• --shadow-lg: 0 10px 25px rgba(0,0,0,0.1) —— 大幅抬升（浮动按钮）

使用建议：

• 默认卡片：--shadow-sm
• 悬停状态：--shadow-md
• 浮动元素：--shadow-lg
• 主色调阴影：rgba(204, 122, 96, 0.1) 用于主色调元素

组件规范

终端窗口组件

结构：

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

样式：

• 背景色：--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）

窗口控制点：

• 尺寸：12px × 12px
• 间距：6px
• 颜色：红色 (#ff5f57)，黄色 (#febc2e)，绿色 (#28c840)
• 完全圆角（border-radius: 50%）

窗口标题：

• 字体大小：0.85rem
• 颜色：--text-secondary（#666666）
• 字体：等宽

窗口状态：

• 字体大小：0.75rem
• 颜色：--text-muted（#5b6370）
• 位置：标题栏右侧

导航栏

结构：

<nav class="navbar">
  <div class="navbar-container">
    <div class="navbar-content">
      <!-- Logo、命令、操作 -->
    </div>
  </div>
</nav>

样式：

• 位置：sticky，top: 0
• 背景色：rgba(255, 255, 255, 0.8)，配合 backdrop-filter: blur(8px)
• 下边框：1px solid --border
• 高度：桌面端 64px，移动端 56px
• 最大宽度：80rem（1280px），居中显示

Logo：

• 状态指示：绿色圆点（8px）+ “ready” 文本
• 路径前缀：~/，使用主色调 (#cc7a60)
• 路径名称：加粗，前景色
• 光标闪烁：2px 宽度，主色调，动画效果

导航命令：

• 显示方式：flex 布局，间距 --spacing-md
• 按钮样式：等宽字体，小内边距（6px 12px）
• 边框：1px solid --border
• 圆角：--radius-lg
• 激活状态：主色调边框，带脉冲动画
• 悬停状态：边框颜色变为主色调，透明度 50%

命令按钮结构：

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

命令颜色：

• 前缀 ($)：荧光绿色 (#39ff14)
• 关键字：主色调 (#cc7a60) 或蓝色 (#3b82f6)
• 标志：默认前景色

卡片组件

技能卡片：

• 背景色：--bg-card（浅色主题为 #fff，深色主题为 #111）
• 边框：1px solid --border
• 圆角：--radius-xl（12px）
• 高度：100%，采用 flex 列布局
• 悬停状态：边框变为主色调，透明度 50%，阴影增强（0 25px 50px -12px rgba(204, 122, 96, 0.1)），垂直位移 translateY(-4px)
• 激活状态：translateY(0) scale(0.99)
• 过渡动画：all 0.3s ease
• 行号：绝对定位在左侧，宽度 2rem，带有轻微背景
• 头像：24px × 24px，带边框，悬停时缩放
• 星标图标：10px × 10px，警告色
• 点赞按钮：SVG 心形图标，悬停时变色

分类卡片：

• 基础样式与技能卡片相同
• 颜色主题：青色、蓝色、紫色、琥珀色 变体
• 文件夹图标：SVG 图标，颜色随主题变化，悬停时缩放
• 分类圆点：小指示点，悬停时变化
• 箭头图标：悬停时出现，位于右下角
• JSON 展示：键值对展示，悬停时有主题色反馈
• 命令行：底部显示命令风格文本

提及卡片：

• 基础样式与上述卡片一致
• 引用样式：带引号
• 来源标注：顶部带分隔线

按钮组件

主按钮（激活状态）：

• 背景色：--primary（#cc7a60）
• 文字颜色：--primary-foreground（#fff）
• 边框：1px solid --primary
• 圆角：--radius-lg
• 内边距：6px 12px（小尺寸）或 --spacing-md --spacing-lg（中等尺寸）
• 字体：等宽，--text-xs 或 --text-sm

次要按钮：

• 背景色：--bg-card
• 边框：1px solid --border
• 文字颜色：--foreground
• 悬停状态：边框颜色变为主色，透明度 50%
• 按下状态：transform: scale(0.95)

图标按钮：

• 形状为方形或圆角
• 内边距：6px 12px
• 图标大小：14px 或 16px
• 悬停与按下状态与次要按钮一致

输入组件

搜索输入框：

• 背景色：透明
• 边框：无
• 字体：等宽字体
• 占位符颜色：--text-muted
• 获焦状态：无可见边框（极简设计）

文本输入框：

• 背景色：--bg-card
• 边框：1px solid --border
• 圆角：--radius-sm 或 --radius-md
• 内边距：--spacing-sm
• 字体：等宽字体

代码显示组件

代码块：

• 背景色：rgba(255, 255, 255, 0.5)，带背景模糊效果
• 边框：1px solid --border
• 圆角：--radius-lg
• 内边距：--spacing-md
• 字体：等宽字体
• 行高：--leading-relaxed

代码行：

• 显示方式：flex，基线对齐
• 间距：--spacing-sm
• 语法高亮应用于不同元素

描述区块（注释风格）：

• 左边框：4px solid rgba(204, 122, 96, 0.5)
• 背景色：rgba(204, 122, 96, 0.05)
• 左内边距：--spacing-md
• 圆角：仅右侧（--radius-lg）
• 字体：等宽字体

网格布局

技能网格：

• 显示方式：网格
• 列数：桌面端 repeat(3, 1fr)，平板端 repeat(2, 1fr)，移动端 1fr
• 间距：--spacing-lg（24px）

分类网格：

• 显示方式：网格
• 列数：桌面端 repeat(4, 1fr)，平板端 repeat(2, 1fr)，移动端 1fr
• 间距：--spacing-lg

提及网格：

• 显示方式：网格
• 列数：桌面端 1fr 1fr，移动端 1fr
• 间距：--spacing-lg

动画系统

过渡效果

默认过渡：

• 持续时间：0.15s 或 0.2s
• 缓动函数：cubic-bezier(.4,0,.2,1)（ease-in-out）
• 过渡属性：all 或具体属性

常见过渡：

• 悬停状态：all 0.2s ease
• 按下状态：transform 0.2s ease
• 颜色变化：color 0.2s ease 或 background-color 0.2s ease

关键帧动画

闪烁动画（光标）：

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

• 持续时间：1s
• 循环次数：无限
• 用途：光标闪烁效果

脉冲边框动画：

@keyframes pulse-border {
  0%, 100% { border-color: rgba(204, 122, 96, 0.5); }
  50% { border-color: var(--ring); }
}

• 持续时间：2s
• 缓动函数：ease-in-out
• 循环次数：无限
• 用途：活跃导航项的视觉反馈

淡入上移动画：

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

• 持续时间：0.5s
• 缓动函数：ease
• 用途：卡片入场动画
• 延迟设置：网格项目间以 0.1s 递增

交互状态

悬停状态：

• 按钮：边框颜色变化，背景变浅
• 卡片：边框变为主色，阴影增强，轻微抬升
• 链接：颜色变为主色
• 缩放：悬停时不缩放（保持稳定）

按下状态：

• 按钮：transform: scale(0.95) —— 微妙的按压效果
• 持续时间：0.2s

聚焦状态：

• 外轮廓：2px solid --ring，偏移 2px
• 用途：无障碍访问，键盘导航支持

背景图案

网格图案（页面背景）

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;

• 极其细微的网格（黑色透明度 2%）
• 网格单元尺寸：20px × 20px
• 提供纹理但不分散注意力
• 应用于 body 背景

渐变背景

头像渐变：

background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);

• 温暖的桃色渐变
• 角度：135度
• 用途：用户头像

图表渐变：

linearGradient: #cc7a60 with opacity stops (0%: 0.6, 100%: 0)

• 主色调渐变
• 用途：面积图、数据可视化

响应式设计

断点

**移动端：< 640px**

• 单列布局
• 字号减小
• 导航简化
• 栅格堆叠

**平板端：640px - 1024px**

• 双列布局
• 中等字号
• 导航菜单折叠

**桌面端：1024px - 1200px**

• 三列布局
• 完整导航栏可见
• 标准间距

**大桌面端：> 1200px**

• 四列布局（适用场景）
• 最大内容宽度：1400px
• 间距宽松

响应式调整

导航：

• 桌面端（>1024px）：完整命令菜单可见
• 平板/移动端：汉堡菜单，布局简化
• 状态指示器：移动端隐藏，平板及以上可见

英雄区域：

• 桌面端：双列网格（文字 + 图表）
• 移动端：单列，堆叠布局

网格：

• 技能：3 → 2 → 1 列
• 分类：4 → 2 → 1 列
• 提及：2 → 1 列

排版：

• 英雄标题：3.5rem → 2.5rem（移动端）
• 区块标题：2.5rem → 2rem（移动端）
• 正文：保持可读性

实现指南

CSS 变量使用规范

始终使用 CSS 变量，包括：

• 颜色（禁止硬编码十六进制值）
• 间距（使用间距比例尺）
• 排版（使用字号比例尺）
• 圆角（使用圆角比例尺）
• 阴影（使用阴影比例尺）

示例：

.button {
  background: var(--bg-card);
  color: var(--foreground);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

组件结构

终端窗口模式：

1. 带边框和圆角的容器
2. 包含圆点、标题、状态的头部
3. 带内边距的内容区域
4. 全局统一的间距

命令行模式：

1. 前缀（$）使用荧光绿色
2. 关键字使用主色或蓝色
3. 标志/参数使用默认颜色
4. 整体使用等宽字体

颜色应用规则

name: Terminal UI Website Design

version: 1.0.0

description: 为终端风格网站设计提供统一的视觉与交互规范，涵盖配色、排版、间距、动画、组件模式及暗色模式实现。

summary: 一套专为终端风格界面设计的完整视觉系统，支持明暗主题切换，确保一致性与可访问性。

配色规范

主色调 (#cc7a60):

• 用途：激活状态、高亮元素、关键词、命令提示
• 避免：大面积背景使用（色彩过强）
• 透明度变体：边框使用 rgba(204, 122, 96, 0.5)，背景使用 rgba(204, 122, 96, 0.05)

荧光绿 (#39ff14):

• 仅用于：命令前缀符号 ($)
• 禁止用于：其他文字、背景或装饰性元素

绿色 (#22c55e):

• 用途：成功状态、正向提示、字符串字面量
• 避免：主要操作按钮（应使用主色调替代）

字体规则

始终使用等宽字体，适用于：

• 导航元素
• 按钮
• 代码块
• 命令行界面
• 窗口标题
• 状态文本

字体粗细规范：

• 正文：400（正常）
• 标签/关键词：600（中等粗）
• 标题：700（粗体）
• 主标题文本：700–800（粗体至超粗体）

间距一致性

使用统一的间距尺度：

• 禁止使用任意值（如 13px、27px）
• 统一采用：4px、8px、16px、24px、32px、48px
• 相关元素间留白：--spacing-sm 至 --spacing-md
• 节点分隔：--spacing-xl 至 --spacing-2xl

动画最佳实践

保持动画简洁：

• 持续时间：最大 0.15s 至 0.3s
• 缓动曲线：使用提供的 cubic-bezier 曲线
• 避免：弹跳动画、过长持续时间
• 推荐：淡入淡出、位移、小幅度缩放

性能优化：

• 使用 transform 和 opacity 实现动画（GPU 加速）
• 避免对 width、height、margin、padding 进行动画

常用设计模式

终端窗口卡片

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

命令按钮

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

代码块展示

<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>注释内容
  </div>
</div>

描述块（注释样式）

<div class="description-block">
  <div class="comment-start">/**</div>
  <div class="comment-text">
    <span class="comment-asterisk"> * </span>描述文本
  </div>
  <div class="comment-end"> */</div>
</div>

可访问性考虑

颜色对比度：

• 主要文字 (#111827) 在白色背景上：符合 WCAG AAA 标准
• 次要文字 (#666666) 在白色背景上：符合 WCAG AA 标准
• 主色调 (#cc7a60) 在白色背景上：大字号时符合 WCAG AA 标准

焦点状态：

• 所有可交互元素均具备可见焦点指示器
• 焦点环：2px 实线，主色调，外偏移 2px

键盘导航：

• 所有可交互元素支持键盘操作
• Tab 顺序遵循视觉层级
• Enter 或 Space 键激活按钮

屏幕阅读器支持：

• 使用语义化 HTML 结构
• 必要时添加 ARIA 标签
• 状态提示使用合适的角色属性

暗色模式实现

设计系统通过 [data-theme="dark"] 属性选择器完整支持暗色模式。暗色模式已全面集成，具备平滑过渡效果，并保持所有设计原则一致。

暗色模式配色体系

主色调（暗色模式）：

• --primary: #d99178 —— 更浅的赭石色，提升在深背景上的对比度
• --primary-foreground: #0a0a0a —— 主色调背景上的深色文字
• --primary-dark: #c57f66 —— 悬停状态使用的更深色调
• --primary-light: #e5a890 —— 用于细微装饰的浅色调
• --ring: #d99178 —— 焦点环颜色（较浅的主色调）

背景色（暗色模式）：

• --background: #0a0a0a —— 主要背景的深黑色
• --bg-main: #0a0a0a —— 带轻微白色网格图案的深背景
• --bg-card: #111 —— 卡片组件的稍浅黑色
• --bg-code: #18181b —— 代码块和窗口标题的深灰色
• --secondary: #1a1a1a —— 次要背景的深灰色
• --muted: #262626 —— 用于弱化背景的哑光深灰色

文字颜色（暗色模式）：

• --foreground: #ededed —— 主要文字的浅灰色
• --text-primary: #ededed —— 主要文字颜色
• --text-secondary: #a3a3a3 —— 中等灰度的次要文字
• --text-muted: #a3a3a3 —— 较不重要文本的灰度
• --muted-foreground: #a3a3a3 —— 在弱化背景上的前景色

边框颜色（暗色模式）：

• --border: #606068 —— 在深背景上更清晰可见的浅灰
• --border-light: #27272a —— 用于分隔线的微暗灰

语法高亮（暗色模式）：

• --syntax-keyword: #d99178 —— 关键词使用较浅的主色调
• --syntax-string: #22c55e —— 绿色（与浅色模式一致）
• --syntax-number: #d99178 —— 数字使用较浅的主色调
• --syntax-comment: #6a9955 —— 淡绿色（与浅色模式一致）
• 蓝色关键字：#60a5fa（blue-400）—— 更明亮的蓝色以增强对比
• 紫色关键字：#c084fc（purple-400）—— 更明亮的紫色以增强对比

阴影（暗色模式）：

• --shadow-sm: 0 1px 2px rgba(0,0,0,0.3) —— 更强的阴影以增强层次感
• --shadow-md: 0 4px 6px rgba(0,0,0,0.4) —— 中等阴影
• --shadow-lg: 0 10px 25px rgba(0,0,0,0.5) —— 大型阴影

暗色模式背景图案

暗色模式使用微妙的白色网格图案替代纯黑背景：

[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);
}

主题切换实现

HTML 结构：

<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 实现：

• 使用 localStorage 持久化用户主题偏好
• 首次加载时检测系统主题设置
• 主题切换过程平滑流畅
• 动态更新图标显示状态（太阳/月亮）
• 监听系统主题变化（当未手动设置偏好时）

核心功能：

• 自动检测系统主题偏好
• 支持手动切换并持久保存至 localStorage
• 使用 CSS 平滑过渡（0.2 秒，ease-in-out）
• 图标状态管理（浅色模式显示太阳，深色模式显示月亮）

深色模式组件适配

导航栏：

• 背景：rgba(10, 10, 10, 0.8)，带背景模糊效果
• 状态指示器：使用更深的背景色，并调整边框样式

终端窗口：

• 卡片背景：#111（略高于主背景色）
• 窗口标题栏：rgba(38, 38, 38, 0.3)，提供微妙对比
• 所有边框均采用深色模式颜色

技能卡片：

• 行号背景：rgba(38, 38, 38, 0.2)
• 底部背景：rgba(38, 38, 38, 0.2)
• 悬停效果行为保持一致，仅颜色调整

分类卡片：

• 每个分类在不同主题下具有特定悬停颜色：

- 青蓝色：#22d3ee（深色） vs #06b6d4（浅色）

- 蓝色：#60a5fa（深色） vs #3b82f6（浅色）

- 紫色：#c084fc（深色） vs #a855f7（浅色）

- 橙黄色：#fbbf24（深色） vs #f59e0b（浅色）

图表：

• 网格线：#27272a，透明度 0.5
• 图表容器：rgba(17, 17, 17, 0.3)
• 所有文字颜色自动适配深色模式

浮动操作按钮（FAB）：

• 浅色模式：深色背景 #1a1a1a，白色图标
• 深色模式：白色背景，深色图标（反向显示）

深色模式最佳实践

色彩对比：

• 所有文字在深色模式下满足 WCAG AA 可访问性标准
• 主色调适当提亮以提升可读性
• 边框颜色调浅，增强视觉区分度

过渡动画：

• 所有颜色变化使用 transition: color 0.2s ease-in-out
• 背景色变化使用 transition: background-color 0.2s ease-in-out
• 主题切换过程自然流畅，无突兀跳变

实现模式：

/* 浅色模式（默认） */
.component {
  background: var(--bg-card);
  color: var(--foreground);
}

/* 深色模式 */
[data-theme="dark"] .component {
  background: var(--bg-card); /* 自动应用深色值 */
  color: var(--foreground); /* 自动应用深色值 */
}

保持一致：

• 相同的间距系统
• 相同的字体层级
• 相同的组件结构
• 相同的动画时长
• 增强阴影以提升层次感

性能优化

CSS 变量：

• 所有颜色和间距均使用 CSS 变量，便于主题切换
• 变量定义在 :root 中，确保全局可用

动画：

• 使用 transform 和 opacity（GPU 加速）
• 避免触发布局重排的属性
• 动画持续时间控制在 0.15s 至 0.3s 之间

字体加载：

• 提前连接 Google Fonts 服务
• 使用 font-display: swap 提升性能表现
• 字体堆栈中包含备用字体

浏览器支持

现代浏览器：

• Chrome / Edge：完全支持
• Firefox：完全支持
• Safari：完全支持（需对 backdrop-filter 添加 -webkit- 前缀）

使用特性：

• CSS Grid：现代浏览器全面支持
• CSS 变量：全面支持
• 背景模糊（Backdrop Filter）：Safari 需要 -webkit- 前缀
• Flexbox：全面支持

设计令牌汇总

快速参考：

/* 颜色 - 浅色模式 */
Primary: #cc7a60
Fluorescent Green: #39ff14（仅命令前缀使用）
Success: #22c55e
Blue: #3b82f6
Foreground: #111827
Border: #8b929e

/* 颜色 - 深色模式 */
Primary: #d99178
Foreground: #ededed
Background: #0a0a0a
Card: #111
Border: #606068
Blue: #60a5fa（为增强对比度而更明亮）

/* 间距 */
xs: 4px, sm: 8px, md: 16px, lg: 24px, xl: 32px, 2xl: 48px

/* 字体 */
Font: JetBrains Mono
Sizes: 0.75rem - 3.75rem 递增
Weights: 400, 500, 600, 700, 800

/* 圆角 */
xs: 2px, sm: 4px, md: 6px, lg: 8px, xl: 12px, 2xl: 16px

/* 阴影 - 浅色模式 */
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)

/* 阴影 - 深色模式 */
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)

主题切换 JavaScript 实现

完整实现：

(function() {
  const themeToggles = document.querySelectorAll('.theme-toggle');
  const html = document.documentElement;

  // 获取初始主题：优先使用 localStorage 中保存的，否则检查系统偏好
  function getInitialTheme() {
    const savedTheme = localStorage.getItem('theme');
    if (savedTheme) {
      return savedTheme;
    }
    // 检查系统主题偏好
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      return 'dark';
    }
    return 'light';
  }

  // 设置主题并更新图标显示
  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);
  }

  // 切换主题
  function toggleTheme() {
    const currentTheme = html.getAttribute('data-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    setTheme(newTheme);
  }

  // 初始化
  const initialTheme = getInitialTheme();
  setTheme(initialTheme);

  // 添加事件监听器
  themeToggles.forEach(button => {
    button.addEventListener('click', toggleTheme);
  });

  // 监听系统主题变化（仅在未手动设置时生效）
  if (window.matchMedia) {
    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
    mediaQuery.addEventListener('change', (e) => {
      if (!localStorage.getItem('theme')) {
        setTheme(e.matches ? 'dark' : 'light');
      }
    });
  }
})();

核心功能：

• 主题偏好持久化存储于 localStorage
• 首次加载时检测系统主题偏好
• 主题切换过程平滑流畅
• 图标显示状态自动更新
• 监听系统主题变化（当无手动设置时）

使用示例

在实现此设计系统时，请遵循以下步骤：

1. 从 CSS 变量开始 - 引入或定义所有颜色与间距变量（包括深色模式）
2. 采用终端窗口布局 - 将内容包裹在 terminal-window 组件中
3. 使用等宽字体 - 所有 UI 文本统一使用 JetBrains Mono
4. 遵循间距规范 - 一致地使用预定义的间距值
5. 使用语义化颜色 - 根据含义而非外观来应用颜色
6. 实现主题切换按钮 - 添加主题切换按钮及对应 JavaScript 逻辑
7. 保持一致性 - 在整个项目中复用组件模式
8. 测试响应式表现 - 确保在所有断点下布局正常
9. 双主题验证 - 确认亮色与暗色模式均能正确运行
10. 优化动画性能 - 保证过渡效果流畅且高效

该设计系统构建了一个统一、开发者友好的界面，既现代又符合终端使用者的操作习惯。完整的深色模式实现确保界面在任何光照条件下都能良好呈现。