CRT 新粗野终端界面

为什么还需要一个"丑"的界面设计系统

现代 Web 界面在追求精致感的过程中逐渐趋同：圆角、柔和阴影、渐变色、留白。这种审美让界面看起来安全，但也失去了个性和信息密度。当你需要一个具有强烈视觉冲击力、唤起复古计算记忆的终端应用、数据看板或工具型产品时，常规的设计系统往往力不从心。

crt-ui 要解决的正是这个问题。它不是要做一个"好看"的界面，而是做一个有辨识度的界面——用新粗野主义的直角、硬边阴影和等宽字体，构建一种"丑而美"的视觉语言。

设计系统的运作方式

crt-ui 的核心是一套完整的 Design Token 体系，分为色彩、字体、间距和动画四个维度。

色彩方面，系统以 --ink 和 --paper 作为绝对主色对，确保高对比度。唯一的强调色 --signal 用于 CTA 按钮、光标和关键数字。语义色被严格克制：--human 绿和 --ai 黄仅在需要区分身份时使用。所有背景一律纯色，禁止渐变填充——唯一的例外是网格纹理和雷达扫描的透明度渐变。

字体方面，所有 UI 文字默认使用 monospace，包括按钮和标签。Impact 字体族仅用于 H1 级别的大标题，制造视觉锚点。字重走极端化路线：要么 400，要么 800-900，没有中间值。字距遵循反向规则：大字号用负字距紧凑，小字号用正字距疏朗，营造标签感。

边框与阴影是这套系统最鲜明的特征。卡片使用 3px solid var(--ink) 边框，阴影偏移量是纯色无透明度的硬偏移，模糊半径始终为 0。所有圆角均为 0，唯一的例外是雷达扫描组件。

动画系统刻意追求"跳帧"感。所有循环动画使用 steps() 而非 ease，入场动画时长仅 0.22s，循环动画 1-2.3s。hover 效果使用 translate() 位移而非颜色变化。

适用边界与注意事项

这套设计系统适合终端模拟器、技术工具、数据看板、聊天应用等需要信息密度优先和复古美学的场景。它不适合面向大众消费者的品牌官网、需要柔和体验的移动端应用，或者强调品牌调性一致性的企业级产品。

需要注意的几个约束：

• 强调色 --signal 只能用于 CTA、光标、关键数字和警示文字，不能滥用
• 正文必须使用等宽字体，不能混用衬线或无衬线
• 圆角必须为 0（雷达组件除外）
• 阴影必须为硬偏移，不能有模糊
• 动画必须使用 steps()，不能使用平滑过渡

如果你需要为一个工具型产品打造具有极强视觉辨识度的界面，crt-ui 提供了从色彩到组件的完整规范。但如果你的目标用户期望"精致""柔和""流畅"的体验，这套系统可能正好相反。