Color from Chaos - Speaker Deck

Slide 1

Slide 1 text

Diana Mounter Color from chaos

Slide 2

Slide 2 text

Hi! I’m Diana Design Infrastructure Manager GitHub @broccolini

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Color From Chaos — @broccolini April 2019 A home for all developers

Slide 5

Slide 5 text

Hi! I’m Diana I love black.

Slide 6

Slide 6 text

Hi! I’m Diana I hate pink.

Slide 7

Slide 7 text

Hi! I’m Diana I hate pink. Except in my hair.

Slide 8

Slide 8 text

– The Secret Lives of Color, 99% Invisible Over the course of human history, the search for the brightest splash of color has been a deﬁning feature of our species

Slide 9

Slide 9 text

A color to die for Victorian green wallpaper made with arsenic

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

Color From Chaos — @broccolini April 2019 Working with color

Slide 12

Slide 12 text

Color From Chaos — @broccolini April 2019 Color is subjective

Slide 13

Slide 13 text

Color From Chaos — @broccolini April 2019 Age, mood, personal background, and current trends, can aﬀect how someone responds to color.

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

Contemporary, bold, or hurts your eyes?

Slide 16

Slide 16 text

Contemporary, bold, or hurts your eyes?

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Color From Chaos — @broccolini April 2019 There’s a lot of color theory to learn

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

Images from programmingdesignsystems.com Triadic Tetradic

Slide 22

Slide 22 text

HSL HSV

Slide 23

Slide 23 text

Visualization of Albert Henry Munsell’s color tree from  the 1943 renovation.

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Color is complicated and fascinating

Slide 26

Slide 26 text

Color From Chaos — @broccolini April 2019 Color in design systems

Slide 27

Slide 27 text

Color From Chaos — @broccolini April 2019 A color system is a subsystem

Slide 28

Slide 28 text

Color From Chaos — @broccolini April 2019 Observing the chaos

Slide 29

Slide 29 text

Color From Chaos — @broccolini April 2019 We rarely begin designing systems with no prior art

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

Color From Chaos — @broccolini April 2019 Look for patterns in the chaos

Slide 32

Slide 32 text

Color From Chaos — @broccolini April 2019 #eee #ddd #fefefe #eee #e49649 #d8d8d8 #ddd #eee #fefefe #ddd #e49649 #eee #fefefe #eee #ddd #fefefe #d8d8d8 #eee #fefefe #eee #e49649 #d8d8d8 #ddd #eee #fefefe #eee #ddd

Slide 33

Slide 33 text

background text

Slide 34

Slide 34 text

background text

Slide 35

Slide 35 text

– Thinking in Systems The system itself causes it’s own behavior

Slide 36

Slide 36 text

Color From Chaos — @broccolini April 2019 Are you happy with the output of   the current system?

Slide 37

Slide 37 text

April 2019 Color Frome Chaos - @broccolini Are you introducing a system to make it easier for others to follow? Or do you want to improve the results of the system? Are you happy with the output of the current system?

Slide 38

Slide 38 text

April 2019 Color Frome Chaos - @broccolini More modern colors Improved color contrast A system that was easy to follow Maintainability of color usage Goals

Slide 39

Slide 39 text

Color From Chaos — @broccolini April 2019 Designing the API

Slide 40

Slide 40 text

Color From Chaos — @broccolini April 2019 Application Programming Interface

Slide 41

Slide 41 text

Color From Chaos — @broccolini April 2019 Application Programming Interface

Slide 42

Slide 42 text

Color From Chaos — @broccolini April 2019 Interface design language

Slide 43

Slide 43 text

Green 400

Slide 44

Slide 44 text

class="green-400" color: $green-400; color='green.4' color.green[4] Green 400

Slide 45

Slide 45 text

class="green-400" color: $green-400; color='green.4' color.green[4]

Slide 46

Slide 46 text

Color From Chaos — @broccolini April 2019 Naming conventions

Slide 47

Slide 47 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 alt (alternative)

Slide 48

Slide 48 text

Airbnb Design System Language Rausch Babu Arches Hof Foggy

Slide 49

Slide 49 text

Orange Cara cara Creamsicle Blinding Sandstorm Etsy

Slide 50

Slide 50 text

primary primary-darker primary-darkest base gray-dark gray-light white US Web Standards

Slide 51

Slide 51 text

brand-01 brand-02… text-01 text-02… ui-02 ui-03… support-01 support-02… Carbon design system

Slide 52

Slide 52 text

Green Light green Lime… Yellow Amber Orange   Deep Orange… Indigo Blue Light blue Cyan Teal… Material design

Slide 53

Slide 53 text

A100, A200… 50, 100, 200…

Slide 54

Slide 54 text

Color From Chaos — @broccolini April 2019 How do we identify a given color?

Slide 55

Slide 55 text

Yellow, amber, or orange?

Slide 56

Slide 56 text

– Josef Albers, Interaction of Color 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.

Slide 57

Slide 57 text

Color From Chaos — @broccolini April 2019 What’s important for your   naming convention?

Slide 58

Slide 58 text

Knowing what the color is by name only Internalizing color names in code Vocabulary for conversations about color

Slide 59

Slide 59 text

blue-000 blue-100 blue-300… green-000 green-100 green-300… red-000 red-100 red-300… Primer colors

Slide 60

Slide 60 text

Color From Chaos — @broccolini April 2019 Color inﬂuence

Slide 61

Slide 61 text

Color From Chaos — @broccolini April 2019 Look at the interconnections,   not just the elements

Slide 62

Slide 62 text

Interaction model Component Page Component button Primitive

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

#333333 Hue 0° Saturation 0 Lightness 0.2 #24292e Hue 210° Saturation 0.12 Lightness 0.16

Slide 65

Slide 65 text

broccolini.net/50shadesofblk

Slide 66

Slide 66 text

Vantablack

Slide 67

Slide 67 text

Lightness 0.16 Saturation 0.12 Hue 210°

Slide 68

Slide 68 text

Aa 9.87 AAA Aa 5.19 AA Aa 5.09 AA

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

Initially shipped After

Slide 72

Slide 72 text

Color diﬀerence

Slide 73

Slide 73 text

Color diﬀerence Deuteranomaly

Slide 74

Slide 74 text

Pratanopio Protanomaly Deuteranopia Deuteranomaly Tritanopia Tritanomaly Achromatopsia Achromatomaly Low-Contrast

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

Green’s that passed felt like   a huge departure

Slide 78

Slide 78 text

Aa 3.13 AA Large Aa 2.14 FAIL

Slide 79

Slide 79 text

Before After Future…?

Slide 80

Slide 80 text

Color From Chaos — @broccolini April 2019 Incremental correctness

Slide 81

Slide 81 text

Color From Chaos — @broccolini April 2019 Programming design systems

Slide 82

Slide 82 text

Lighter Darker More saturated Less saturated

Slide 83

Slide 83 text

Lighter Darker More saturated Less saturated

Slide 84

Slide 84 text

Lightness 23 Hue 24 25 26 27 0.5 1 0 29 30

Slide 85

Slide 85 text

Weber-Fechner Law The relationship between actual change   and perceived change

Slide 86

Slide 86 text

1 2 3 4 1 2 4 8 Increasing the quantity of color in each step does not result in equal gradation.

Slide 87

Slide 87 text

What is perceived is hard   to calculate

Slide 88

Slide 88 text

ProgrammingDesignSystems.com var boxh = height / 10; for(var i = 0; i < 10; i++) { var h = lerp(64, 22, i / 9); var s = lerp(86, 90, i / 9); var l = lerp(96, 56, i / 9); fillHsluv(h, s, l); rect(0, i * boxh, width, boxh); } Procedurally generating color

Slide 89

Slide 89 text

palx.jxnblk.com

Slide 90

Slide 90 text

Not impossible, just diﬃcult

Slide 91

Slide 91 text

Color From Chaos — @broccolini April 2019 A living system

Slide 92

Slide 92 text

Color From Chaos — @broccolini April 2019 Feedback loops

Slide 93

Slide 93 text

Color system   feedback loops • more utilities that represent color system variables • variables commonly used with a color function to be altered • additional colors frequently added that don't follow the system

Slide 94

Slide 94 text

Color From Chaos — @broccolini April 2019 Creativity happens at the boundaries of a system

Slide 95

Slide 95 text

No content

Slide 96

Slide 96 text

Design systems should be built for change

Slide 97

Slide 97 text

– Kassia St. Claire Colors are cultural creations, they’re shifting all the time

Slide 98

Slide 98 text

– Kassia St. Claire Color is not a precise thing, it’s changing,   it’s living, it’s constantly being redeﬁned   and argued over