Procore’s color palette is comprised of neutrals that compliment our primary orange color.


Procore Orange is vibrant, full of energy and optimism. It’s a nod to the signage color you'll find on many construction sites. Since it’s meant to draw attention, we use it mainly in our primary CTA buttons and actions.


Most of Procore is gray. Dark grays are mainly used for text, but they can also work as backgrounds in dark layouts. Medium grays are used in some text and for the background of buttons. Light grays and whites are used for dividers or background fills, as well as text against darker backgrounds.


Blue is a complimentary color to our primary orange and is often used to indicate if something is interactive or selected. You’ll find it in links and tokens.


Green is used to indicate success or to celebrate an achievement. For example, you’ll see green used in our success toasts and banners.


Yellow is used for warning or caution states. You will see yellows in pills and banners.


Red is used for error states or actions that are destructive. For example, error banners.


Purples are currently only used for product onboarding and beta tokens. Most of the time you won’t be using purple.

Other Mappings

There are plenty of other color mappings used in Procore. Here are a few that you’re not likely to use as often. As always, slack us at #design-system-team if your color question isn’t answered!

Up Next