We reviewed the existing design language and researched UI control best practices. We poured over NNGroup research and studied UIKit, Material Design, and the native framework controls.

We used our streamlined color system to ensure color pairing patterns always met or exceeded WCAG AA standards. We created rules for our brand color, two primary type grays, semantic colors, and a set for charts and graphs. We tested and applied spacing standards using our grid to ensure touch target spacing and legibility across touch devices, laptops, and desktops.

With these guidelines and rules in place, we applied them to all standard web controls and a few hybrid and custom elements like toggles, cards, and sheets. Each element had clear default, selected, hover, focus, error, and disabled states as appropriate.

Our team applied research about accessibility to error states, placing errors inline between the label and input for improved screen reader support and stronger visual callout. This also allowed us to provide helper text below inputs without conflicting with specific error messaging.

After testing usability and accessibility we used atomic principals to build our Figma component set. Careful planning and consideration of future needs helped us minimize the number of subcomponents. We also benefited from new Figma features for variables during design. I reduced a set of 64 component states to just three states and six variables.