Skip to content
Gusto’s condensed “G” logoWorkbench

Product colors

Color can be used to showcase our vibrant personality or help guide a user through a complex workflow. This guide covers how Gusto’s Brand and Product Design teams use color.
Figma logo

Colors should be used sparingly within our products to help keep our users stay focused. Color should be applied to emphasize important information, call attention to actions, and increase scannability. Color should not be used in Gusto to arbitrarily add personality.

Color palettes

Text and border colors, drop-shadows and other interface components use Salt. We’ve designed this palette to be accessible for text with salt-800 and above.

Color values and purposes for the Workbench Salt color palette
salt-100
Backgrounds, primary/destructive CTA text
salt-200
Table headers, general purpose backgrounds
salt-300
Input backgrounds, step headers
salt-400
Dividers
salt-500
All other borders, disabled button bg
salt-600
Disabled icons
salt-700
Form/input borders, navigation icons
salt-800
Default Step Header titles, Step List subtitles
salt-900
Body text, Info Alert/Toast border
salt-1000
Headers, titles, labels

Kale is the color we use to signify that an element is clickable or has a selected state. Card is one example of this as you hover over them.

Color values and purposes for the Workbench Kale color palette
kale-100
Some specific backgrounds
kale-400
Used for non-functional UI elements
kale-500
Default clickable color, Success Alert/Toast border
kale-800
Link and Primary Button hover background color

Guava is used for thematic/navigational elements in our interface.

Color values and purposes for the Workbench Guava color palette
guava-100
Some specific backgrounds
guava-500
Active tab + nav icon, progress bar

To communicate to users that something requires their immediate attention.

Color values and purposes for the Workbench Warning color palette
warning-100
Warning Alert background
warning-500
warning-700
Warning Alert/Tag border

These are reserved for times when something important is missing or for irreversible or destructive actions.

Color values and purposes for the Workbench Danger/Error color palette
error-100
Danger (aka error) alert, Invalid form field bg
error-500
Danger (error) link/Button/icon, error text, error alert border
error-800
Destructive link/CTA/icon bg on hover