Colors

Bring attention to core elements and actions on the screen.

Intention

Our color palette is designed to be:

Clear. We use colors to focus attention and meaningfully pinpoint what people need to see.

Legible. Our color combinations meet at least AA standard contrast ratios. We check for APCA lightness of at least 60º for shorter text elements.

Bold. We use colors in a way that users feel confident when presenting their content from Productboard. Our colors are vibrant, appealing and provide greater visibility to important elements.

Midnight

Productboard’s main gray scale palette for neutral backgrounds and content. Its main purpose is to set correct information hierarchy.

color / midnight

#f7f7f9

#090e11

#f0f0f4

#0d1418

#dddde6

#19252e

#bec0d1

#2d3d4e

#acb1c6

#3d4a59

#70788b

#4f5a6a

#888fa2

#303d4b

#bec0d1

#19252e

#dddde6

#10181d

#ececf1

#060810

#f7f7f9

Blue

The blue color is the dominant color of our brand and we use its derivates for our primary color palette. It helps us to pinpoint exactly what our users should focus on.

color / blue

#f7faff

#041531

#edf4ff

#051a3b

#cfe2ff

#06285a

#a2c9ff

#063f8b

#7bb5ff

#0561cb

#1588ff

#178bff

#0071e1

#77b4ff

#054fa8

#9ac5ff

#063779

#cce0ff

#062c62

#ecf3ff

#052452

#f7faff

Red

Used across Productboard to convey negative or critical information.

color / red

#fffafa

#2d0416

#ffefef

#37051a

#fecfd0

#550824

#fba0a3

#830c2f

#f25761

#cd1433

#e81d2e

#e92c3b

#bc1233

#f25761

#830c2f

#fba0a3

#550824

#fecfd0

#3e061d

#ffe8e8

#2d0416

#fffafa

Yellow

Tertiary brand color, often applied to icons, illustrations and certain call to actions.

color / yellow

#fefcea

#241005

#fefadf

#2e1506

#fdf5c1

#4b2608

#fcec90

#7c470a

#fddf51

#bc7e07

#ffc600

#ffcc09

#be8007

#fdde4f

#7c470a

#fcec90

#4b2608

#fdf5c1

#341807

#fdf9d9

#241005

#fefcea

Green

Used across Productboard to convey positive messaging.

color / green

#f1fcef

#071a13

#e9fae6

#092318

#d1f5ca

#103d25

#aeeda0

#19672e

#83e26b

#229d27

#56d630

#1f8b2c

#91e67c

#19672e

#aeeda0

#103d25

#d1f5ca

#0b291c

#e4f9e0

#071a13

#f1fcef

Purple

Most often associated with discovery of new features.

color / purple

#fbf7fd

#190e2d

#f7eefb

#1e1035

#ebd5f5

#2f174f

#dbaeed

#4e1f77

#c15bde

#7f27ac

#b030d8

#ba3eda

#851fb8

#c466e0

#531487

#dbadec

#310d5e

#ebd5f5

#230949

#f7eefb

#1a073a

#fbf7fd

Orange

Complementary color used in imagery and specific statuses.

color / orange

#fff6eb

#2c0902

#fff1e0

#370c02

#ffe2c1

#551503

#fec791

#862805

#fc9847

#d34f06

#eb5e06

#ed5f06

#c34606

#fc9745

#862805

#fec791

#551503

#ffe2c1

#3d0e03

#ffeed9

#2c0902

#fff6eb

Pink

Complementary color used in imagery and specific statuses.

color / pink

#fef6fa

#2c070c

#fdecf5

#360810

#fad0e5

#510d1c

#f4a4ce

#7d1334

#e853a7

#cf1d76

#da1e81

#e33399

#b41a5e

#e954a8

#7d1334

#f4a4ce

#510d1c

#fad0e5

#3c0912

#fce6f1

#2c070c

#fef6fa

Lime

Complementary color used in imagery and specific statuses.

color / lime

#f5fbdf

#0f1a06

#f2fad6

#152308

#e9f5ba

#263d0e

#daee91

#456516

#c7e25f

#739820

#b0d22b

#65891e

#cde66d

#456516

#daee91

#263d0e

#e9f5ba

#182809

#f0f9d0

#0f1a06

#f5fbdf

Teal

Complementary color used in imagery and specific statuses.

color / teal

#f2fbf9

#031a1c

#e9f8f5

#042426

#cff2ea

#084143

#a5e9db

#0f6f6d

#6de0ca

#189e92

#2cdabb

#189e92

#76e1cc

#0f6f6d

#a5e9db

#084143

#cff2ea

#052a2c

#e4f7f3

#031a1c

#f2fbf9