界面质感
金属、宝石、光晕、翻滚、填充、硬投影和旋转描边按钮，作品卡、玻璃和纹理，每种都在常态、悬停、聚焦和按下时按真实对比度检查。
给按钮、卡片和面板加上有质感的外观，并且每种状态都做到位：液态金属、宝石和光晕胶囊按钮，文字翻滚加箭头旋转按钮，颜色滑入和硬投影按钮，旋转渐变描边，标签会展开的作品卡，磨砂玻璃和四种纹理。浏览器检查会渲染每个控件的常态、悬停、键盘聚焦和按下四种状态，按渲染出的像素测量每种状态下的文字对比度，并输出一张所有状态并排的对照图。
使用方法
主行动用一种醒目的质感，其他按钮用一种低调的；只在需要的地方加卡片、玻璃或纹理
用随包的 ui-finishes.css 搭建，用自定义属性设颜色，每个控件都用 <a> 或 <button>
运行 scripts/check.mjs，修掉所有对比度、聚焦和点击区域问题，再看 states.png
常见问题
渐变和玻璃上的对比度怎么测？
检查会给每个控件的每种状态拍两张截图，一张带文字，一张把文字设为透明，再拿文字像素和它背后的像素比较。所以宝石按钮的渐变、光晕、玻璃面板背后的照片都会算进去。第一次在我们自己的展示页上运行时，它发现橙色宝石按钮上的白字只有 3.98:1；组件改过之后现在能达到 4.5:1。
检查还会报告什么？
看不到的键盘聚焦、悬停时变化不到控件 1% 的按钮、小于 24 像素的点击区域（手机上小于 44 像素会给警告）、只在悬停时出现而在触屏上一直隐藏的卡片标签、玻璃上太淡的文字、用在无法聚焦元素上的质感、无视减少动效设置的过渡或动画，以及横向溢出。一个故意做坏的页面报出 15 个错误和 4 个警告。
需要 JavaScript 吗？
只有文字翻滚按钮用一小段脚本复制标签；没有脚本时按钮显示普通标签。其余都是 CSS。检查需要 Node.js 和 Chrome。
示例是真实的吗？
不是。Kinetik 和 Fieldnote 都是虚构的，价格也是编的。照片是为这些演示生成的。