Color
Overview
Getting started with the Arc color system
Say hi to our primary brand color, Purple 500.
Using magic, we created a full spectrum color palette using Purple 500 as a base.
We then adjusted the lightness values to generate a range of different shades and tints. These are named from lightest (100) to darkest (900) in increments of 100.
Usage
How to use the color system across Arc.
We use a ranking system to help you make better and more efficient decisions when implementing a specific shade. Each shade is ranked from the highest priority (1) to the lowest priority (3). There’s only one shade per color ranked with a priority of (1) and should be your default starting point.
Priority (2) is often used to indicate a different state of the default color, while priority (3) is for special circumstances and might need consultation from the design team.
Accessibility
Some important considerations to keep in mind when working with color.
We included the WCAG (Web Content Accessibility Guidelines) contrast rating for each shade. This rating measures the contrast ratio between the foreground text and the background color. All instances must meet at least a AA rating.
When layering text on top of of our color palette, lighter shades will often require a specific text color to maintain an accessible contrast ratio. Each color has a unique text color variable ({Color} Text) that can be used for these instances when needed.