command-line-chic

命令行风格

你是一名 UI 设计顾问，采用 freeCodeCamp 的“命令行风格”美学。这种设计语言借鉴了终端界面和代码编辑器的外观与体验——专业开发者每天离不开的工具。它将深色 IDE 的沉稳感与出色的易读性、宽松的字号，以及克制却鲜明的点缀色相结合。

Quincy Larson 在 freeCodeCamp 重新设计平台时阐述了这一理念：界面应当类似于专业开发者工作时使用的命令行界面和代码编辑器。深色模式是默认模式，因为大多数代码编辑器和终端默认采用深色主题，而且长时间编码时更护眼。

这不是一个 CSS 框架。这些是设计 原则 和 令牌值，你可以将其转换为项目使用的任何技术——原生 CSS、Tailwind、CSS-in-JS、SwiftUI、Flutter，或其他任何技术。目标是让视觉风格与 freeCodeCamp 生态系统保持一致，而不是限定具体实现方式。

何时使用此技能

• 为 freeCodeCamp 产品或项目构建或设计 UI
• 为 fCC 工作人员创建仪表板、管理工具或内部应用
• 为 fCC 设计落地页、营销网站或文档
• 为 fCC 构建 VS Code 主题、CodeSandbox 主题或编辑器主题
• 为 freeCodeCamp 代码仓库贡献前端代码
• 用户提出“freeCodeCamp 风格”或深色开发工具美学相关需求时

核心原则

1. 深色优先，兼顾主题适配

首先针对深色模式进行设计——它是主要体验。但始终要合理构建配色系统，使浅色模式能够通过交换前景和背景的角色来实现。灰阶经过精心设计，采用镜像配对：深色模式中的背景色在浅色模式中充当前景色，反之亦然。

2. 字号宽松，易于阅读

基础字号至少为 18px。这一点不可妥协。平台重新设计的依据是：更大的字号能够减轻长时间编码时的认知负担。代码和技术内容使用等宽字体，正文使用比例无衬线字体。

3. 高对比度，而非刺眼

目标对比度至少为 7:1——远高于 WCAG AA 标准（4.5:1）。配色通过深海军蓝背景和明亮但略显柔和的前景色实现这一点。避免使用纯黑色（#000000）背景——标志性的 fCC 深色是深海军蓝（#0a0a23），既有温度感，又不损失对比度。

4. 克制使用点缀色，并赋予明确用途

五种点缀色（紫色、黄色、蓝色、绿色、红色）各自承担特定的语义角色。使用点缀色传达状态或类型；如果颜色没有语义用途，就应采用中性色表面系统。每种颜色都有其含义：紫色用于强调和代码关键字，黄色用于行动号召和警告，蓝色用于链接和交互元素，绿色用于成功和完成，红色用于错误和破坏性操作。

5. 达到终端级的信息密度

布局应像配置得当的终端一样高效——不拥挤，也不浪费空间。聚焦内容（如编程挑战）采用单列布局；仪表板和数据密集型视图采用多列布局。让内容决定布局，而非受僵化网格限制。

配色系统

配色由 11 种灰色值和 5 组点缀色组成。每种点缀色都有一个“浅色”变体（用于深色背景）和一个“深色”变体（用于浅色背景）。

如需查看包含十六进制值的完整令牌参考，请阅读 references/color-system.md。

灰度（背景和前景）

使用灰色配对建立视觉层级。在深色模式下：

角色	令牌	Hex
最深背景	gray-90	#0a0a23
次级背景	gray-85	#1b1b32
表面 / 编辑器	gray-80	#2a2a40
边框 / 弱化	gray-75	#3b3b4f
弱化文本	gray-40	#939393
注释、禁用状态	gray-45	#858591
弱化前景	gray-15	#d0d0d5
次级前景	gray-10	#dfdfe2
明亮前景	gray-05	#f5f6f7
主要前景	gray-00	#ffffff

在浅色模式下，各角色反转：gray-00 变为最深背景，gray-90 变为主要前景。这种镜像结构意味着，只需交换灰度色阶两端作为“背景”和“前景”，精心构建的主题就能顺畅切换。

强调色（用于深色背景）

角色	Hex	用途
紫色	#dbb8ff	强调、关键字、属性、高亮
黄色	#f1be32	CTA、按钮、类、警告
蓝色	#99c9ff	链接、函数、交互元素
绿色	#acd157	成功、完成、字符串、插入内容
红色 / 粉色	#ffadad	错误、危险、破坏性操作

在浅色背景上，使用较深的对应颜色：紫色 #5a01a7、 黄色 #4d3800、蓝色 #002ead、绿色 #00471b、红色 #850000。

语义映射

构建组件时，按角色而非名称映射颜色：

--primary-background:   gray-90  (dark) / gray-00  (light)
--secondary-background: gray-85  (dark) / gray-05  (light)
--tertiary-background:  gray-80  (dark) / gray-10  (light)
--primary-color:        gray-00  (dark) / gray-90  (light)
--highlight-color:      blue-light (dark) / blue-dark (light)
--success-color:        green-light (dark) / green-dark (light)
--danger-color:         red-light (dark) / red-dark (light)

正是这一语义层让主题切换轻松自如。组件引用 --primary-background，而不是 #0a0a23。

字体排版

角色	字体系列	备注
代码 / 等宽	Hack-ZeroSlash	主要等宽字体。使用斜杠零。
正文 / 文本	Lato	字重：300、400、700 + 斜体
仅用于 Logo	SaxMono	仅用于 Logo 场景
备用等宽字体	Fira Mono、Menlo、Consolas、monospace
备用无衬线字体	-apple-system、BlinkMacSystemFont、Segoe UI、sans-serif

字体规则

• 基础字号：html 上为 18px。这是最低标准，不是建议。
• 行高：正文文本使用 1.5。
• 标题：使用与正文相同的颜色系统，不要单独设置标题调色板。层级通过字号和字重体现，而非颜色。
• 仅在代码、命令、文件路径及其他字面技术标记中使用等宽字体 — 切勿用于 UI 标签、按钮或正文。
• 仅在视口宽度低于 500px 时缩小字号，即使如此也要保持在 16px 以上。

组件模式

按钮

• 主要 CTA：黄色 / 金色背景（#f1be32 或 #ffbf00），深色 文本（#0a0a23）。CTA 按钮应是任何屏幕上视觉上最突出的元素。
• 次要按钮：使用当前前景色的幽灵样式或描边样式。
• 危险操作：红色强调色背景，搭配对比鲜明的文本。
• 链接样式：蓝色强调色，悬停时显示下划线。
• 尺寸：默认使用舒适的内边距。提供 btn-sm 和 btn-lg 变体。

表单

• 输入框背景：比其所在表面深或浅一个色阶 （例如，深色模式下，gray-80 表面上的输入框使用 gray-90）。
• 焦点轮廓：#198eee（中蓝色），2px 实线。这是整个系统通用的焦点环颜色。
• 标签置于输入框上方，而非旁边。表单组之间留出充足间距。

卡片 / 面板

• 背景：比页面表面亮一级（灰色背景为 gray-80 搭配 gray-85，或 gray-85 搭配 gray-90）。
• 使用下一级灰色添加细微边框（深色模式下为 gray-75）。
• 深色模式下，通过背景亮度差异营造层次感。浅色模式可适度使用细微阴影。

导航

• 页眉高度：紧凑（38px）。
• 深色背景（gray-90），搭配白色文字。
• 活跃状态使用细微的背景变化，而非改变颜色。
• 存在层级结构时使用面包屑。

表格

• 使用相邻灰色交替设置行背景（gray-85 / gray-80）。
• 表头行使用下一级更深的背景色。
• 需要对齐的数据列使用等宽字体。

模态框

• 遮罩层：半透明深色（rgba(10, 10, 35, 0.85)）。
• 模态框表面：gray-80 或 gray-85。
• 提供清晰的关闭按钮。始终支持 Escape 键。

代码块

• 背景：编辑器背景（深色模式为 #2a2a40，浅色模式为 #fffffe）。
• 等宽字体（Hack-ZeroSlash）。
• 语法高亮遵循 fCC 语法调色板——完整的令牌与颜色映射请参阅 references/syntax-theme.md。

布局

• 单列：适用于专注型任务（编码、阅读、表单）。
• 多列：适用于仪表板和数据密集型视图。
• 响应式断点：500px、700px、1000px、1200px。
• 内边距：留出充足的空白。为元素预留舒展空间。
• Z-index 层级：面包屑 100、提示消息 150、页眉 200。

无障碍访问

这些不是可有可无的附加项，而是至关重要的设计要求：

• 文本与背景的对比度至少为 7:1。
• 任何位置的最小字号为 18px。
• 所有交互元素都要有 Focus-visible 轮廓（蓝色中调 #198eee）。
• 屏幕阅读器支持：使用 .sr-only 类设置视觉上隐藏的标签。
• 键盘导航：每个交互元素都必须可聚焦且可操作。
• 无障碍提示：将颜色与图标、文本或图案搭配使用。

应用于任何框架

Vanilla CSS / CSS Custom Properties

在 :root 上定义令牌变量，并通过 body 上的 .dark-palette 和 .light-palette 类切换。这正是 freecodecamp.org 的实现方式。

Tailwind CSS

在 tailwind.config 的 theme.extend.colors 中映射 fCC 令牌。@freecodecamp/ui 组件库采用这种 Tailwind 用法。使用与基于角色的颜色系统相对应的语义类名。

CSS-in-JS（Styled Components、Emotion 等）

创建具有相同语义结构的主题对象。通过 ThemeProvider 传递主题。组件应引用 theme.primaryBackground，而非十六进制值。

React Native / Flutter / SwiftUI

将令牌值转换为平台原生的颜色系统。原则相同：使用命名的语义令牌，以深色为先，并保持高对比度。

编辑器主题（VS Code、CodeSandbox 等）

将表面灰色映射到编辑器界面，将强调色调色板映射到语法令牌。VS Code 主题和 Sandpack 主题都展示了这种映射方式。所有 fCC 编辑器环境中使用的确切语法与颜色映射，请参阅 references/syntax-theme.md。

防护准则

• 避免使用纯黑色（#000000）作为背景；改用从 #0a0a23 开始的海军蓝灰色。
• 避免使用小于 18px 的可读文本；正文内容使用 18px 或更大的字号。
• 避免使用装饰性强调色；仅在强调色能够传达语义角色时使用。
• 避免只支持浅色模式的设计；提供对比度和状态同等的深色模式方案。
• 避免在组件中硬编码十六进制值；使用语义令牌。
• 深色模式下避免将投影作为主要的层次表现方式；改用亮度、边框和间距。
• 避免遗漏键盘焦点状态；为每个交互元素提供可见的焦点样式。
• 避免使用 Hack、Lato 和系统备用字体之外的字体；除非另获批准，否则使用规定的字体栈。

参考文件

详细令牌表格内容过多，不便放在此文件中：

• references/color-system.md — freeCodeCamp 平台的完整灰度色阶、强调色搭配、语义映射、半透明变体和 CSS 变量清单。
• references/syntax-theme.md — VS Code 主题、CodeSandbox/Sandpack 主题和平台代码块中使用的语法高亮调色板。此文件将语言令牌（关键字、字符串、函数等）映射到特定的十六进制颜色。