The Continued Design System was created to organize the UI styles for multiple brands and provide the engineering team with reusable components to build an entirely new experience for Continued's customers and course administrators.
A heavy focus on accessibility was placed on this project in order to meet WCAG 2.2 (AA) guidelines for font sizes, color contrast, spacing, and layout. To make sure we were meeting our requirements, we regularly utilized a number of helpful Figma community plugins to check our work.
Utilizing the Figma Variants feature, all components are built out to easily change states (e.g. hover / focus / active); display active nav items; change button types, sizes, and colors; pull in icons; etc.
Small, medium, and large pill buttons were designed along with variations for color and outline.
We wanted to have enough color options to build an outstanding UI but also keep it small enough to keep the UI consistent.
Each form element was built as a component with variants to easily add any element and state to a design.
Some common controls were needed along with a unique component for admins to switch between learning spaces.