Designed a new and scalable Design System (DS) as an integral part of a complete platform revamp for an e-learning platform.

The goal was to build the entire component library from scratch. Implement native Dark and Light themes, organizing colors using Figma variables to support fast development.

All components were designed using auto-layout to guarantee seamless adaptation across desktop, tablet, and mobile breakpoints.

Created a large component set with 28 base components (and numerous variants) within a tight timeline to support the main platform redesign.

Comprehensive Style Guide (Foundation)

Library of scalable components

Template pages following the DS structure

The DS was built using the Atomic Design framework.

The project began by defining the core visual language based on the client's brand.

Input: Received logo and 6 core brand hex colors.

Color Scheme: Defined a complete, semantic color palette (e.g., Primary, Secondary, Success, Warning, Neutral) using these initial colors, organized into variables for Light/Dark Mode.

Typography: Established a scalable type system (scales, weights, and usage guidelines).

Spacing & Grid: Defined a consistent spacing scale to ensure harmonious layouts.

Creation of the smallest functional elements, focusing on states and accessibility. Buttons / Form Inputs / Labels / Icons / Avatars / Checkboxes / Radio Buttons

Combining Atoms to perform simple functions. Search Bars / Form Fields (Label + Input) / Toast Messages / Pagination

Complex UI sections composed of Atoms and Molecules. Data Charts / Complex Cards / Thumbnails / Drawer

Applying the DS components to create the structure for key platform pages, demonstrating the system's real-world usability, and checking for edge cases. Course Page / Lesson Player Page / Discipline Page

Creation of 28 base components (and numerous variants) across two themes (Dark/Light).

The reusable component library significantly accelerated the development time for the new platform interface.

The use of variables and the Atomic framework ensures the DS can easily integrate new components with scalability.

Provided a clear, documented system in Figma that acts as the single source of truth, minimizing communication overhead between design and development.