Interaction of color systems
summary
Design system work reduces 2,449 hex values of unmanaged color into a constrained palette, introduces a numeric naming scale, and tests combinations on high‑traffic UI like buttons, labels, contribution graph and file icons. Accessibility checks reveal green failing some contrasts; programmatic generation (hue bending, luminance stepping, Weber–Fechner perception issues) helps but needs hand tuning. Deployment updates 579 hex values (~23% of codebase), feels like ~80% of daily UI, and provokes mixed user reactions. 2,449 hex values 579 hex values Spectrum plugin Learner mono repo
AI-written summary · about
chapters (14)
- 0:00Intro
- 1:25Background
- 4:00Color is subjective
- 4:38Learning about color
- 9:24Why
- 11:08Palette
- 14:15Button
- 15:57Testing
- 17:52System rules
- 23:11Variables
- 24:51Colors
- 26:29Interaction of color
- 28:17Wrapping up
- 29:31What did people think
related talks
42m“The Interaction of Color Systems”
43mRethinking Colors in Design Systems: A CSS Approach to Idiomatic Design
19mWhen colour theory meets technology
28mArchitecting a Robust Color System with Swift
22mDesign Systems, when and how much? — Diana Mounter
41mColor - The Shadow Ruler of UX
53mPractical Color Theory for People Who Code
23mDesign Tokens on Asana's Design Systems Team