名称： terminal-ui-design-system
描述： 创建受终端启发的用户界面，采用 macOS 风格窗口装饰、等宽字体和温暖的配色方案。适用于构建开发者工具、代码市场、技术文档网站或任何受益于终端/命令行美学的界面。提供完整的设计系统规范，包括配色方案、字体、间距、组件和 CSS 实现细节。

终端 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">
      <!-- 徽标、命令、操作 -->
    </div>
  </div>
</nav>

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

徽标：
- 状态指示器：绿点 (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%，采用弹性列布局
- 悬停：边框变为主色，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
- 图标大小：`