Color from Chaos

2d84f9cec8c91449388bfb2b8078ef28?s=47 Diana
April 05, 2019

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.

2d84f9cec8c91449388bfb2b8078ef28?s=128

Diana

April 05, 2019
Tweet

Transcript

  1. Diana Mounter Color from chaos

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

  3. None
  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
  10. None
  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.
  14. None
  15. Contemporary, bold, or hurts your eyes?

  16. Contemporary, bold, or hurts your eyes?

  17. None
  18. None
  19. Color From Chaos — @broccolini April 2019 There’s a lot

    of color theory to learn
  20. None
  21. Images from programmingdesignsystems.com Triadic Tetradic

  22. HSL HSV

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

    renovation.
  24. None
  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
  30. None
  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

  63. None
  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

  69. None
  70. None
  71. Initially shipped After

  72. Color difference

  73. Color difference Deuteranomaly

  74. Pratanopio Protanomaly Deuteranopia Deuteranomaly Tritanopia Tritanomaly Achromatopsia Achromatomaly Low-Contrast

  75. None
  76. None
  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
  95. None
  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