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

Atomic Design Illustration


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.

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.


#Notable Design Systems

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

Design System
ModulzwebsiteRadix UI