Features
Design system based on atomic design
Product design system leverage the atomic design sytem to organize UI elements in different level for designers to create user inteface that suit the overall product design process.
VISUAL LANGUAGE
Visual structure, visual direction and branding direction as the foundational token of the design system.
UI TOKENS
Atom level UI tokens are building blocks of an interface can't further broken down. Like input fields, buttons, badges and range sliders etc.
UI STRUCTURES
Molecules Level structure with atoms bonded together, the smallest fundemental units of a compound, as the backbone for a more complex system. Like Hero Section and Search Bar.
UI COMPONENTS
Organisms level, molecules group to form a distinct section, UI compoents are stand alone, portable and reusable components. Like data table, snackbar, product card & calendar.
UI PARTS
Templates level, groups of organisms, the concrete and client/ user facing parts with solid fuction, these parts will eventually become the production code. Like login & sign-up, payment and settings.
UI MODULES
Pages level, the instance of template with highest fidelity. It contribute to the effectiveness of the system, built for certain issues to solve a certain problem. Like checkout pages and user profile pages.
