Color

Brand palette

At Propel, we fully embrace our multicolor identity with a palette of five vibrant hues. Each of our brand colors is given equal prominence, reflecting the diverse needs of our users and the broad range of our offerings.

Each hue is available in a range of tints and shades. Our mid-range hues rise to the surface, catching the eye with energy and clarity. Our lighter tints, gentle and easy on the eyes, provide a calming balance. Darker shades are punchy and grounding, bringing a sense of depth through object shadows.

A high-contrast base of white with sleek, black accents allows moments of color to pop with an editorial edge. A spectrum of gray tones is also available for functional UI elements, ensuring clarity and usability.

Color swatches

We use true white and true black.

White
#FFFFFF
C:0 M:0 Y:0 K:0

Black
#000000
C:100 M:100 Y:100 K:100

Each of our brand colors is available in five levels of value, with 100 being the lightest and 500 being the darkest.

Red 100
#FFE5DD
C:0 M:27 Y:20 K:0
PMS 699C

Red 200
#FFAAA5
C:0 M:50 Y:30 K:0
PMS 4067C

Red 300
#FF6969
C:0 M:74 Y:56 K:0
PMS 2346C

Red 400
#F52323
C:0 M:96 Y:85 K:4
PMS 185C

Red 500
#CD000C
C:0 M:100 Y:98 K:20
PMS 186C

Blue 100
#E0EDFF
C:24 M:9 Y:0 K:0
PMS 2120C

Blue 200
#B2CFFA
C:34 M:15 Y:0 K:0
PMS 2128C

Blue 300
#7A95F8
C:65 M:36 Y:0 K:0
PMS 2381C

Blue 400
#496AE0
C:82 M:52 Y:0 K:0
PMS 4150C

Blue 500
#1A43D7
C:100 M:76 Y:0 K:0
PMS 7686C

Green 100
#DCF2CB
C:24 M:0 Y:34 K:0
PMS 7485C

Green 200
#B8DA96
C:35 M:0 Y:53 K:0
PMS 579C

Green 300
#8BC95A
C:55 M:0 Y:80 K:0
PMS 2269C

Green 400
#3FA41C
C:73 M:2 Y:100 K:6
PMS 361C

Green 500
#1F7400
C:88 M:26 Y:100 K:6
PMS 2259C

Gold 100
#FFF0BA
C:0 M:6 Y:43 K:0
PMS 7401C

Gold 200
#FCDE74
C:0 M:12 Y:68 K:0
PMS 2004C

Gold 300
#FFC120
C:0 M:21 Y:92 K:0
PMS 7408C

Gold 400
#F99500
C:0 M:49 Y:100 K:0
PMS 2011C

Gold 500
#F47500
C:0 M:70 Y:100 K:0
PMS 4010C

Purple 100
#EBE4FF
C:16 M:18 Y:0 K:0
PMS 2365C

Purple 200
#CDBCFF
C:32 M:31 Y:0 K:0
PMS 2645C

Purple 300
#AC8EFF
C:50 M:47 Y:0 K:0
PMS 2087C

Purple 400
#804FE8
C:70 M:68 Y:0 K:0
PMS 2088C

Purple 500
#6431D0
C:87 M:85 Y:0 K:0
PMS 2090C

The same value levels apply to our gray.

Gray 100
#F9F8F7 
C:0 M:0 Y:0 K:12

Background

Gray 200
#E7E6E5 
C:0 M:0 Y:0 K:25

Border & divider

Gray 300
#B2B1B0 
C:0 M:0 Y:0 K:45

Disabled text

Gray 400
#868584 
C:0 M:0 Y:0 K:64

Placeholder text

Gray 500
#51504F 
C:0 M:0 Y:0 K:87

Secondary text

Background colors & accessibility

White is our primary background and can be used with any text color state.

To keep our materials ultra accessible, avoid using darker backgrounds for layouts that contain text.

White text is used only when it is contained in a black button.

Color usage guidelines

Our colors are bright and should be used sparingly to create visual interest and moments of delight, either as calm backgrounds or as bright accents.

To avoid clashing, different color families should never touch each other. Instead, opt for a variety of single-hued compositions and use white padding to break up color groupings.

Do this

Single-color layout

Not this

Multi-color layout