Visual UI Specification · 全站视觉与组件标准
本页是视觉展示页，不是 token 来源。语言只留 L5 / L6b，字体分工表、新增场景、展开箭头与感叹号均为值；其余值与 rev5 一致。
个人小工具集
复杂规则，
简单使用。
一个免费的小工具，先从 EE 估分开始。
简洁、高效，1 分钟算出 CRS 分数。
覆盖六因素计分与门槛检查，适应能力封顶 10 分。
© 2026 阿皓同学 · 支持：Ko-fi / mrhao（首页页脚不放 IRCC 免责）
小字标签与 48×1 金线，桌面 H1 为 56px（本页按移动 34px 展示），工具为列表行而非卡片按钮，语言为首页轻量文字式。
灰阶从左到右由浅到深，每格颜色块与文字在同一列，格宽与色条段宽一致，不会错位；移动端每列约 50px，文字用短名 + 色值两行。
机器可读说明：上面色条每段都带 data-name / data-hex / aria-label，下面这张表每一行本身就是“名字 — 色值 — 用途”完整的一条，即使去掉样式、只读文字，也能一一对应，不靠位置猜。
金色主角（常驻）：吸顶总分、名牌金字、工具 H1 上方 48×1 金线、CTA / 工具卡金箭头、语言 tray 选中钮内 inset 金线。焦点金只作瞬态，不计入装饰预算。禁金底、金按钮、金色正文。
红绿是信号色，不是装饰色：红 = 未通过 / 封顶，绿 = 已通过，#C8102E（饱和 92%，对比 5.88）、#067647（饱和 95%，对比 5.69）。低饱和版只在未来页面元素本身需要红绿点缀时才用，绝不用于通过 / 未通过信号。语义色在任何情况下只用在小圆点 / 小字 / 小 pill 里，不做大色块。
再降下去（例如绿到饱和 34%）会发灰、失去“通过”信号，所以停在这一档。
工具标题 32px 衬线 400
分区标题 18px / 700
正文 16px / 1.6
次要文字 14px · 标签 14px / 700
小字 12px / 600 · 法律 11px
栈内顺序即分工：西文在前、中文在后，浏览器按字形自动分工；数字一律用西文栈 + tabular-nums。系统字体即可，不加载网络字体。
卡片内边距：移动 16px / 桌面 24px · 卡片间距 16px · 芯片组 gap 8px · 芯片内边距 12px 16px · CTA 内边距 12px 24px（高度 ≥48px）· 吸顶按钮内边距 12px 16px
下方滚动框内是 sticky 演示：向下滚动，分数条会停在框顶，页眉不会吸顶。吸顶：左黑右浅全程渐变 + 镜像金属照片，明细钮调暗一档。
步进器：连体式，按钮 44×44，值框 64×44，−/+ 字号 18px。
chip 选中：浅灰渐变 + 品牌灰边框，内边距 12px 16px。
开关：68×44，旋钮 36px 银径向渐变；用法由场景定。
下拉：全宽字段，高 44px，内边距 0 12px。
滚动占位文字：吸顶演示需要滚动内容，分数条在滚动时停在框顶。
滚动占位文字：第二段。
滚动占位文字：第三段。
双语只有两种语言，单元素切换足够，点击次数与双钮同为 1 次，页眉省约一半宽。页面语言本身就是当前态，L5 按钮文字即目标语言，L6b 当前项直接可见。
无框、无底，13px 品牌灰，最小高 44px，内边距 0 8px；当前中文时写 EN，当前英文时写中文。适用于首页页眉及默认页眉。
一个 pill 里同时写中文 / EN，控件只有一个、点击一次；容器白底、边框 1px #C9CDD2、圆角 999、高 44px、内边距 4px；当前项背景 #EFF1F4、墨字 700、inset 金线，未选中项透明底、品牌灰。当前语言永远可见。适用于需要更强可按性与当前态可见性的页眉与工具页。三语及以上时本节须重审。
本节值按 rev5 的 token 画。年龄为步进器，滚轮用于未来长列表 / 日期类字段。
请填写雇主名称
规则：字段高 44px、圆角 12、边框 #C9CDD2、内边距 0 12px；焦点金边 2px；错误红边 + 12px 红字提示，不用弹窗报错。
规则：抽屉白底、顶部圆角 16；头高 44px，取消灰字、确定品牌灰；滚轮行高 44px，选中行 #F2F4F7 底 + 墨色 700，上下行灰字，顶部和底部用白到透明的渐变遮罩做淡出。年龄、日期、长列表都可用同一套。
当前输入会被清空，回到默认分数。
已恢复默认（Toast：深底 pill，居中偏下）
规则：弹窗白卡、圆角 16、内边距 24px、遮罩用墨色半透明；底部抽屉与滚轮同款；Toast 深底 pill，不遮挡主操作。
● 已通过 ● 未通过（结果 pill：小圆点 + 语义色文字，信号色不变）
暂无提分建议（空态：只给一句话，不留空白区）
加载骨架：灰底 #EFF1F4 条，高 16px、圆角 8、间距 8px。
统一原则：控件尾端原则。箭头永远在所属控件的尾端，不由标题长短、语言、感叹号有无决定。感叹号永远在标题旁，不改变箭头位置。
整行按钮，次表面 #F2F4F7 底，圆角 12，内边距 12px 16px，最小高 44px；标题 flex:1 min-width:0，箭头 flex:none 宽 16px，换行时箭头对齐第一行。
整行最小高 44px，悬停底色次表面 #F2F4F7、圆角 8；感叹号在标题旁，箭头在行最右，点感叹号只出说明、不折叠。一级标题旁感叹号视觉圆 24px / 字 13px，字段标签旁 22px / 字 12px，触摸区均为 44×44。标题短、标题长、有无感叹号，均不改变箭头位置。
内容宽按钮，按钮宽即内容宽，箭头在按钮右端是结构必然，不是另一种位置规则。
纯文本标题本身不带箭头；可折叠标题必须先做成全宽行，再把箭头放行最右。静态标题行无箭头、无折叠，不得画假箭头。
v2 rev5 · 2026-10-26 · 本页引用同目录 tokens.css，不复制 token 值。语言只留 L5 / L6b，字体分工表与新增场景均为值。