refactoring-ui by wondelai/skills
npx skills add https://github.com/wondelai/skills --skill refactoring-ui一种实用且观点鲜明的 UI 设计方法。在生成前端代码、评审设计或提供视觉改进建议时,请应用这些原则。
首先使用灰度设计。最后再添加颜色。 这迫使你在依赖颜色作为辅助手段之前,通过间距、对比度和排版来建立正确的层次结构。
基础: 优秀的 UI 不在于创造力或天赋——而在于系统。对间距、字体、颜色和阴影使用受限的尺度,可以产生始终如一的专业效果。从过多的留白开始,然后再移除。细节稍后处理——在布局和层次结构有效之前,不要纠结于图标、阴影或微交互。
目标:10/10。 在评审或创建 UI 设计或前端代码时,根据对以下原则的遵守程度,给出 0-10 分的评分。10/10 表示完全符合所有准则;较低的分数表示有待解决的差距。始终提供当前分数以及达到 10/10 所需的具体改进措施。
无需设计师即可构建专业界面的七项原则:
核心概念: 并非所有内容都同等重要。通过三个杠杆创建层次结构:尺寸、粗细和颜色。
为何有效: 当每个元素都争夺注意力时,就没有任何元素能脱颖而出。刻意弱化次要内容,通过对比使主要内容更突出。
关键见解:
产品应用:
| 上下文 | 层次结构技巧 | 示例 |
|---|---|---|
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 表单字段 |
| 弱化标签,强调值 |
| 小号大写标签位于大号数值文本上方 |
| 导航 | 主导航粗体,次导航较浅 | 活动链接用深灰-900,非活动链接用灰-500 |
| 卡片 | 标题大号,元数据小号且浅色 | 卡片标题 20px 粗体,日期 12px 灰-400 |
| 仪表盘 | 关键指标大号,上下文小号 | 收入"$42,300"大号,"vs last month"小号 |
| 表格 | 弱化表头,强调单元格数据 | 表头小号大写灰色,数据正常粗细 |
设计模式:
道德边界: 不要使用层次结构技巧来隐藏重要信息,如定价、条款或取消选项。
参见:references/advanced-patterns.md 了解交互状态和高级组件模式。
核心概念: 使用受限的间距尺度,而非任意值。间距定义了关系——靠得更近的元素关联性更强。
为何有效: 任意间距(padding: 13px)会造成不一致。固定的尺度迫使你做出深思熟虑的决策,并产生和谐的布局。充足的间距感觉高级;密集的间距感觉压抑。
关键见解:
max-w-prose 或约 65ch)产品应用:
| 上下文 | 间距策略 | 示例 |
|---|---|---|
| 图标 + 标签 | 紧密耦合(4px) | 小间隙保持它们在视觉上相连 |
| 表单字段 | 相关元素(8-16px) | 输入框及其标签紧密耦合 |
| 卡片区域 | 区域分隔(24px) | 标题块、内容块、页脚块 |
| 页面区域 | 主要区域(48-64px) | 英雄区、功能、推荐语、页脚 |
| 容器宽度 | 限制以适应内容 | 文本用 max-w-prose,表单用 max-w-md |
CSS 模式:
p-1(4px) p-2(8px) p-4(16px) p-6(24px) p-8(32px) p-12(48px) p-16(64px)max-w-prose(65ch) max-w-md(28rem) max-w-lg(32rem) max-w-xl(36rem)gap-2,区域分隔用 gap-6道德边界: 不要使用间距来隐藏重要的 UI 元素,如退订按钮或隐私控制。
参见:references/advanced-patterns.md 了解响应式断点策略。
核心概念: 使用模块化的字体尺度,根据上下文限制行高,并最多限制使用两种字体族。
为何有效: 模块化尺度(例如,1.25 比例)创造自然的视觉节奏。标题的紧凑行高和正文的宽松行高提高了不同上下文下的可读性。
关键见解:
产品应用:
| 上下文 | 排版规则 | 示例 |
|---|---|---|
| 英雄区标题 | 36px,紧凑行高(1.1),粗体 | 大型有冲击力的陈述 |
| 区域标题 | 24px,行高 1.25,半粗体 | 清晰的分区标识 |
| 正文文本 | 16px,行高 1.75,正常粗细 | 舒适的阅读体验 |
| 说明文字/标签 | 12-14px,行高 1.5,中灰色 | 次要信息 |
| 代码/数据 | 等宽字体,14px,宽度一致 | 表格数据对齐 |
CSS 模式:
text-xs(12px) text-sm(14px) text-base(16px) text-lg(18px) text-xl(20px)font-normal(400) font-medium(500) font-semibold(600) font-bold(700)leading-tight(1.25) leading-normal(1.5) leading-relaxed(1.75)道德边界: 不要使用微小的字体大小来向用户隐藏条款、条件或费用。
参见:references/advanced-patterns.md 了解文本截断和响应式排版。
核心概念: 构建一个系统化的调色板,每种颜色包含 5-9 个色阶,为灰色添加微妙的饱和度,并首先使用灰度设计。
为何有效: 随机颜色会冲突。具有预定义色阶的系统化调色板确保整个界面的一致性。HSL 调整创造出感觉自然的更亮和更暗的变体。
关键见解:
#111827)而不是纯 #000000#64748b;暖色调 UI:黄/棕色调如 #78716c)#374151(灰-700),而不是更浅的灰色,以确保文本可读产品应用:
| 上下文 | 颜色策略 | 示例 |
|---|---|---|
| 主色调板 | 9 个色阶(50-900)用于主要品牌色 | 按钮用蓝-500,背景用蓝-100 |
| 灰色调板 | 与 UI 温度匹配的饱和灰色 | 科技产品使用带蓝色调的冷灰色 |
| 语义颜色 | 成功、警告、错误各有一系列色阶 | 成功用绿-500,错误用红-500 |
| 文本颜色 | 三个级别:深色、中等、浅色 | text-gray-900, text-gray-600, text-gray-400 |
| 无障碍对比度 | 测试所有文本/背景组合 | #374151 在白色上 = 10.5:1 对比度 |
CSS 模式:
text-gray-900(深色) text-gray-600(中等) text-gray-400(浅色)bg-blue-50,主要操作用 bg-blue-500border-gray-200,更强的边框用 border-gray-300道德边界: 不要仅使用颜色来传达信息——始终与文本或图标配对以确保无障碍性。
参见:references/theming-dark-mode.md 了解深色调板创建和主题实现。
核心概念: 使用阴影尺度来传达高度。小阴影用于略微抬高的元素,大阴影用于浮动元素。
为何有效: 阴影创造了一种物理深度的感觉,帮助用户理解哪些元素是可交互的,哪些是浮在表面上方的,哪些是背景的一部分。
关键见解:
产品应用:
| 上下文 | 阴影级别 | 示例 |
|---|---|---|
| 按钮 | shadow-sm(轻微抬高) | 略微高于页面表面 |
| 卡片 | shadow-md(清晰分离) | 内容分组并从背景中抬起 |
| 下拉菜单 | shadow-lg(浮动) | 菜单清晰地浮动在内容上方 |
| 模态框 | shadow-xl(最高高度) | 覆盖层明显与页面分离 |
| 扁平替代方案 | 边框 + 背景偏移 | 较浅的上边框,较深的下边框 |
CSS 模式:
shadow-sm: 0 1px 2px rgba(0,0,0,0.05)shadow-md: 0 4px 6px rgba(0,0,0,0.1)shadow-lg: 0 10px 15px rgba(0,0,0,0.1)shadow-xl: 0 20px 25px rgba(0,0,0,0.15)道德边界: 不要使用过多的阴影或视觉强调来吸引对欺骗性 UI 元素(暗黑模式)的注意。
参见:references/advanced-patterns.md 了解交互状态和高度层次结构。
核心概念: 将图像视为设计元素,而非事后考虑。有意识地调整图标大小,并使用叠加层确保图像上文本的可读性。
为何有效: 尺寸不当的图标看起来别扭。未样式化的图像破坏了视觉一致性。有意识的图像处理(叠加层、object-fit、边框半径)使界面感觉精致。
关键见解:
object-fit: cover 并有意识地裁剪产品应用:
| 上下文 | 图像/图标技巧 | 示例 |
|---|---|---|
| 英雄区图像 | 叠加半透明渐变 | 在任何照片上文本都可读 |
| 头像 | 一致的大小、圆角、备用首字母 | 40px 圆形,object-fit cover |
| 功能图标 | 一致的大小、粗细和颜色 | 24px 描边图标,灰-500 |
| 空状态 | 自定义插图 + 清晰的行动号召 | 友好的插图配以"开始使用"按钮 |
| 缩略图 | 固定长宽比,使用 object-fit cover | 16:9 卡片,无扭曲 |
CSS 模式:
object-fit: cover 配合固定的 aspect-ratio 以实现一致的图像显示w-4 h-4,导航中用 w-6 h-6,功能图标用 w-8 h-8bg-gradient-to-t from-black/60 to-transparent 用于图像上的文本道德边界: 不要使用误导性的图像或图标来歪曲功能或产品能力。
参见:references/advanced-patterns.md 了解图像处理、图标使用和空状态。
核心概念: 不要将所有内容都居中。使用对齐、重叠和强调变化来创造引人入胜的构图。
为何有效: 左对齐文本更容易阅读。变化的布局使用户保持参与感。打破僵化的框框使设计感觉动态且有意图。
关键见解:
产品应用:
| 上下文 | 布局策略 | 示例 |
|---|---|---|
| 英雄区 | 居中文本,充足的间距 | 短标题 + 副文本 + 单一行动号召 |
| 功能网格 | 左对齐文本,一致的卡片大小 | 3 列网格,包含图标 + 标题 + 描述 |
| 博客动态流 | 变化的卡片大小以突出重点 | 第一篇帖子大,后续帖子在 2 列网格中 |
| 侧边栏 | 比主要内容窄,背景更浅 | 导航或筛选器宽度为 240-320px |
| 内容页面 | 受限宽度,左对齐 | max-w-prose 居中容器,文本左对齐 |
CSS 模式:
text-left,仅对英雄区和短标题使用 text-centergrid grid-cols-3 gap-6max-w-4xl mx-autooverflow-hidden,配合延伸到边缘的 object-fit: cover 图像道德边界: 不要使用布局技巧来隐藏或模糊重要的用户选择,如选择退出或数据权限。
参见:references/advanced-patterns.md 了解响应式断点和复杂布局模式。
| 错误 | 为何失败 | 修复方法 |
|---|---|---|
| "看起来业余" | 留白不足,宽度不受限制 | 增加更多留白,限制内容宽度 |
| "感觉扁平" | 元素之间没有深度区分 | 添加微妙的阴影,在区域添加 border-bottom |
| "文本难以阅读" | 行高不佳,过宽,对比度低 | 增加行高,限制宽度,提高对比度 |
| "所有东西看起来都一样" | 元素之间没有视觉层次 | 在主要和次要元素之间变化尺寸/粗细/颜色 |
| "感觉杂乱" | 各处间距相等,没有分组 | 将相关项目分组,增加组之间的间距 |
| "颜色冲突" | 没有系统的随机颜色选择 | 降低饱和度,使用更多灰色,将调色板限制在系统内 |
| "按钮不突出" | 与周围元素对比度低 | 增加与周围环境的对比度,添加阴影 |
| 使用任意值 | 像 13, 17, 23 这样的 px 值造成不一致 | 坚持使用间距和字体尺度 |
审核任何 UI 设计:
| 问题 | 如果否 | 行动 |
|---|---|---|
| 眯眼看(模糊测试)时层次结构清晰吗? | 元素在争夺注意力 | 增加主要和次要元素之间的对比度 |
| 它在灰度模式下有效吗? | 依赖颜色来建立层次结构 | 加强尺寸/粗细/间距的层次结构 |
| 有足够的留白吗? | 可能没有——大多数设计都太密集 | 增加间距,尤其是组之间的间距 |
| 标签是否比其值更弱化? | 标签在与数据竞争 | 使标签更小、更浅或使用小号大写 |
| 间距是否遵循一致的尺度? | 任意间距造成视觉噪音 | 仅使用 4/8/16/24/32/48/64 尺度 |
| 文本宽度是否受限以确保可读性? | 长行导致阅读疲劳 | 对文本块应用 max-w-prose(约 65ch) |
| 颜色是否有足够的对比度? | 无障碍性失败,难以阅读 | 使用 WCAG 对比度检查器测试,在白色上使用灰-700+ |
| 阴影是否与高度相匹配? | 元素浮动在错误的视觉层级 | 根据元素用途匹配阴影尺度 |
此技能基于 Adam Wathan 和 Steve Schoger 的实用设计指南。如需包含视觉示例的完整系统:
Adam Wathan 是一名全栈开发人员,也是 Tailwind CSS 的创建者,Tailwind CSS 是最流行的实用优先 CSS 框架之一。Steve Schoger 是一位视觉设计师,以其实用的设计技巧和插图而闻名。他们共同创建了 Refactoring UI,以教授开发人员如何使用系统化、可重复的技术来设计更好的界面,而不是依赖与生俱来的艺术天赋。他们的方法强调受限的设计系统——间距、排版、颜色和阴影的固定尺度——这些系统无需设计背景即可产生专业效果。
每周安装量
723
代码仓库
GitHub 星标数
260
首次出现
Jan 29, 2026
安全审计
安装于
opencode618
codex601
gemini-cli599
claude-code592
cursor576
github-copilot564
A practical, opinionated approach to UI design. Apply these principles when generating frontend code, reviewing designs, or advising on visual improvements.
Design in grayscale first. Add color last. This forces proper hierarchy through spacing, contrast, and typography before relying on color as a crutch.
The foundation: Great UI isn't about creativity or talent -- it's about systems. Constrained scales for spacing, type, color, and shadows produce consistently professional results. Start with too much white space, then remove. Details come later -- don't obsess over icons, shadows, or micro-interactions until the layout and hierarchy work.
Goal: 10/10. When reviewing or creating UI designs or frontend code, rate it 0-10 based on adherence to the principles below. A 10/10 means full alignment with all guidelines; lower scores indicate gaps to address. Always provide the current score and specific improvements needed to reach 10/10.
Seven principles for building professional interfaces without a designer:
Core concept: Not everything can be important. Create hierarchy through three levers: size, weight, and color.
Why it works: When every element competes for attention, nothing stands out. Deliberate de-emphasis of secondary content makes primary content powerful by contrast.
Key insights:
Product applications:
| Context | Hierarchy Technique | Example |
|---|---|---|
| Form fields | De-emphasize labels, emphasize values | Small uppercase label above large value text |
| Navigation | Primary nav bold, secondary nav lighter | Active link in dark gray-900, inactive in gray-500 |
| Cards | Title large, metadata small and light | Card title 20px bold, date 12px gray-400 |
| Dashboards | Key metric large, context small | Revenue "$42,300" large, "vs last month" small |
| Tables | De-emphasize headers, emphasize cell data | Headers uppercase small gray, data normal weight |
Design patterns:
Ethical boundary: Don't use hierarchy tricks to hide important information like pricing, terms, or cancellation options.
See: references/advanced-patterns.md for interaction states and advanced component patterns.
Core concept: Use a constrained spacing scale, not arbitrary values. Spacing defines relationships -- elements closer together are more related.
Why it works: Arbitrary spacing (padding: 13px) creates inconsistency. A fixed scale forces deliberate decisions and produces harmonious layouts. Generous spacing feels premium; dense spacing feels overwhelming.
Key insights:
max-w-prose or ~65ch)Product applications:
| Context | Spacing Strategy | Example |
|---|---|---|
| Icon + label | Tight coupling (4px) | Small gap keeps them visually connected |
| Form fields | Related elements (8-16px) | Input and its label tightly coupled |
| Card sections | Section separation (24px) | Title block, content block, footer block |
| Page sections | Major sections (48-64px) | Hero, features, testimonials, footer |
| Container width | Constrain to content | max-w-prose for text, max-w-md for forms |
CSS patterns:
p-1(4px) p-2(8px) p-4(16px) p-6(24px) p-8(32px) p-12(48px) p-16(64px)max-w-prose(65ch) max-w-md(28rem) max-w-lg(32rem) max-w-xl(36rem)gap-2 for related items, for section separationEthical boundary: Don't use spacing to bury important UI elements like unsubscribe buttons or privacy controls.
See: references/advanced-patterns.md for responsive breakpoint strategies.
Core concept: Use a modular type scale, constrain line heights by context, and limit to two font families maximum.
Why it works: A modular scale (e.g., 1.25 ratio) creates natural visual rhythm. Tight line heights on headings and relaxed line heights on body text improve readability across contexts.
Key insights:
Product applications:
| Context | Typography Rule | Example |
|---|---|---|
| Hero headline | 36px, tight line-height (1.1), bold | Large impactful statement |
| Section title | 24px, line-height 1.25, semibold | Clear section demarcation |
| Body text | 16px, line-height 1.75, normal weight | Comfortable reading |
| Captions/labels | 12-14px, line-height 1.5, medium gray | Secondary information |
| Code/data | Monospace, 14px, consistent width | Tabular data alignment |
CSS patterns:
text-xs(12px) text-sm(14px) text-base(16px) text-lg(18px) text-xl(20px)font-normal(400) font-medium(500) font-semibold(600) font-bold(700)leading-tight(1.25) leading-normal(1.5) (1.75)Ethical boundary: Don't use tiny type sizes to hide terms, conditions, or fees from users.
See: references/advanced-patterns.md for text truncation and responsive typography.
Core concept: Build a systematic palette with 5-9 shades per color, add subtle saturation to grays, and design in grayscale first.
Why it works: Random colors clash. A systematic palette with predefined shades ensures consistency across the entire interface. HSL adjustments create natural-feeling lighter and darker variants.
Key insights:
#111827) instead of pure #000000#64748b; warm UI: yellow/brown tint like #78716c)#374151 (gray-700) on white, not lighter grays for readable textProduct applications:
| Context | Color Strategy | Example |
|---|---|---|
| Primary palette | 9 shades (50-900) for main brand color | Blue-500 for buttons, Blue-100 for backgrounds |
| Gray palette | Saturated grays matching UI temperature | Cool grays with blue tint for tech products |
| Semantic colors | Success, warning, error each with shade range | Green-500 for success, Red-500 for errors |
| Text colors | Three levels: dark, medium, light | text-gray-900, text-gray-600, text-gray-400 |
| Accessible contrast | Test all text/background combos |
CSS patterns:
text-gray-900(dark) text-gray-600(medium) text-gray-400(light)bg-blue-50 for subtle backgrounds, bg-blue-500 for primary actionsborder-gray-200 for subtle borders, border-gray-300 for strongerEthical boundary: Don't use color alone to convey information -- always pair with text or icons for accessibility.
See: references/theming-dark-mode.md for dark palette creation and theme implementation.
Core concept: Use a shadow scale to convey elevation. Small shadows for slightly raised elements, large shadows for floating elements.
Why it works: Shadows create a sense of physical depth that helps users understand which elements are interactive, which are floating above the surface, and which are part of the background.
Key insights:
Product applications:
| Context | Shadow Level | Example |
|---|---|---|
| Buttons | shadow-sm (subtle raise) | Slightly elevated above page surface |
| Cards | shadow-md (clear separation) | Content grouped and lifted from background |
| Dropdowns | shadow-lg (floating) | Menu clearly floating above content |
| Modals | shadow-xl (highest elevation) | Overlay clearly detached from page |
| Flat alternatives |
CSS patterns:
shadow-sm: 0 1px 2px rgba(0,0,0,0.05)shadow-md: 0 4px 6px rgba(0,0,0,0.1)shadow-lg: 0 10px 15px rgba(0,0,0,0.1)shadow-xl: 0 20px 25px rgba(0,0,0,0.15)Ethical boundary: Don't use excessive shadows or visual emphasis to draw attention to deceptive UI elements (dark patterns).
See: references/advanced-patterns.md for interaction states and elevation hierarchy.
Core concept: Treat images as design elements, not afterthoughts. Size icons deliberately and use overlays to ensure text readability on images.
Why it works: Poorly sized icons look awkward. Unstyled images break visual consistency. Deliberate image treatment (overlays, object-fit, border radius) makes interfaces feel polished.
Key insights:
object-fit: cover and crop deliberatelyProduct applications:
| Context | Image/Icon Technique | Example |
|---|---|---|
| Hero images | Overlay with semi-transparent gradient | Text readable over any photo |
| Avatars | Consistent size, rounded, fallback initials | 40px circle with object-fit cover |
| Feature icons | Consistent size, weight, and color | 24px stroke icons in gray-500 |
| Empty states | Custom illustration + clear CTA | Friendly illustration with "Get started" button |
| Thumbnails | Fixed aspect ratio with object-fit cover | 16:9 cards with no distortion |
CSS patterns:
object-fit: cover with fixed aspect-ratio for consistent image displayw-4 h-4 inline, w-6 h-6 in navigation, w-8 h-8 for feature iconsbg-gradient-to-t from-black/60 to-transparent for text on imagesEthical boundary: Don't use misleading images or icons that misrepresent functionality or product capabilities.
See: references/advanced-patterns.md for image treatment, icon usage, and empty states.
Core concept: Don't center everything. Use alignment, overlap, and emphasis variation to create engaging compositions.
Why it works: Left-aligned text is easier to read. Varied layouts keep users engaged. Breaking out of rigid boxes makes designs feel dynamic and intentional.
Key insights:
Product applications:
| Context | Layout Strategy | Example |
|---|---|---|
| Hero sections | Centered text, generous spacing | Short headline + subtext + single CTA |
| Feature grids | Left-aligned text, consistent card sizes | 3-column grid with icon + title + description |
| Blog feeds | Varied card sizes for emphasis | First post large, next posts in 2-column grid |
| Sidebars | Narrower than main content, lighter background | Navigation or filters at 240-320px width |
| Content pages | Constrained width, left-aligned | max-w-prose centered container with left text |
CSS patterns:
text-left by default, text-center only for heroes and short headlinesgrid grid-cols-3 gap-6 for feature gridsmax-w-4xl mx-auto for page containersoverflow-hidden on cards with object-fit: cover images that bleed to edgesEthical boundary: Don't use layout tricks to hide or obscure important user choices like opt-outs or data permissions.
See: references/advanced-patterns.md for responsive breakpoints and complex layout patterns.
| Mistake | Why It Fails | Fix |
|---|---|---|
| "Looks amateur" | Insufficient white space, unconstrained widths | Add more white space, constrain content widths |
| "Feels flat" | No depth differentiation between elements | Add subtle shadows, border-bottom on sections |
| "Text is hard to read" | Poor line-height, too wide, low contrast | Increase line-height, constrain width, boost contrast |
| "Everything looks the same" | No visual hierarchy between elements | Vary size/weight/color between primary and secondary |
| "Feels cluttered" | Equal spacing everywhere, no grouping | Group related items, increase spacing between groups |
| "Colors clash" | Random color choices without a system | Reduce saturation, use more grays, limit palette to system |
| "Buttons don't pop" |
Audit any UI design:
| Question | If No | Action |
|---|---|---|
| Does hierarchy read when squinting (blur test)? | Elements competing for attention | Increase contrast between primary and secondary |
| Does it work in grayscale? | Relying on color for hierarchy | Strengthen size/weight/spacing hierarchy |
| Is there enough white space? | Probably not -- most designs are too dense | Increase spacing, especially between groups |
| Are labels de-emphasized vs. their values? | Labels competing with data | Make labels smaller, lighter, or uppercase-small |
| Does spacing follow a consistent scale? | Arbitrary spacing creates visual noise | Use 4/8/16/24/32/48/64 scale only |
| Is text width constrained for readability? | Long lines cause reader fatigue | Apply max-w-prose (~65ch) to text blocks |
| Do colors have sufficient contrast? | Accessibility failure, hard to read | Test with WCAG contrast checker, use gray-700+ on white |
This skill is based on Adam Wathan and Steve Schoger's practical design guide. For the complete system with visual examples:
Adam Wathan is a full-stack developer and the creator of Tailwind CSS, one of the most popular utility-first CSS frameworks. Steve Schoger is a visual designer known for his practical design tips and illustrations. Together they created Refactoring UI to teach developers how to design better interfaces using systematic, repeatable techniques rather than relying on innate artistic talent. Their approach emphasizes constrained design systems -- fixed scales for spacing, typography, color, and shadows -- that produce professional results without requiring a design background.
Weekly Installs
723
Repository
GitHub Stars
260
First Seen
Jan 29, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
opencode618
codex601
gemini-cli599
claude-code592
cursor576
github-copilot564
React 组合模式指南:Vercel 组件架构最佳实践,提升代码可维护性
103,800 周安装
gap-6leading-relaxed#374151 on white = 10.5:1 ratio |
| Border + background shift |
| Lighter top border, darker bottom border |
| Low contrast with surrounding elements |
| Increase contrast with surroundings, add shadow |
| Using arbitrary values | px values like 13, 17, 23 create inconsistency | Stick to the spacing and type scales |
| Are shadows appropriate for elevation? | Elements floating at wrong visual level | Match shadow scale to element purpose |