DESIGN SYSTEM
无障碍焦点环Focus Ring / focus-visible
键盘导航时的品牌色焦点圈：鼠标点击不出现，Tab 键导航才出现。
效果预览
Tab 到我（键盘焦点）
聚焦的输入框
2px 描边 + 4px 16% 光晕 · 鼠标点击不出现
适合用在哪
所有项目。删掉 outline 又不加替代样式 = 键盘用户直接迷路。
容易踩的坑
- 父容器 overflow:hidden 裁掉了 outline，焦点环在卡片边缘只剩半圈。
- 焦点环与按钮底色对比度低于 3:1，键盘用户依然找不到焦点位置。
- 用 box-shadow 做焦点环，Windows 高对比模式下会被移除、完全不可见。
设计提示词 · Prompt
焦点环（Focus Ring / focus-visible）：用 :focus-visible 而非 :focus——鼠标点击不显示焦点环，键盘 Tab 导航才显示，两全其美。焦点环样式：2px 品牌色描边 + 3-4px 同色 16% 光晕（box-shadow:0 0 0 4px rgba(brand,.16)），圆角继承元素 + 2-4px。深色组件（深色按钮上的焦点环）改用白色。绝对禁止裸 outline:none——必须提供至少同等可见度的替代。焦点环颜色与元素底色对比要够；表单聚焦光晕与校验错误光晕要可区分（一个品牌色一个红色）。
Focus Ring / focus-visible: Use :focus-visible instead of :focus — no focus ring on mouse click, only on keyboard Tab navigation, the best of both worlds. Focus ring style: a 2px brand-color outline + a 3-4px same-color 16% glow (box-shadow: 0 0 0 4px rgba(brand,.16)), corner radius inheriting the element's + 2-4px. On dark components (a focus ring on a dark button) switch to white. Never use a bare outline:none — always provide a replacement with at least equal visibility. The focus ring color must contrast enough with the element's background; form focus glows and validation error glows must be distinguishable (one brand color, one red).
常见搭配
同一页面里经常和「无障碍焦点环」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-focusdemo"> <span class="d-focusbtn is-focused">Tab 到我（键盘焦点）</span> <span class="d-focusinput is-focused">聚焦的输入框</span> <span class="d-tiny">2px 描边 + 4px 16% 光晕 · 鼠标点击不出现</span> </div>