Design System: Athena
The Athena Design System was created to organize the UI styles for multiple brands under the Continued, LLC parent company and provide reusable frontend components to build a new experience for customers and course administrators.
Research & UX
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.
Design
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.
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
