How to define color usage through semantic sets for design systems

This article discusses defining color usage through semantic sets when creating a design system. It explains the difference between primitive colors, individual colors from a brand palette, and semantic color names, which define how a primitive color will be used. Primitive colors are attached to semantic names.

It recommends dividing all color styles into foregrounds, backgrounds, and borders. It suggests top-level semantic color sets like these categories and more specific styles for interactive components, inputs, system components, and accents.