This checklist represents the elements to consider for the new design system intended for applications design. It is not comprehensive, but can arrange a quick start if you want to create your design system from scratch. I consider actually Figma (visual design) part in it, but following documentation and code will be based on it.
Colors
- Background colors — typically, several tiers
- Neutral content colors — used for text messages
- Primary — default color
- Secondary — used for secondary text
- Tertiary — used for disabled and other similar text
- Signal content colors — set of semantical colors. Every color should have several grades, like the aforementioned above neutral one
- Selected — typically shade of blue
- Positive — shade of green
- Caution — shade of yellow
- Warning — optional, shade of orange
- Critical — shade of red
- Calculated — close to cyan or violet
- Dividers — set of colors for dividers
- Colors for categories — colors for graphs, charts, etc., used for coding categories of datasets on them. Can utilize semantical colors as well, but better to distinguish them by saturation or lightness.
- Controls colors — all other colors for UI controls
Dimensions
- Basic module (2px … 5px)
- Grid (if applicable)
- Sizes of standard elements
- Height of controls (inputs, radiobuttons, etc.)
- Height of list items and table rows
- Icons
- Default corner radius of controls and bigger elements (dropdown panels, containers, windows)
- Spacings, margins, paddings
- Horizontal spacing between controls and their labels, etc.
- Vertical spacings etween form elements
- Vertical spacings between headers and content
- Internal paddings of containers and dialog windows
- etc.
Typography
- Base style — the default size that sets the scale of the UI/Design system
- Secondary style — for secondary info messages, etc.
- Emphasized — for emphasis of the value relatively to default base style
- Headers — all the sizes for headers
- Specific styles — definitions of styles for table headers, graph axes
UI controls
- Button — including default, outlined, ghost and other types if needed
- Text input
- Search box
- Checkbox
- Combobox
- Dropdown selector
- Radiobutton
- Slider
- Segmented control
- Counter (also called as spinner)
- Date picker
Widgets
- List
- Table
- Graph
- Map — with default map styles
- Tree view
Layout elements
- Toolbars — vertical and horizontal
- Expandable panels
- Tabs
- Sidebars
- Informational panel
- Properties inspector
- Navigational panel
- Status bar
Modals
- Main application window — even if it is a full screen application or web application, it may include main components layout
- Dialog window
- Message box — all the types: confirmation, information, question, exclamation
- Tooltip (hint)
- Notification
- Toast
- Floating panel
Supporting materials
This part can be really useful, especially if there are many departments with their own designers and there is some employee turnover.
- Examples of user interfaces made with design system, including:
- Dashboard
- List of entities (i.e. UI that is made for the CRUD pattern)
- Informational card of the object
- Map or mimic diagram with monitored objects
- etc.
- Templates — similar to examples above, but without placeholder content, to make easier insertion of widgets/elements directly in Figma or other design tool
- Sample content — every complex system deals with some specific content, for instance patients health records, vessels or cargo trucks, etc. And it is useful to keep by hand sample patients or ship names, their photos, sample graphs and so on to spend less time on typing random and irrelevant placeholder text/graphics.
- Presentation of design system — brief overview for new employees (designers, testers, developers, PMs and POs) to assist with onboarding.