Design System Overview

These are the principles that shape how we design every aspect of user interfaces.

overview

Sep 27, 2021 · 1 min de lecture


#Foundations

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

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).

Atomic Design Illustration

#Effects

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.

#Animations

#Content

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.

Content is organized with Pages, Sections and Blocks.

#Additional Resources

No design system is made in a vacuum. Here are our recommended reading list, references and design systems.

#Reading

#Notable Design Systems

Here are, in our opinion, the most notable and extensive design system out there:

Company
Website
Design System
IBMwebsitelink
Salesforcewebsitelink
ModulzwebsiteRadix UI