Brand Colors
Color | Name | Hex | Use Case |
---|---|---|---|
![]() | purple-900 | #331673 | Primary buttons |
![]() | ink-900 | #2F326A | • Typography and Illustration outlines • Illustration outlines may also use ink-700 and on rare occasions white |
![]() | ink-700 | | Outline color for illustrations. (This decision was made so that illustration outlines will be visible on top of the (often used) ink-900 background) |
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() | 500-level colors | Used as the primary fill colors for illustrations to make them appear bold and consistent. On rare occasions, different colors from the Foundations Palette can be used. | |
![]() ![]() ![]() ![]() | White, Gray-100, Plum-100, Purple-100, ink-900 | Background colors |
With few exceptions, when designing brand materials, color ratios should remain heavily rooted in one of three base colors (White
, gray-100
, or ink-100
) with one or two contrasting colors for text, and (optionally) a single highlight color.







Last modified 6mo ago