Color
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.
Primary Colors
Brand
Orange 50
This is our primary brand color.
Text
Grey 15
Default text color.
Grey 45
Secondary or de-emphasized text or UI.
Backgrounds
White
Component background color in light themes.
Grey 96
Page background color in light themes.
Interactive
Blue 45
Used for text links.
Blue 50
Used for text links.
Semantic Colors
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.
Yellow 40
Yellow is used for warning or caution states. You will see yellows
in pills and banners.
Red 50
Red is used for error states. For example, error banners.
Other Mappings
There are plenty of other color mappings used in Procore and more to be defined
on the way!
Up Next
