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.
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.
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.
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.
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.
The style of Input includes rounded corners and focus when activated.
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.
Based on the validated content, there are two verification methods for input fields, with different triggers and errors.
Generally, Input is accompanied by labels and help text, and alignment can vary based on the layout.
This approach was applied to building and writing guidelines for other 13 components, in both light and dark modes.