Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

Mastering Dynamic UI Theming for Designers at B...

Roman Shamin
September 18, 2023

Mastering Dynamic UI Theming for Designers at Bites & Bytes

In this talk, I explain an essential new principle for generating dynamic UI themes on the fly. The key lies in the color transformations made possible by the new OKLCH color space, and I use my latest APCA Contrast Figma plugin, Polychrom, to demonstrate how it works.

Roman Shamin

September 18, 2023
Tweet

More Decks by Roman Shamin

Other Decks in Design

Transcript

  1. Dynamic UI
 Theming Mastering for designers Not Readable Aa 38

    0 106 Polychrom le 0 108 0 0 62% 0.22 259 om Not Readable Aa 18 0 100% 0 0 62% Polychrom Non-Text Aa 34 0 108 100% 0 0 62% 0.22 259 Polychrom Aa 75 0 108 100% 0 0 59% 0.22 262.6 #BitesAndBytesLisbon
  2. Body Text Rg 18px Bd 14px Aa 75 0 108

    100% 0 0 59% 0.22 262.6 Polychrom Non-Text Aa 34 0 108 100% 0 0 62% 0.22 259 Polychrom Not Readable Aa 18 0 106 100% 0 0 62% 0.22 259 Polychrom Invisible Aa 0 0 108 100% 0 0 62% 0.22 259 Polychrom Demo
  3. Actually it doesn’t! Approach 1 Test 75 Selecting
 white text


    on a white BG
 leads to an
 unusable UI
  4. We need enough contrast between text and BG in UI

    THe problem 9 Aa It’s hard to read
 the number in this UI ?
  5. Perceptual
 uniformity P3 gamut OKLCH color model at a glance

    Chroma Dull—vivid Hue Red, yellow, etc Lightness Dark—bright
  6. Convert to OKLCH Transform colors Ensure a11y in UI Body

    Text Rg 18px Bd 14px Aa 75 0 108 100% 0 0 59% 0.22 262.6 Polychrom Non-Text Aa 34 0 108 100% 0 0 62% 0.22 259 Polychrom Not Readable Aa 18 0 106 100% 0 0 62% 0.22 259 Polychrom Invisible Aa 0 0 108 100% 0 0 62% 0.22 259 Polychrom