Palettes

There are three palettes: Action, greyscale, and user collection. Each of those have two secondary palettes: light (for highlights, hover) and dark (for shadows, tapped/down states).

Action Primary

blue
rgb 0, 146, 255
hex #0092ff

green
rgb 0, 153, 0
hex #009900

t

red
rgb 204, 0, 0
hex #cc0000

Action is used for buttons, alerts, etc. Blue is for positive or benign interactions: Purchase, contact, etc. Green is for success, red means failure or error.

Action Secondary

rgb 64, 173, 255
hex #40adff

rgb 77, 153, 77
hex #4d994d

rgb 255, 108, 112
hex #cc3333


rgb 0, 109, 191
hex #006dbf

rgb 0, 89, 0
hex #005900

rgb 140, 0, 0
hex #8c0000

Action is used for buttons, alerts, etc. Light blue is for universal actions: Sign in/sign up, log out, etc. Blue is for positive or benign interactions: Purchase, contact, etc. Green is for success, red means failure or error.

Greyscale Primary

almost black
rgb 26, 26, 26
hex #1a1a1a

dark grey
rgb 121, 121, 121
hex #797979

grey
rgb 203, 203, 203
hex #cbcbcb

light grey
rgb 241, 241, 241
hex #f1f1f1

white
rgb 255, 255, 255
hex #ffffff

Greyscale is our supporting palette.

Greyscale Secondary

rgb 83, 83, 83
hex #535353

rgb 155, 155, 155
hex #9b9b9b

rgb 216, 216, 216
hex #d8d8d8

rgb 245, 245, 245
hex #f5f5f5


rgb 19, 19, 19
hex #131313

rgb 91, 91, 91
hex #5b5b5b

rgb 152, 152, 152
hex #989898

rgb 181, 181, 181
hex #b5b5b5

rgb 191, 191, 191
hex #bfbfbf

Greyscale is our supporting palette.

Feed Collections Primary

dark blue
rgb 45, 69, 126
hex #2d457e

light blue
rgb 25, 123, 153
hex #197b99

green
rgb 27, 130, 21
hex #1b8215

yellow
rgb 255, 179, 0
hex #ffb300

orange
rgb 204, 68, 13
hex #cc440d

red
rgb 201, 51, 51
hex #c93333

pink
rgb 204, 51, 136
hex #cc3388

purple
rgb 122, 54, 117
hex #7a3675

The feed collection palette is for collections. But instead of light/dark palettes, the supporting tone is an opacity level of 50%. This is to achieve the layered monotone effect used in feed collections.

Feed Collections Secondary

50%