Design System and Component Library
- Challenge
New product and eLearning experiences needed a shared set of interface patterns. Without one, pages drifted visually and new components were built one-off, making the product harder to maintain and less intuitive for learners and internal teams.
- Actions
Designed components, layouts, and user flows in Figma, then built them as reusable Vue/Nuxt components with Tailwind CSS. Created a living style guide in the codebase showing every building block in code, from colors, type, and buttons in every state to form controls, icons, and modals. Wrote llms.txt guidance so AI tools reuse existing components first and only create new ones when nothing fits.
- Impact
Gave designers, developers, and AI tools one shared reference for building any page or lesson. Improved consistency and usability, reduced one-off components, and created patterns that scale across the entire app.
