从留白开始

当一张卡片显得拥挤时，先别急着缩小字体。试着增加内容间距，减少同一层级的信息数量，给标题和正文明确的节奏。

留白不是没有内容，而是帮助读者理解内容的关系。标题与摘要应该靠近，不同段落之间则需要更明显的距离。

阴影只需要一点点

柔和的阴影适合表现卡片与背景之间的层次，但过深的投影会让页面显得沉重。使用带一点主题色的低透明度阴影，往往更容易融入整体。

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 5px 24px #88566a06;
}

给边框和阴影分工：边框负责清晰度，阴影负责距离感。

不要让动效抢走注意力

悬停时轻轻上移两像素，就足够告诉用户「这里可以点击」。更大的位移和过长的过渡，反而容易打断阅读。

同时尊重用户的减少动态效果偏好：

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card { transition: none; }
}

让键盘用户也能看见位置

不要为了视觉简洁直接删除焦点轮廓。使用 :focus-visible，能为键盘操作保留清晰的提示，又不会让每次鼠标点击都出现强烈的描边。

用设计变量连接深浅主题

把背景、卡片、文字和强调色定义成变量，组件就可以共享同一套语义。切换主题只需要调整变量，而不是给每个元素重新指定颜色。

好看的界面，通常不是堆砌装饰，而是反复调整这些小小的关系。