Skip to main content

What is a design system?

Before going into details, what is a Design System?

Definition#

A design system is a set of guidelines, tools and a governance to design and develop consistent interfaces and experiences in team.

Some examples of popular Design Systems#

There is a lot of design systems on the market. Here are some examples that you may enjoy exploring:

  • Primer: Primer is the design system of Github, it was a source of inspiration for openUX (both on the components and on the architecture of the project);
  • Material Design: Material Design is the design system of Google. You must know it, it is very used on the web, and Android OS is based on it.
  • IBM Design Language: IBM Design Language is the design system of IBM.

Who needs a design system?#

The design system is an opportunity to create and implement interfaces and experiences without having to "reinvent the wheel" with each new project. Creating a graphic charter, creating components, coding them are very long steps with little added value, since each interface, each IT project has the same need.

Design systems allow to mutualize this work to produce high quality interfaces and experiences.

Given the heavy development burden of design systems, it is necessary to invest a large workload. Most of the big IT companies have their own design system (Apple, Facebook, Google, Microsoft, Spotify, Airbnb, Atlassian, etc.). There are also other design systems developed by communities of designers and developers, such as OpenUX.

All projects invlving human-interfaces need a design system. The vocation of OpenUX is to provide this base, in a free way for commercial use or not.

How is composed a design system?#

A Design System contains several resources. All of these resources are indexed and referenced in a central documentation, accessible on the web. Do you want an example? Your are now reading OpenUX documentation.

Philosophy#

At the origin of each design system, there is a philosophy, a manifest that answers the why:

  • Why this design system exists?
  • What values it wants to use?
  • What does it want to bring to end users, design and development teams?

Guidelines#

Tokens#

The guidelines — or the style guide — references all the most atomic items of the design system: tokens. Tokens can be colors, fonts, sizes, etc. They are the smallest entities on which the design system will be built.

Tokens are the smallest entities on which the design system will be built.

Tokens are composed of choices (for example: color-scale-gray-0: #FDEFF) and decisions, i.e. choices applied to situations (for example: color-text-primary: $color-scale-gray-0).

Documentation#

OpenUX's guidelines and tokens are listed on the pages Guidelines.

Libraries#

Most Design Systems gives also access to tokens libraries for design softwares, like for example Figma, Sketch, Adobe XD. These libraries allow designers to create interface mockups using these tokens. OpenUX has created a token library for Figma, which is accessible on the Resources/Figma page.

Components#

Components are assemblies of tokens, that compose consistent interface items: buttons, text fields, headers, etc.

Some components are made of other components (for more information, read about Atomic Design).

Documentation#

OpenUX's components are listed on the pages Components. Each component has a specific documentation page: how to use

Librairies#

Most Design Systems gives also access to components libraries for design softwares, like for example Figma, Sketch, Adobe XD. These libraries allow designers to create interface mockups using these components. OpenUX has created a token library for Figma, which is accessible on the Resources/Figma page.

Code libraries#

To be easily integrated in projects, a design system provides coded components. OpenUX choosed to maintain two code libraries:

  • CSS: More information on Resources/CSS page;
  • React: React is a Javascript library that allow to create powerful web applications. It is widely used and OpenUX core team believe that it is one of the best web library. This library is based on CSS library. More information on Resources/React page.

Use cases#

Of course, a design system is useless if it is not used in interfaces. To see OpenUX in action, discover all its capabilities or even look for inspiration, go to the Use cases pages.

How to contribute?#

Some design systems are proprietary, but some are Open Source, like OpenUX. OpenUX sources files are stored on Github and are open to contribution. If you want to add, remove or enhance some parts, please read the contribution process on the Contribute/Contribution process page.