As already mentioned in my previous Blog Post, I would like to present our Design System project, based completely on Vue.js. It’s not just a modern UI component library. The whole purpose of a Design System is to define the design principles, style guide, patterns, content tone, and the rules and specifications of “reusable” components.
Our Design System, first of all, defines a color palette and typography.
Our colors are designed to clearly communicate actions, status, and direction within the interface.
The type scale includes a range of contrasting styles that supports the needs of your product and its content. It is a combination of styles that are supported by the type system.
On top of these rules, we started creating our components. A UI component library is a set of pre-built UI components such as buttons, inputs, dialogs, etc., which serve as building blocks for layouts. Thanks to their modular nature, we can arrange components in many different ways to achieve unique effects.
For example, here you can see the Form Element page of our Design System. It presents all possible elements that can be found in a NetEye form, and defines the only two possible color variants (light and dark), width, label style, icons and so on for each form component.
NetEye is a modular product, and we believe that each module integrated in our product should share the same patterns, colors, typography and styles. In addition we want the “look and feel” in NetEye to reflect our corporate identity, so we wouldn’t have to spend time “reverting” someone else’s design.
I believe that a well-written Design System will solve all these problems. In fact, it helps in improving development speed, avoiding the need to re-implement existing components. It helps us to avoid inconsistency between User Interface elements and, in addition, it defines the general guidelines for frontend development.
I can summarize the concrete advantages of having your own Design Systems as: