862 行 UI 设计文档，浓缩成 7 张图

做新项目还在从配色板开始想？临时凑 Modal 宽度？
我把 1862 行的 UI 文档，压成 7 张图。
配色：3 套模板——SaaS 稳重蓝（#2563EB 主色）、电商活力橙+促销粉、暗色 #0F0F0F→#404040 四层叠加。普通文字对比度 ≥ 4.5:1，过不了 WCAG 2.2 直接打回。懒得算用 WebAIM Contrast Checker。
设计令牌：间距统一 8px 基准（4/8/12/16/24/32/48/64），字号 7 级阶梯（14/16/18/22/28/36/48），圆角别超 4 种。改一处，全局生效。完整 Tailwind 间距系统 参考。
组件：Button 5 尺寸 5 变体（primary/secondary/outline/ghost/destructive），Input 4 状态（default/focus/error/disabled），Modal 5 宽度（384/448/512/576/672px）。focus 必须 3px ring，error 必须红边+文案。
响应式：Mobile First，6 断点（640/768/1024/1280/1536）。先做手机再往上加。流式字体一行搞定——clamp(1.5rem, 4vw, 3rem)。完整 MD3 响应式布局 参考。
动效：按钮 100ms、悬停 200ms、侧栏 300ms、模态 500ms。进入 ease-out，退出 ease-in。只动 transform / opacity，别动 width / height——后者掉帧。
📥 7 张原图怎么拿？ 👉 关注公众号 👉 私信「UI」 👉 自动发文件
设计师、前端、产品经理，收藏这套图就够了。
下次开新项目——不需要从零开始。
关注 + 私信 ui+ 发你
#UI设计 #设计系统 #前端开发 #配色 #响应式设计 #设计规范
#TailwindCSS #设计灵感 #设计师日常 #产品经理