https://frontendmasters.com/courses/intermediate-react-v2/design-systems-compound-selectors/

Building a Design System

create colors.css

  //    ****        colors.js        ****

export default {
  primary: "#bf3334",
  secondary: "#d9c148",
  dark: "#122622",
  light: "#81a69b"
};

With this setup you can centralize your colors and import them into components.

Hover states (CSS)

  <span
  css={css`
  font-size: 60px;
  &:hover {
    text-decoration: underline;
  }
  // or, you can also do
  & > button {
    ...
  }
  `}
>🐩</span>