Creating and applying layer styles for component styling at scale

Definition | “UI Styles” in this case, mean any layer styles that contain either a border or shadow value, or a combination of border/shadow/fill attributes

Naming | align on a naming convention for color fill layer styles, that are easily translatable to how your developers will name the corresponding design tokens which build Classes or define Variables

Organization | create a dedicated artboard for your UI styles in the Styles/Foundations (or similar) Library within your Design System

Application | use these layer styles to style any layers or symbols that will either be tied to the universal definition of a UI attribute within your system (i.e. you hover shadow state), or ones that have uniquely defined styles for their component groups (i.e. the active state of all text inputs)