Color Systems - Speaker Deck

Slide 1

Slide 1 text

Color Systems Diana Mounter | @broccolini

Slide 2

Slide 2 text

Design Systems at GitHub !

Slide 3

Slide 3 text

Why?

Slide 4

Slide 4 text

“Dad jeans blue” Some of our colors were looking outdated.

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

2,449  hex values

Slide 7

Slide 7 text

Designing a system

Slide 8

Slide 8 text

As a user I can use color with consistency and conﬁdence (that colors can only be used as intended).

Slide 9

Slide 9 text

• The color palette • How colors can be used • Ensuring rules can be followed successfully

Slide 10

Slide 10 text

Research existing use of color

Slide 11

Slide 11 text

Material Design NHS Identity Guidelines Solid by Buzzfeed US Web Standards

Slide 12

Slide 12 text

Name Descriptor Purpose red green yellow blue cyan indigo violet gray black warm cool bright light dark deep dull muted faded foreground background border ﬁll primary secondary highlight accent

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

.utilities {…} .Components {…} .custom-styles {…} $foreground $background $border

Slide 15

Slide 15 text

Building the palette

Slide 16

Slide 16 text

“If one says ‘Red’ (the name of the color) and there are 50 people listening, it can be expected that there will be 50 reds in their minds. And one can be sure that all these reds will be very di!erent.” Josef Albers, Interaction of Color

Slide 17

Slide 17 text

www.webpagefx.com/w https://colorable.jxnblk.com

Slide 18

Slide 18 text

workwithcolor.com/hs www.webpagefx.com/web-design/hex-to-rgb ble.jxnblk.com

Slide 19

Slide 19 text

https://colors workwithcolor.com/hsl-color-picker-01.htm web-design/hex-to-rgb

Slide 20

Slide 20 text

https://colorsnapper.com l-color-picker-01.htm

Slide 21

Slide 21 text

Testing different types of color deﬁciency using Spectrum chrome plugin

Slide 22

Slide 22 text

Review current color Test new base color Test & tweak Compare to rest of palette Test & tweak Post in slack for quick feedback Build out rest of color family Test & tweak Update UI components Deploy to branch-lab Get feedback

Slide 23

Slide 23 text

Testing Code Review Collaboration

Slide 24

Slide 24 text

Were we successful?

Slide 25

Slide 25 text

Old New

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

H 240 S 1 L 33 #0000aa #0366d6 H 212 S 97 L 43 Btw ;)

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

“Color is the most relative medium in art” Interaction of Color

Slide 34

Slide 34 text

Palette Composition Context Observation We control (mostly) Don’t control, but can test

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text