在 Atmos 的设计系统中,有一条几乎不可动摇的规则:品牌紫 #7c3aed 永远以描边形态出现——它是按钮的边框、是链接的颜色、是聚焦环的光晕,但永远不是大面积的填充色块。

这个选择并非偶然,而是我们对「工具设计」本质思考的结果。

填充按钮的「视觉噪音」问题

大多数 SaaS 产品使用彩色填充按钮作为主要 CTA。这在营销页面上很有效——高对比度、强引导、明确的行动信号。但在创作工具中,情况完全不同。

创作者需要的是一个「安静」的工作环境。每一个彩色色块都在争夺注意力,当你的界面上有多个紫色按钮时,视觉噪音会悄悄累积,最终侵蚀专注力。

描边:存在感与克制的平衡

描边按钮提供了一种微妙的平衡——它有足够的视觉存在感让你知道「这里可以点击」,但不会像填充按钮那样「大声喊叫」。它像是空间中的一个轻声提示,而非强制引导。

好的工具设计应该像好的建筑——你首先注意到的是空间本身,而非门把手。

品牌色的「稀缺性」策略

在 Atmos 的界面中,紫色是稀缺的。正因为它稀缺,当它出现时才有足够的引导力。如果一个颜色无处不在,它就失去了强调的能力。

我们的品牌色使用规则

  • 描边按钮的文字 + 边框
  • 文字链接颜色
  • 聚焦环(focus ring)
  • 图标线条色(线条风格)
  • 导航激活态下划线

注意,这份清单里没有「填充按钮背景」「大面积色块」「渐变起点」——这些都不是品牌紫的容身之处。

从暖羊皮纸到描边紫

Atmos 的正文区使用暖羊皮纸色 #faf7f2 作为底色,这是一种比纯白更温暖、更有质感的米白色。在这个温暖的底色上,紫色的描边按钮像是一句轻声的邀请——「你可以在这里开始」。

我们相信,设计的优雅不在于添加多少元素,而在于知道什么时候停下。描边按钮就是这种「知道何时停下」的体现。

如果你对 Atmos 的设计系统感兴趣,欢迎查看我们的核心功能页面,或者通过联系页面与设计团队交流。

← 返回博客列表