颜色
两层色彩系统
库中使用两种类型的配色方案：私有配色方案和语义配色方案。这两种配色方案或调色板的结构和用途各不相同。私有调色板为所有主题的所有色调和色调分配 RGBA 值，而语义调色板使用私有颜色作为值并将其应用于特定的用户界面元素。
私人颜色
是设计系统中的基础颜色层。它们不是为直接在组件中使用而设计的。相反，它们充当已在组件中使用的语义变量的值。私有变量的值是 RGBA/RGB 颜色。
此调色板包括每个主题的每种颜色的所有色调，包括带和不带 Alpha 通道的色调，前缀为 S olid。
带有 Alpha 通道的颜色
Alpha 颜色仅适用于 500 及以下的指数。它们与背景色混合在一起，以提高可读性和对比度。建议你使用它们：
- 适用于灯光颜色（从 50 到 300）
- 在与排版相关的项目中，文本可以显示在任何颜色的背景之上，因为使用 Alpha 通道可以防止对比度损失。
纯色
当两个对象可能重叠并且您想防止颜色混合以取代重叠处时，请使用纯色。纯色是根据主题的主要背景选择的。由于纯色可以显示在任何颜色的底层之上，因此应仔细考虑其使用。
每当更改主背景色或次要背景色时，都应重新生成阴影，以保持纯色和 Alpha 通道色之间的视觉一致性。
如何创建音调
色调是从刻度中间创建的，在本例中，色调是索引为 550 的颜色。它是产生较少饱和度和更高饱和度色调的原色。黑白是例外，它们处于音阶的极端，允许使用 Alpha 通道创造更多的音调和值。
索引从 50 到 500 的颜色是通过降低基色 (550) 的不透明度来创建的。带有 Alpha 通道的颜色只能在此范围内找到，而纯色则可以具有跨整个比例的值。
索引为 600 到 1000 的颜色是通过与所选主题的主色形成对比的背景色混合来创建的。例如，浅色主题的主要背景颜色是白色，对比色是深色主题的背景。因此，这种对比鲜明的背景将被混合到颜色中以产生更暗的色调。
在深色主题中，主要背景是深色，对比背景是浅色主题的背景，即白色。因此，白色将混合到颜色中以产生高折射率的色调。
脚本允许您快速生成用于开发移交的调色板。
语义颜色
该颜色组中的变量分为几 组 ，随后根据其 含义在组件中使用。它们的值是使用私有变量为每个主题配置的。某些语义变量有时可以用作其他语义变量的值，但必须谨慎使用以避免递归。
基于类型的类别
在 Figma 中，变量分组以便于导航，如下所示。而在代码中，结构更加简单。品牌标识不归入单独的类别，而且只有一个基本变量组。Figma 和代码在变量名称、结构和含义方面是等效的，除非名称针对可读性或理解性进行了优化。
1.品牌推广
来自所有类别的品牌特定变量的集合。这些是基本颜色，可让您快速应用样式并查看结果。这个群组是 Figma 独有的。它不包含在代码中，颜色按自己的组别分类。
2.文本
一组用于表示文本和图标颜色的变量。由于文本和图标通常一起显示，因此保持它们的视觉一致性是有意义的。
3.基地
底层、填充和背景的颜色组
4.基础语义
使用 “信息”、“正面”、“警告”、“危险” 和 “杂项” 颜色为底色。“正常” 和 “悬停” 状态都有值。可能适用于某些类型的信息图表，但不是全部。这个群组是 Figma 独有的。在代码中，它是 Base 组的一部分。
5.基础浮动
为浮动在页面主背景上方的元素添加底层颜色。这个群组是 Figma 独有的。在代码中，它是 Base 组的一部分。
6.线
笔触、线条、分隔线、边框和任何其他细元素的颜色。
7.效果
用于调暗文本、应用阴影等的颜色
8.杂项
一组技术颜色，用于图表中的滚动条、图表轴和工具提示背景。
有关每个变量的更多信息可以在 Figma 颜色样式描述或故事书中找到。
基于含义的类别
每个组中的变量可能有自己的含义，这些含义由一组的应用原理决定。例如，对于文本，使用诸如 主要 和 附加之类的类别是有意义的。但是，它们不能应用于任何其他类型的内容。
以下是不同类别共有的含义示例：
- 成功
- 危险的
- 警告
- 中立
- 等等
变量和颜色样式
你可以使用 Figma 的局部变量接口处理颜色值。要转到此处，请使用库打开文件，确保在页面上未选择任何内容（您可以通过单击画布的空白背景来执行此操作），然后在右侧面板中选择局部变量。
尽管变量仍未处于测试阶段，但设计系统继续使用颜色样式来直接定义对象的颜色。请注意，颜色样式中的值由相应的变量表示。这意味着：
1.要更改颜色样式的颜色，你需要更改相应变量的颜色。 2.颜色样式继承变量的属性，特别是对颜色主题的支持。因此，应用了颜色样式的对象只能使用 Figma 的功能来更改主题。
主题
Gravity-UI 支持四个主题：每个主题的浅色、深色和对比色版本。当前的行业标准要求至少两个：浅色和深色。考虑到用户的偏好可能多种多样，有时很难选择最佳的偏好。
创建对比度增强的主题是为了解决常规主题中缺乏对比度的问题，这可能是由显示器校准、设置亮度、矩阵类型和色彩渲染（尤其是在电视上）等设备功能或房间照明造成的。目前，这些主题不提供解决无障碍问题的解决方案。