Procore’s color palette is comprised of neutrals that compliment our primary orange color. It’s important to understand the context of when & where these colors are used. Below are our most common colors used in Procore. The full library can be found in the Web Library in Figma.
Color page intro image.

Primary Colors


Example of orange 50
Orange 50
This is our primary brand color.


Example of grey 15
Grey 15
Default text color.
Example of grey 45
Grey 45
Secondary or de-emphasized text or UI.


Example of white
Component background color in light themes.
Example of grey 96
Grey 96
Page background color in light themes.


Example of blue 45
Blue 45
Used for text links.
Example of blue 50
Blue 50
Used for text links.
Example of blue 40
Blue 40
Use for focus.

Semantic Colors

Example of green 30
Green 30
Green is used to indicate success or to celebrate an achievement.
For example, you’ll see green used in our success toasts and banners.
Example of yellow 40
Yellow 40
Yellow is used for warning or caution states. You will see yellows
in pills and banners.
Example of red 50
Red 50
Red is used for error states. For example, error banners.

Accent Colors

Example of purple
Example of magenta
Example of cyan

Other Mappings

There are plenty of other color mappings used in Procore and more to be defined
on the way!

Up Next