top of page

Design System

I built up a design system based on atomic design methodology. Figma is the selected tool to build the system.

Define Atom

The change in atom level will effect all other elements and components. For this reason, I am the one who directly manage the atom level.

Define Module

The module level can be handle by other designers, as they use atom to build up several basic modules under my guide.
The illustration use repeatedly in app and email system so that we keep it as module and control internally. The website illsutration or hero banner are not going to be put in here.

Define Button
Button Usage
Button usage.png
Define Input
Input Define.png
Input Usage
Input Usage.png
Illustration
Illustration 2.png
Icons
Icons 1.png

Define Components

Based on atoms and modules, the components build based on specific requirment of layout. The component should be use across all pages in app if the fucntion is the same.

bottom of page