Continued Design System

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.

Background

• The Continued Design System contains every UI element needed to quickly build high-fidelity prototypes in Figma. For structure, we chose Atomic, breaking out components by atom, molecule, and organism which are utilized to build templates and high-fidelity mockups with consistent layout and design standards.
• Taking advantage of the latest features in Figma allowed us to create a design system that fits every need our product currently has. When it comes time to evolve, the system also enables a new level of ease for updating components, UI templates, and page designs.

Planning, Accessibility, and Figma

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.

Some of our requirements:

• Utilize Brad Frost's Atomic Design Principles to structure the component library
• Heavy use of Variants feature whenever possible to simplify the component library
• Create templates for reusable layouts leading to simplified frontend code