Introduction

Color is a powerful brand identifier that helps provide contrast and define hierarchy to guide our users’ attention. Color should be used boldly, but not excessively. Our color palette maintains unity across all SOROS properties, from marketing to product design.

SOROS' color system is designed with brand personality, usability, and accessibility in mind. Additionally, our color system’s decisions align our brand to our brand principles: Clean, Reliable, Inclusive, Delightful Experience.

Color Primitives

Color primitives are the foundational hues of a design system, serving as the base palette from which all other colors are derived. These core colors are selected for their versatility and ability to blend harmoniously, forming consistent color variables defined in formats like HEX or RGB. They are used to create tints, shades, and tones, providing a range of options while maintaining visual coherence.

Semantic tokens

Semantic color tokens abstract color usage into meaningful, functional names that describe their role within the user interface rather than their color value. By linking colors to specific UI elements and states, semantic tokens enhance clarity and maintainability.

Text and icon colors

Text color tokens are used to define text and icon colors. We’ve created a set of accessible text color tokens to promote legibility and readability to be used on dark and light backgrounds.

Border colors

Statuses

Error

SOROS uses red to draw attention to critical information. Red is an alarming color and should be used with care as it can convey a negative feeling. Error tokens are used in components and patterns such as alerts, toasts, buttons, badges, form elements, statuses, as well as passive elements such as sale items.

Success

SOROS uses green to indicate success states. Green is a vibrant color and should be used sparingly to convey a positive feeling. It’s currently used with alerts, toasts, badges, form elements, and statuses.

Warning

To indicate to a user that an issue can be avoided or needs a corrective action, SOROS uses orange for its warning tokens. Warning tokens are used with alerts, badges, toasts, and statuses.

Neutral

SOROS uses blacks and grays to indicate neutral information or a neutral state to a user. Black is an unbiased color that does not typically cause alarm in a user experience. Neutral tokens are used with alerts, toasts, badges, statuses, and buttons.

Do’s and Dont’s

Do’s

• Use SOROS color design tokens to craft your UI.
• Ensure color choices and pairings meet the minimum WCAG AA color contrast ratio requirements.
• Use primary interactive colors intentionally to indicate the most prominent action a customer would take on a screen.
• Use color along with another visual element (like an underline, border width change, a text label, etc.) when conveying meaning within a UI.
• When designing in Figma, use Color Variables. This helps attribute the correct color style to use for a better design/engineering hand-off. E.g. use the “Text/Default” color style for body copy text.

Don’t

• Avoid using or creating custom colors whenever possible, and do not use aliases directly.
• Don’t use inaccessible color pairings.
• Don’t overuse primary interactive colors (e.g. using several primary buttons next to each other). This disrupts the visual hierarchy and focus of the most important actions on a screen for the user.
• Don’t use color alone to convey meaning.
• Don’t use hex codes or other hard-coded values whenever possible in Figma. Using colors not defined by the color styles could further separate the design from the eventual codified experience, making it more difficult during hand-offs between designers and engineers.

Accessibility

One of our core design principles for SOROS is it’s Inclusive. We strive to use and pair colors that are accessible for all users, including those with low vision. The color palette and guidelines conform to Web Content Accessibility Guidelines 2.1 (WCAG) AA standards, an industry standard and legal guideline set from section 508.

Tools

It’s important to ensure that colors meet the desired color contrast ratios to be not only conformant to the WCAG guidelines, but accessible. You can use the following tools to test color contrast ratios:

WCAG Guidelines + Color

SOROS’ color palette and guidelines aim to meet Web Content Accessibility Guidelines 2.1 (WCAG) AA standard contrast ratios of conformance. In the sections to follow, we’ve summarized the WCAG guidance on using color to help you build accessible UIs.

Text contrast

As detailed in WCAG Success Criterion 1.4.3 (Level AA), the color contrast ratio of text against its background must be at least 4.5:1. This includes all text in active UI controls, including placeholder text. The exceptions are:

• Bold text at 18px or larger can be 3:1 against its background
• Text at 24px or larger, in any weight, can be 3:1 against its background

The following have no contrast requirements:

• Text that is part of a logo or brand name
• Text inside user interface controls that are disabled or inactive

Graphical objects contrast

As detailed in WCAG Success Criterion 1.4.11 (Level AA), graphics and parts of graphics—such as charts, illustrations, and icons—must have a contrast ratio of 3:1 against adjacent colors.

The following have no contrast requirements:

• Photos or real life scene
• Logos
• When a graphic’s current form is essential to the information it is conveying and changing it to meet contrast requirements would remove its true representation

Use of color

As detailed in WCAG Success Criterion 1.4.1 (Level A), it is important not to use color alone as a means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. Instead, convey such information with text and/or iconography, and use color only as a means to further enforce the meaning.

User interface controls

As detailed in WCAG Success Criterion 1.4.11 (Level AA), the intent of this success criterion is to ensure that active user interface controls—such as buttons and form controls—and meaningful graphics are distinguishable by people with moderately low vision.

• Active UI Controls must use a color that is 3:1 against adjacent colors to be identified as interactive, including interaction states like focus and hover.
• If a control contains text that passes text color contrast, then it can be identified by the text alone. For example, if a button is designed with text and a border, and the text meets color contrast requirements, then the border does not need to be 3:1.
• If a control contains no text, then its bounding box must meet color contrast requirements. For example, if a text input has no content within it, the border must meet 3:1.
• If color alone is used for focus, hover, or active indicators: the indicator must meet 3:1 against adjacent colors and meet 3:1 against the previous state.
• If you just change the background color, the new background must be 3:1 against adjacent colors and the previous background color.
• If you change the physical shape, i.e. adding a shadow, the shadow must meet 3:1 against adjacent color.
• If you change the physical attributes outside of color alone, e.g., underline the text, color contrast requirements for the control is exempt.

 

---