Resume
Static Colors
Avoid referencing static variables directly when building UI that needs to adapt to different color themes. Instead, use the semantic variables. In some cases, you may need to use static variables where colors don’t rely on the theme. Example are: illustrations, 3rd party logos, flags, and charts.
Semantic color variables
The semantic color variables are based on the meaning, or purpose, that colors have in the interface.
Naming convention
We use generic names for the color tokens, which means that color names don't rely on our component inventory. So you can build your custom components using the same color tokens, and they will still automatically support theming.
The name of each semantic color token is based on 4 logical groups:
Foundation, Semantic role, and two optional modifiers: variant and state.
Foundation
Most semantic color tokens belong to the following foundation: backgrounds, foregrounds (which is text and icons), borders.
Example
For example, take a look at this card component. It consists of a white background, gray border around it, shadow to visually elevate it from the background and foreground in this case it’s a text inside the card.
Semantic Role
The next part of the color tokens name is a semantic role. Semantic role refers to a way of naming colors based on the role they play in the interface as opposed to their hue.
We support the following color roles: Brand (Affirm’s brand color), Positive, Attention, Critical, Neutral, and neutralReversed.
Variants (optional)
Color variants are variations (tints and shades) of the default base color role to create priority and hierarchy in the UI. Affirm’s design system supports 3 variants: default, muted, and subtle.
State (optional)
State is used to communicate the status of a component or interactive element. This includes the following states: default, hover, focused, pressed, disabled.
Assembling all pieces together
If we assemble all the pieces together, we get the following naming structure
All semantic color variables
If we assemble all the pieces together, we get the following naming structure
Thank you for scrolling all the way!
Home
Resume
Static Colors
Avoid referencing static variables directly when building UI that needs to adapt to different color themes. Instead, use the semantic variables. In some cases, you may need to use static variables where colors don’t rely on the theme. Example are: illustrations, 3rd party logos, flags, and charts.
Semantic color variables
The semantic color variables are based on the meaning, or purpose, that colors have in the interface.
Naming convention
We use generic names for the color tokens, which means that color names don't rely on our component inventory. So you can build your custom components using the same color tokens, and they will still automatically support theming.
The name of each semantic color token is based on 4 logical groups:
Foundation, Semantic role, and two optional modifiers: variant and state.
Foundation
Most semantic color tokens belong to the following foundation: backgrounds, foregrounds (which is text and icons), borders.
Example
For example, take a look at this card component. It consists of a white background, gray border around it, shadow to visually elevate it from the background and foreground in this case it’s a text inside the card.
Semantic Role
The next part of the color tokens name is a semantic role. Semantic role refers to a way of naming colors based on the role they play in the interface as opposed to their hue.
We support the following color roles: Brand (Affirm’s brand color), Positive, Attention, Critical, Neutral, and neutralReversed.
Variants (optional)
Color variants are variations (tints and shades) of the default base color role to create priority and hierarchy in the UI. Affirm’s design system supports 3 variants: default, muted, and subtle.
State (optional)
State is used to communicate the status of a component or interactive element. This includes the following states: default, hover, focused, pressed, disabled.
Assembling all pieces together
If we assemble all the pieces together, we get the following naming structure
All semantic color variables
If we assemble all the pieces together, we get the following naming structure
Thank you for scrolling all the way!
