Pavel Kiselev shares his approach to building robust and flexible color systems that support both light and dark themes. He advocates using design tokens to name each color, organized into global, system and component layers. Global colors set the visual tone, while system colors provide structure between themes. Component colors represent individual UI elements.
Kiselev describes a naming convention based on how colors are used – “fill” for backgrounds, “stroke” for borders, and “text” for copy. He outlines processes for selecting neutral shades and accent hues that transition seamlessly between light and dark. Component colors are derived from systems colors to style specific interfaces.
The author also discusses utilities like shades and tints, accessibility considerations, and modular approaches using variable color palettes. Examples demonstrate color usage and theme transitions. Resources include Figma design files for experimenting with the techniques. In all, Kiselev presents a thoughtful methodology for building future-proof and multi-brand color systems.
