Custom properties

Custom properties, often referred to as CSS variables, come with one guideline: Don’t use them before you need to. They are used in the design system CSS, meaning their intended use is defined in the base, utilities and components. When those classes don’t cover the needs because a string of utilities is getting too long or the app requires something custom, we use the properties with a conscious mind.