Color is used in our UI based on its function. These are known as Semantic Colors, and are the primary color types that we apply to our UI.
The Semantic Colors reference our Core Colors, which are never directly used in our UI except as references. If you find the need to use any color outside of our Semantic Colors, reach out to PG (sekei) for a discussion about whether or not our palette should be extended. As a reminder, our Design System is meant to provide helpful constraints for consistency and velocity, so always try to work within the constraints provided without breaking or extending our styles.
Token Structure
Our token structure highlights our tokens are set up between Figma and our Tailwind codebase, with Figma in purple and Tailwind in blue.
Semantic Colors
Semantic Colors are tied to a specific meaning and applied directly to our UI.
Semantic Colors help us improve consistency by creating a set of self documenting tokens that make it easy to apply to various UI elements, rather than having to pick pseudo-randomly from our entire palette of neutrals.
By mapping and coding roles through tokens, rather than assigning hex values, a color can update systematically if a color palette changes. Tokens enable changes to a role's color value to cascade consistently.
Usage
Using our Semantic Color palette involves three main steps. Eventually these steps should become second nature and will help us create a more consistent and scalable UI.
01. What’s the function?
The first step is to figure out the function of the element you’re applying the color to.
In the example below, the color is being applied to the background of a card, therefore the function is background (surface). You can search for that in the color panel on the right to find the appropriate color style.
02. What's the context?
The second step is to decide which context the UI element is in. This is either onDark or onLight, and is completely separate from a theme (i.e. Dark Mode or Light Mode). In the example below, the text of this button could be considered to be in a “dark mode” theme because all of its surrounding elements are dark.
However, the text appears on a light background (bright yellow), so the context of this specific element is onLight. This ensures the text has appropriate contrast with the background it sits on.
03. What's the value?
The final step is to select the appropriate value from the right function/context. Back to our card background example, you can see that there are five options for surface/onDark:
- low
- base
- medium
- hight
- overlay
In the case of surfaces, we select the level based on elevation, meaning that base surfaces usually sit above low surfaces, medium sit above base, and so on.
In our example, the card is on top of a surface/onDark/low, so we’ve selected the surface/onDark/base as our card background.
Content
The content colors can be used for elements that communicate any kind of content with the user.
The colour palettes are subdivided based on the theme they appear on. “On Light” palettes are to be applied in light contexts and vice versa.
Surface
As the name suggest, surfaces are any area of the product that has other content “laying” on top of it. This usually means backgrounds for elements like cards, sidebars, pages, etc.
Border
As the name suggest, surfaces are any area of the product that has other content “laying” on top of it. This usually means backgrounds for elements like cards, sidebars, pages, etc.
border
border / onLight
border / onDark
Action
The Action palette is used for UI elements that perform an action, typically buttons or links. Because this color is based on our primary palette, it can be used in other areas too such as badges, or other UI elements.
However, be mindful not to overuse this color, as it should be tied to more primary or prominent UI elements.
action
action / onLight
action / onDark
Alert
The Alert palette is used for UI elements that perform destructive or dangerous actions, typically buttons, error messages, as well as notifications.
alert
alert / onLight
alert / onDark
Positive
The Positive palette is used for UI elements that are tied to positive concepts or actions, typically text or badges tied to partners and discounts.
positive
positive / onDark
positive / onLight
Gradients
Gradients provide a collection of pre-baked combinations of brand colors. While the provided gradients act as recommendations that can be quickly added to a design, designers are free to create their own gradients provided they:
- Use the brand colors exclusively
- Document them as custom gradients for engineers
gradient
primary
greenlight
shimmer
pro
gradient / brand
1
2
3
4
5
Core Colors
The core colors form the foundation of our UI color palette. These comprehensive palettes are based on our brand, and are almost entirely void of meaning. The purpose of these colors is to provide us with a wide chromatic range to then compose our semantic palettes, which are then applied to the UI based on their function and meaning.
