Design System Overview
These are the principles that shape how we design every aspect of user interfaces.
Sep 27, 2021 · 1 min de lecture
Foundations are principles and rules that guide the rest of the system. This system includes the following subjects:
- Colors: What colors are available to use
- Colors Intents: How colors should be used
- Effects: How shadows, transparency and other special effects are used
- Sizing: How to size and space out components
- Iconography: What and how icons are used in the system
- Typography: What fonts to use and how text, headings, labels are presented
- Layout: How to organize content, for different viewports
- Animations: How to animate layers and effects
Components include all UI elements starting from small, undivisible ones like icons, separators... to more complex ones like buttons, inputs and then, larger ones like forms, data charts and other high-level components.
This organisation follows the Atomic Design Principles where smaller components (atoms) compose slightly larger ones (molecules) which go into even larger and more complete components (organisms).
Effects are applied usually used by components, they include:
- Shadows (both outer and inner)
- Text Shadows
- Overlay Effects (transparency)
One way to have consistency between effect is to have predefined effects, e.g. 3 level of box shadow, that components can use, resulting in fewer versions of those.
Every website or app has to place content (text, images, video, forms, etc) in a page or a view. As designers and developers we have to think about this for every project.
The following is an opinionated way of seeing the content we place on pages. We call this the Website API.
No design system is made in a vacuum. Here are our recommended reading list, references and design systems.
- Design System Checklist: An open-source checklist to help you plan, build and grow your design system.
- Color within Constraints: A scalable color system for digital products
#Notable Design Systems
Here are, in our opinion, the most notable and extensive design system out there: