Designed in 2023

iCL

Create a reusable, accessible, extendable and style consistent design system based on current styles.

My role: design and develop

Link to Components Demo

iCL

Background

Design teams working on multiple projects encountered persistent issues with inconsistency, inefficiency, and maintaining a cohesive visual language.

Challenage

Reverse-Engineering Existing Designs: We faced the challenge of creating components based on existing designs to ensure a smooth transition and scalability.

Vision

This design system will foster innovation, support new features, and adapt to evolving user needs, ensuring our products remain intuitive, accessible, and visually appealing.

Collect, research and define

Collect the used colors, fonts, effects, size, gaps and etc.; then research, filter, merge, and organize them; finally, define the standardized elements.

BackgroundColors
BackgroundColor Tokens
BackgroundTypography
BackgroundSpace and Gap
BackgroundGrid
BackgroundEffects

Flexible, Customizable and Scalability

Ensuring it can adapt to diverse project needs, our design system is flexible and customizable, allowing it to grow seamlessly with our evolving requirements.

BackgroundProduct Light
BackgroundProduct Dark
BackgroundScalability
BackgroundRatings
BackgroundTags

Code Implementation

Build pixel-perfect template components using HTML/CSS/JavaScript.

BackgroundProduct
BackgroundInput Box
BackgroundButton
BackgroundModal
BackgroundRating