Pragmatic approach to designing a generic style guide in CSS

  1. Start with the basics, the raw values.
  2. Define the semantic, easy-to-remember values referring to the more raw values defined in point 1.
  3. Define some basic styles like links and html tags.

Point 1 + 2 = system.css Point 3 = styles.css

A design system with mostly variables, List of design systems