Design System is a comprehensive guide for project design – a collection of rules, principles, constraints and best practices. The core element of Design System is often a Library of User Interface (UI) Components. These UI elements have also their representation implemented in code.
Design Systems are often called the single source of truth for web & mobile apps. It allows the team/company to design, develop and maintain the quality of the product.
Popular Design Systems
- Material Design – This is one of the most popular systems. It was shaped for many years but now is used not only by Google Team but also by many creators of Android and Web Apps.
- Atlassian Design System – One of the most complete ones in the market used in real products made by Atlassian.
- Polaris – The Design System made by Shopify
- Carbon – The one made by IBM
- Human Interface Guidelines – Apple prepared the Design System for all their platforms
- Nachos – Prepared by Trello. It is good to see how they have described illustration principles in the documentation.
- Grommet – Design System by Hewlett-Packard presented in a very friendly way.
Next, use Atomic Design Principles – start with some particles like colors, fonts, shapes. Then move to atoms, buttons, inputs, checkboxes, radio buttons, etc. Finally compose molecules – search box, date pickers and organisms – navigation bars, side menus. Thanks to this you will be able to prepare collection page templates – something like UI kit for your system.