LinkCrux 原型设计系统
源自真实产品的统一规范 —— 颜色、字体、组件、token 一处定义，全局复用， 让原型与产品视觉一致，让评审一目了然。
清晰
Clarity
白卡为主、低饱和灰阶，信息层级一眼分明。
克制
Restraint
克制的圆角与阴影，紧凑字号，不喧宾夺主。
一致
Consistency
一套 token 贯穿全局，杜绝风格分叉。
聚焦
Focus
蓝紫主色只用于强调与操作，引导视线。
02 · Color
色彩体系
蓝紫主色用于强调与操作，功能色表达状态，中性灰阶承载文字与背景。
主色 / 功能色
#4c60fa
主色
primary#3ccb7f
成功
success#ff692e
警告
warning#e62e05
危险
danger#a3a3a3
信息
info中性灰阶
#252931
标题文字
text-title#565960
常规文字
text-regular#898b8f
次要文字
text-secondary#bcbdc0
占位文字
text-placeholder#dcdee1
基础边框
border-base#f3f5f9
页面底色
bg-page03 · Typography
字体排版
中文优先字体栈，紧凑字号阶梯（14/12 主导），四档字重。
字号阶梯
灵核数智 LinkCrux标题主视觉
text-3xl32px灵核数智 LinkCrux区块标题
text-2xl24px灵核数智 LinkCrux卡片标题
text-xl20px灵核数智 LinkCrux小标题
text-lg18px灵核数智 LinkCrux强调正文
text-md16px灵核数智 LinkCrux正文默认
text-base14px灵核数智 LinkCrux辅助文字
text-sm13px灵核数智 LinkCrux标签/注释
text-xs12px字重
金箍棒
Regular 400金箍棒
Medium 500金箍棒
Semibold 600金箍棒
Bold 70004 · Shape
圆角与阴影
克制的圆角（4/8/12 主导）与轻投影，营造干净的卡片层级。
圆角 Radius
sm2pxbase4pxmd6pxlg8pxxl12pxfull999px阴影 Shadow
shadow-focusshadow-cardshadow-popover05 · Components
通用组件
从 @/components/ui 直接 import 复用，变体心智对齐 Element Plus，用本系统 token 着色。
Button · 按钮
type · size
Tag · 标签
5 variants
主色已修复处理中未修复伪需求
Input · 输入框
focus ring
Badge · Avatar · Progress
misc
59+新
灵核数+9
68%
组合示例 · 问题工单卡片
登录页验证码偶发不显示处理中
负责人 @灵吉 · 预计 06-10 修复
06 · Tokens
Token 速查
所有取值的唯一出处，定义于 src/app/globals.css 的 @theme 块。
颜色
primary#4c60fasuccess#3ccb7fwarning#ff692edanger#e62e05text-title#252931圆角 / 字号
radius-base4pxradius-lg8pxradius-xl12pxtext-base14pxtext-xs12px复用约定：颜色只用 token（如 bg-primary）、 基础控件优先 import { Button } from "@/components/ui"。 详见 src/components/ui/README.md。