SLDS（Salesforce Lightning Design System）闪电设计系统提供了全方位的调色板, 适用于我们的 ui 设计, 以及品牌格调一致性设计工作。

中性灰

Salesforce的灰色可以用于大多数 ui 元素, 但应该限制在：背景色、文本色、边界色和svg 填充色。

Neutral Grays

品牌色

Salesforce的品牌颜色应该很少在大多数 ui 元素上使用。理想情况下, 它们仅限于应用程序中的主要操作或用于强调。

Brand Colors

四大应用

视觉信息传递

某些颜色对于绝大多数用户具有内在的意义, 尽管我们认识到文化差异是丰富的。例如, 我们使用红色来传达错误。

Visual Messaging

视觉差异化

Salesforce将许多辅助颜色与图标结合使用, 以直观地区分类似类型的内容, 例如不同对象类型的记录。然而, 重要的是，不要总是依靠颜色来提供视觉上的差异化。如果太多的用例以这种方式使用颜色, 颜色就会失去意义。

Visual Differentiation

视觉层次化

颜色很少被用来吸引人们对重要元素和我们希望用户采取行动的元素的关注，因为大多数应用程序都是灰色的, 所以颜色的凸出会吸引用户的眼球。

Visual Hierarchy

可用性

重要的是, 我们的产品必须满足所有WEB辅助功能标准, 包括WCAG2.0 为文本和背景颜色组合指定的最小对比度。这种坚持可以帮助色盲或视力低下的用户更好地与Salesforce交互, 它也提高了所有用户的可用性和可读性。

Accessibility

您可以在css框架主题部分中找到一些最常见的文本和背景色组合，它们都经过审核, 以通过最小对比度, 包括普通文本和链接文本样式。

---

SLDS provides a full spectrum of color palettes, suited for our UI design that work harmoniously with our brand colors.

Neutral Grays

Our grays can be used on most UI elements but should be limited to:background colors, text colors, border colors, svg fill colors.

Brand Colors

Our brand colors should be used sparingly on most UI elements. Ideally, they are limited to primary actions or accents within the application.

Usage

Visual Messaging

Certain colors have inherent meaning for a large majority of users, although we recognize that cultural differences are plentiful. For example, we use red to communicate an error.

Visual Differentiation

Salesforce uses many secondary colors in conjunction with iconography to visually differentiate between similar types of content, such as records of different object types. However, it’s important to not always rely on color to provide visual differentiation. If too many use cases employ color in this manner, the colors lose their meaning.

Visual Hierarchy

Color is used sparingly to draw attention to important elements and those that we want the user to take action on. Because most of the application is gray, pops of color catch a user’s eye.

Accessibility

It’s important that our products meet all web accessibility standards, including the minimum contrast ratios that the WCAG 2.0 specifies for text and background color combinations. This adherence helps users who are colorblind or have low vision to better interact with Salesforce, but it also improves usability and readability for all users.

You can find some of the most common text and background color combinations in the CSS Framework Themes section. They are all vetted to pass the minimum contrast ratios, including both normal text and link text styles.

Salesforce Lightning Design System：Color