Color from Chaos

Design systems are built on top of many other systems, and each part has to be designed in context with the rest. Many people don't start creating a design system with a clean slate. We're often starting with something already designed, code already deployed, and customers already using interfaces. Over time, design decisions lose their purpose as the number of people who've worked on a single page grows, and the code behind the UI has been iterated on many times. This means working on design systems in not just designing the system itself, but also creating order from chaos.

In this talk I share my experience creating design systems. I zoom into a single part of the system—color—and show you how this one element scales and influences in ways you may not even think to design for.

Transcript

1. Diana Mounter Color from chaos
2. Hi! I’m Diana Design Infrastructure Manager GitHub @broccolini
4. Color From Chaos — @broccolini April 2019 A home for all developers
5. Hi! I’m Diana I love black.
6. Hi! I’m Diana I hate pink.
7. Hi! I’m Diana I hate pink. Except in my hair.
8. – The Secret Lives of Color, 99% Invisible Over the course of human history, the search for the brightest splash of color has been a defining feature of our species
9. A color to die for Victorian green wallpaper made with arsenic
11. Color From Chaos — @broccolini April 2019 Working with color
12. Color From Chaos — @broccolini April 2019 Color is subjective
13. Color From Chaos — @broccolini April 2019 Age, mood, personal background, and current trends, can affect how someone responds to color.
15. Contemporary, bold, or hurts your eyes?
16. Contemporary, bold, or hurts your eyes?
19. Color From Chaos — @broccolini April 2019 There’s a lot of color theory to learn
21. Images from programmingdesignsystems.com Triadic Tetradic
22. HSL HSV
23. Visualization of Albert Henry Munsell’s color tree from
 the 1943 renovation.
25. Color is complicated and fascinating
26. Color From Chaos — @broccolini April 2019 Color in design systems
27. Color From Chaos — @broccolini April 2019 A color system is a subsystem
28. Color From Chaos — @broccolini April 2019 Observing the chaos
29. Color From Chaos — @broccolini April 2019 We rarely begin designing systems with no prior art
31. Color From Chaos — @broccolini April 2019 Look for patterns in the chaos
32. 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
33. background text
34. background text
35. – Thinking in Systems The system itself causes it’s own behavior
36. Color From Chaos — @broccolini April 2019 Are you happy with the output of 
 the current system?
37. 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?
38. April 2019 Color Frome Chaos - @broccolini More modern colors Improved color contrast A system that was easy to follow Maintainability of color usage Goals
39. Color From Chaos — @broccolini April 2019 Designing the API
40. Color From Chaos — @broccolini April 2019 Application Programming Interface
41. Color From Chaos — @broccolini April 2019 Application Programming Interface
42. Color From Chaos — @broccolini April 2019 Interface design language
43. Green 400
44. class="green-400" color: $green-400; color='green.4' color.green[4] Green 400
45. class="green-400" color: $green-400; color='green.4' color.green[4]
46. Color From Chaos — @broccolini April 2019 Naming conventions
47. Name Descriptor Purpose red green yellow blue cyan indigo violet gray black warm cool bright light dark deep dull muted faded foreground background border fill primary secondary highlight accent alt (alternative)
48. Airbnb Design System Language Rausch Babu Arches Hof Foggy
49. Orange Cara cara Creamsicle Blinding Sandstorm Etsy
50. primary primary-darker primary-darkest base gray-dark gray-light white US Web Standards
51. brand-01 brand-02… text-01 text-02… ui-02 ui-03… support-01 support-02… Carbon design system
52. Green Light green Lime… Yellow Amber Orange 
 Deep Orange… Indigo Blue Light blue Cyan Teal… Material design
53. A100, A200… 50, 100, 200…
54. Color From Chaos — @broccolini April 2019 How do we identify a given color?
55. Yellow, amber, or orange?
56. – 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 different.
57. Color From Chaos — @broccolini April 2019 What’s important for your 
 naming convention?
58. Knowing what the color is by name only Internalizing color names in code Vocabulary for conversations about color
59. blue-000 blue-100 blue-300… green-000 green-100 green-300… red-000 red-100 red-300… Primer colors
60. Color From Chaos — @broccolini April 2019 Color influence
61. Color From Chaos — @broccolini April 2019 Look at the interconnections, 
 not just the elements
62. Interaction model Component Page Component button Primitive
64. #333333 Hue 0° Saturation 0 Lightness 0.2 #24292e Hue 210° Saturation 0.12 Lightness 0.16
65. broccolini.net/50shadesofblk
66. Vantablack
67. Lightness 0.16 Saturation 0.12 Hue 210°
68. Aa 9.87 AAA Aa 5.19 AA Aa 5.09 AA
71. Initially shipped After
72. Color difference
73. Color difference Deuteranomaly
74. Pratanopio Protanomaly Deuteranopia Deuteranomaly Tritanopia Tritanomaly Achromatopsia Achromatomaly Low-Contrast
77. Green’s that passed felt like 
 a huge departure
78. Aa 3.13 AA Large Aa 2.14 FAIL
79. Before After Future…?
80. Color From Chaos — @broccolini April 2019 Incremental correctness
81. Color From Chaos — @broccolini April 2019 Programming design systems
82. Lighter Darker More saturated Less saturated
83. Lighter Darker More saturated Less saturated
84. Lightness 23 Hue 24 25 26 27 0.5 1 0 29 30
85. Weber-Fechner Law The relationship between actual change 
 and perceived change
86. 1 2 3 4 1 2 4 8 Increasing the quantity of color in each step does not result in equal gradation.
87. What is perceived is hard 
 to calculate
88. 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
89. palx.jxnblk.com
90. Not impossible, just difficult
91. Color From Chaos — @broccolini April 2019 A living system
92. Color From Chaos — @broccolini April 2019 Feedback loops
93. 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
94. Color From Chaos — @broccolini April 2019 Creativity happens at the boundaries of a system
96. Design systems should be built for change
97. – Kassia St. Claire Colors are cultural creations, they’re shifting all the time
98. – Kassia St. Claire Color is not a precise thing, it’s changing, 
 it’s living, it’s constantly being redefined 
 and argued over
99. – Kassia St. Claire …that’s part of the magic of it.
100. Color From Chaos — @broccolini April 2019 Thank you @broccolini