黑白：专为聚焦而打造的设计系统

我们以严格的黑白方式制造每一件 OLUWA 产品。没有品牌蓝色，没有强调青色，没有“成功绿色”出现在 Toast 通知中。极简的黑白设计系统并不是对终端的怀旧，也不是我们所迷恋的情绪板。这是一个工作约束，使我们的决策更快，界面更清晰，默认情况下我们的可访问性基线更高。这就是我们选择单色的原因、我们放弃的以及您明天可以采用的标记和规则。

为什么我们故意去除颜色

颜色是界面设计中最常被滥用的变量。添加成本低廉，管理成本昂贵。一旦你有了调色板，每个元素都会争夺你的一种色调，“这应该是什么颜色”成为你每周回答数百次的问题，而且通常不一致。

破坏性按钮是红色的。但错误状态、必填字段标记、通知徽章以及流失用户的图表系列也是如此。红色现在意味着五件事，也就是说它没有任何意义。

删除颜色就删除了整个决策类别。当你无法找到一种色调来表示重要性时，你可以使用真正具有意义的工具来表示它：位置、大小、粗细和空白。这些工具更加诚实。标题读起来很重要，因为它很大，位于顶部，周围有空间，而不是因为有人把它涂成了紫色。

要点：如果您使用颜色来解决层次结构问题，那么您遇到的是层次结构问题，而不是颜色问题。 单色拒绝让您掩盖它。

无颜色的层次结构：三个杠杆

当色调不再存在时，三个控制杆即可完成所有工作。

键入比例尺。 我们运行具有明显跳跃的模块化比例尺，而不是连续的尺寸梯度。距离太近的台阶会被认为是噪音；眼睛需要明确的等级。我们的工作比例大约是 12 / 14 / 16 / 20 / 28 / 40 / 64px。正文位于 16 处，辅助元数据位于 14 处，20 以上的所有内容都是结构性的。如果两件事需要感觉不同的重要性，它们会得到不同的步骤，而不是在两种灰色阴影中使用相同的步骤。

重量和外壳。 使用一种字体且没有颜色，重量成为主要信号。我们最多使用三种粗细：常规粗细、中等粗细以及为真正强调而保留的单一粗体。带有跟踪字母间距的大写字母起到了“标签颜色”的作用，将字符串标记为类别或没有色调的眉毛。

空间。 空白是单色布局的承重墙。邻近群体相关事物；距离将他们分开。在我们的加密订单应用程序 MadaiOps 中，订单票完全依赖于这一点：价格、尺寸和侧面紧密分组，而确认操作则被故意留出空间，因此永远不会在输入旁边出现大意。不需要红色“危险”造型。间距起到防护作用。

对比是一个系统，而不是一种氛围

黑白的陷阱是认为你只有两个值。你有一个完整的灰度斜坡，并且纪律是限制它。我们定义了一组小的、固定的台阶，并禁止灰色的出口匝道。这是我们实际运送的坡道：

--ink-000: #000000   /* primary text, headings */
--ink-700: #3d3d3d   /* body on light, secondary headings */
--ink-500: #6b6b6b   /* metadata, captions, disabled-adjacent */
--ink-300: #b0b0b0   /* borders, dividers, placeholder */
--ink-100: #e6e6e6   /* subtle fills, hover backgrounds */
--paper:   #ffffff   /* base surface */

六个价值观。这就是整个系统，加上它的暗模式的反面。我们在审查中强制执行的规则：**不存在坡道上的灰色可能存在。**当有人因为“边界感觉有点重”而用吸管吸管 #8a8a8a 时，系统就开始腐烂。一组封闭的值可以防止单色 UI 陷入混乱的千篇一律。

文本清晰 4.5:1，结构清晰 3:1

每个表面文字配对在发货前都会根据 WCAG 对比度进行检查。 --paper 上的 --ink-500 约为 5.7:1，轻松超过正文文本的 4.5:1 阈值。 --ink-300 作为文本失败，因此仅允许用于边框和分隔线，其中 3:1 非文本阈值适用。将规则编码到令牌的允许用途中，而不仅仅是它的值，才是它的粘性。

无障碍红利

这就是单色悄然获胜的地方。大约十二分之一的男性患有某种形式的色觉缺陷，任何依靠红绿来传达含义的界面对于一部分有意义的用户来说都是难以辨认的。我们从来没有碰过那堵墙，因为我们从一开始就没有用色调来编码意义。我们的州通过形状、标签、重量和位置来区分。

这种纪律迫使各地采用更健康的模式：**永远不要让单个通道单独承载意义。**我们系统中的禁用按钮不仅仅是更轻。它失去了边框，标签变成了 --ink-300，因此该状态在灰度屏幕上、在明亮的阳光下以及对于色盲用户来说都是一样的。我们的日记应用程序 Youp 用图像和标签文本标记情绪条目，而不是通常的红到绿情绪梯度，因此情感历史的读取无需依赖许多人看不到的频谱。

您还可以获得接近免费的高对比度和强制颜色支持，因为您从未使用精致的品牌调色板来对抗浏览器自身的可访问性覆盖。

约束如何加速决策

被低估的好处是速度。调色板是组合爆炸：每个新组件都会与每种色调和每种状态相乘。单色打破了这一点。由于无需做出颜色决定，组件的设计简化为类型步骤、粗细、间距以及边框的灰度标记。这是一个你可以在几秒钟内做出的决定，并通过规则而不是品味争论来进行审查。

它也复合了。由于令牌集很小且封闭，因此组件的组成是可预测的：一张卡片、一个表格行和一个模态都从相同的六个灰色和相同的七个类型步骤中绘制，因此它们看起来相关但没有任何协调。新表面继承一致性而不是协商它。对于一个发布多种产品的小型工作室来说，共享基础是四个感觉像一个家庭的应用程序和四个感觉像四个供应商的应用程序之间的区别。

这种权衡是真实存在的，值得一提。单色的原始表达范围较小，有些类别确实需要颜色：许多系列的数据可视化、任何映射到物理颜色的东西、以温暖为代价的品牌时刻。我们不会假装不是这样。我们的立场是，颜色应该是“赢得的和稀有的”，是为特定工作而特意引入的，而不是作为等级制度的默认杠杆。当我们伸手去够它时，它却很难落地，因为它周围的一切都很安静。

您明天可以采用的规则

如果您想尝试此操作而不重建所有内容：

关闭你的灰色斜坡。 选择五个或六个值，命名它们，并在代码审查中禁止所有东西离开斜坡。这条规则完成了大部分工作。
**制作一种字体比例并仅使用其步骤。**没有任意字体大小。如果您一直需要新尺寸，则说明比例有误；固定比例，不要添加一次性的。
将允许的用途编码为令牌。 --ink-300 是“仅限边界”，而不仅仅是一个十六进制值。将其记录在工程师可以阅读的地方。
审核第二个通道的每个带有意义的信号。 如果删除颜色会使状态变得不明确，请添加形状、标签或位置，直到它不再发生为止。
将空白视为一个组件。 给空格命名标记并以在其他地方保护颜色的方式来检查它们的保护。

结束语

我们不能容忍黑白工作的限制；这是一个澄清的镜头。去掉最简单的变量，结构变量、节奏、比例、对比、空间都无处可藏。该界面要么具有真正的层次结构，要么没有，您会立即发现。对我们来说，这种诚实比任何调色板都更有价值。