This LinkedIn post by Filippos Protogeridis, a Product Design Leader, explores how designers can structure color scales and tokens within design systems. Protogeridis shares his insights after analyzing hundreds of design systems and experimenting with multiple approaches, ultimately recommending a foundational method built around “Primitive Colors.” These are the base color sets—like purple-600, purple-500, and purple-400—that serve as the groundwork for defining a design system’s visual identity.
The post emphasizes that designers should start from their main brand colors and use tools such as UIColor, SupabasePalette, or Colorbox to expand these into a full-scale palette. While this system ensures consistency across shades and brightness levels, Protogeridis also cautions that using primitive colors directly in design can lead to ambiguity and misuse, as they lack contextual meaning. Instead, he encourages building upon these primitives with meaningful semantic naming to bridge the gap between brand consistency and real-world usability in product design.
