These are mostly used for backgrounds for any elevation level or component.
These colors are accessible with dark foreground colors,
so we recommended using Light shades for backgrounds and Dark shades for foregrounds.
You can also use complementary and minor colors from our palette,
which should give you enough colors to work with.
Interactive colors are used in components with some indication of state
that do not move you forward in the flow or redirect you to another page.
All of these elements should be colored in BlueNormal.
This mostly means hover, focus, select, active, press, and drag states.
Actionable colors are used in components that include an action (such as moving you forward in the flow).
This means the Button, ButtonLink, and TextLink components.
For the actionable color, we use our main ProductNormal.
Elements that aren’t actionable shouldn’t be in this color.
The color palette contains every one of the colors we use in our designs.
These colors are also used by default in white label solutions for our partners
and can be modified to their brand colors (see more about theming).
The reasoning behind the additional shades
As you might have noticed, our basic color palette is quite simple—just a few shades.
If you need multiple layers for the UI, you can use the additional shades.
Using just the basic shades would make the UI heavy.
Use the additional shades to make the UI more layered and subtle.
They’re also useful for specific interaction states, such as hovering and focusing.
Do not use these addition shades alone.
Use the basic shade as the primary color
and only use the additional shades when needed to create more depth or interactions.
We’re aware of a slight contrast issue with our Product Normal color
and the issues when using it for Primary buttons.
We’re exploring possible solutions.
We highly recommend against using it for text
and we recommend using darker shades when possible.