颜色

我们的颜色系统建立在对Shopify品牌颜色的识别上，使管理界面更有用。

---

原则

沟通是关键

虽然我们重视美观的色彩使用，但我们更看重清晰的沟通。颜色支持内容的目的，传达信息层次、交互状态和不同元素之间的差异等内容。

颜色有意义

颜色具有指定的角色，根据它们在界面中的功能具有特定的含义。已定义的颜色角色便于以后修改和自定义。他们还扩展了颜色系统，使其在Shopify的任何接触点都能工作。

颜色遵循易访问性准则

色彩系统是在HSLuv色彩空间内设计的，以生成符合WCAG 2.1标准对比度的主题。这使得查找、识别和交互变得更容易。它还让色盲或视力较低的商家更容易获得整个体验。然而，你不应该仅仅用颜色来传达信息。

---

色的角色

我们根据它们在界面中所扮演的角色来定义颜色。有10个颜色角色，我们使用它们来生成调色板中所有颜色变体的值。

颜色变异

颜色变量是将颜色应用到UI的变量，它们的值由颜色角色生成。颜色变体可作为标记。

变量共享一个命名模式，该模式引用它们的颜色角色、它们定义的交互状态以及它们链接到的任何UI元素。

---

色彩系统在起作用

颜色角色如何与变量相关，以及它们如何应用于整个界面。

表面

表面颜色影响组件的表面，如页面、卡片、工作表和弹出窗口。

在表面

将表面上的颜色应用到中性表面上的元素，通常是边框、次要图标和文本元素。

主要的

导航和选项卡上的按钮、图标和文本等主要操作以及导航和选项卡交互状态的背景使用原色。

二次

次要和第三个按钮以及表单元素的背景使用次要颜色。

互动

在链接、焦点指示器和选定的交互状态等方面使用交互颜色。

成功

成功的颜色表示一些积极的东西，如商业行动的成功或说明增长。

警告

警告颜色让商家知道他们需要采取行动，并应用于徽章、横幅和例外列表。

至关重要的

关键颜色代表破坏性交互元素、错误和需要立即采取行动的关键事件。

突出

突出的颜色表示不需要立即采取行动的重要元素。它们与信息横幅和徽章一起使用，将注意力吸引到新信息的指示器，加载或进度条以及数据可视化。

装饰

装饰色彩是为了表达沟通，维护Shopify品牌的存在。