top of page
Screen Shot 2023-12-12 at 5.10.36 PM.png

SUXD Design

is a design system and assets library. In this project, I built and wrote documents for 14 interactive UI components in light and dark modes.


This Design System was built for a fast growing SaaS product at Sensetime.

Why did we need to create a design system?



A cohesive and recognizable design across various interfaces gives users a seamless experience.



Reusable components can streamline the design and development process, saving time and resources.



A design system provides guidelines to expand teams without sacrificing a unified user experience. 

My Approach

Using "Input" as an example, I am going to walk through how I created design guidelines for a component.


Input has four variants: general input, version input, number input, and password input. The general input is suitable for entering all text content, while the other Input fields are applicable to special scenarios where the input content needs to adhere to specific formatting restrictions.

Group 14715.png


Input has three basic states: default, activate, and inputed. Each basic state undergoes style changes based on cursor hover, input presence, and content validation. General Input and Input-number also encompass two special states: disabled and read-only.

Group 14716.png


An Input is composed of a placeholder, cursor, input content, and a container. Depending on different scenarios, there may also be additional elements such as character count and separator.

Group 11532.png


For general forms, use the standard size for regular Input. In non-full-page scenarios such as pop-ups, utilize smaller-sized Input. The width and height of the Input are determined by the parent container and the expected input character count. For single-line Input, a default height is applied.

Group 14717.png


The style of Input includes rounded corners and focus when activated.

Group 14718.png

Variants, States, Anatomy, Sizes and Style are five universal specifications for all components. 

Some components have their particular specs. For example, Input has Overflow, Validation and Alignment.


Based on different scenarios and layouts, there are two ways to handle Input when content overflows.

Group 14719.png


Based on the validated content, there are two verification methods for input fields, with different triggers and errors.

Group 14720.png


Generally, Input is accompanied by labels and help text, and alignment can vary based on the layout.

Group 14721.png

This approach was applied to building and writing guidelines for other 13 components, in both light and dark modes. 

Screen Shot 2023-12-15 at 5.17.25 PM.png
Screen Shot 2023-12-15 at 5.15.17 PM.png

Ensure Consistency, Boost Efficiency & Scale

bottom of page