Blog

9 design systems examples from companies and institutions (2023 edition)

A design system is a set of standardized guidelines and components that can be used to create user interfaces, digital products and services.

This tool promotes collaboration, efficiency and graphic consistency in the context of, among other things, website and web applications development projects, as well as software development. 

Today, more and more Belgian and international companies are using a design system. 

In this article, discover examples of design systems published by :

  • Companies like Google, IBM, Proximus and Decathlon
  • Public institutions such as the European Commission, the French government, the City of Brussels
  • Actors of the associative world, such as ONE.

Examples of corporate design systems 

Google’s design system – Material Design 

Material Design was first introduced in 2014 and has since inspired many other companies to adopt their own design system. In 2022, Google released the latest version of its design system: Material 3.

In this design system, you can find: 

  • A starter kit 
  • Development tools including code and documentation for Android, Flutter (an applications’ development kit), as well as for websites
  • Foundations that form the basis of any good interface, from accessibility standards to essential layout and interaction patterns
  • Styles of a user interface, including color, elevation, icons, motion, shape and typography
  • A library of components including buttons, menus, checkboxes, navigation bar, etc.

Launch date: June 2014 

Check out Google’s Material Design system

IBM’s design system – Carbon Design System

IBM launched Carbon Design System in 2014 primarily for its own needs, while offering an open source version so that everyone can use and contribute to it. 

In Carbon, you will find: 

  • Guidelines about colors, icons, spacing, etc.
  • A set of components
  • Patterns that show reusable combinations of components and templates
  • Community assets
  • The ability to contribute to Carbon’s improvement by reporting issues.

Launch date: June 2014 View the IBM Carbon Design System

Proximus’ design system

Launched in 2019, the Proximus design system includes: 

  • A starter kit
  • A set of guidelines
  • Access to Proximus Pickx Theme components
  • A list of basic elements to build digital products.
  • A library of components to compose pages
  • A library of elements to create forms
  • Templates with reusable combinations of components
  • Data visualization
  • Useful utilities for creating web interfaces.

Launch date: August 2019
Check out the Proximus Design System

Le Design SystemDecathlon’s design system – Vitaminde Decathlon – Vitamin

Launched in 2020, Decathlon’s design system (Vitamin) enables the company to build a consistent and quality user experience across their various ecosystems.

Vitamin offers a set of tools and components for both designers and developers on the following aspects:

  • Decathlon’s brand, with its logo, logo usage, brand signature, etc.
  • The whole digital design of Decathlon
  • How to correctly use Decathlon’s designs on products.

Consult the Design System Vitamin of Decathlon

Examples of Design Systems from Public Institutions

The Design System of the European Union and the European Commission

Launched in 2021, the European Component Library (ECL) is a comprehensive guide to the design elements and visual standards applicable to all websites and applications managed by the European Commission.

The library contains the following elements:

  • A list of guidelines to follow throughout the design process
  • Components representing simple groupings of user interface elements (such as a label, an input field and a button to form a search field)
  • Utilities that include generic components that can be used outside components
  • Resources containing a glossary and web tools.

Launch date: April 2021
Consult the design system of the European Union and the European Commission

The French Government Design System 

Launched in 2021, this design system aims to unify the different websites of the French State with a consistent design.

It consists of the following aspects:

  • Foundations including colors, grids and icons, as well as the basics to build a site or an application
  • A library composed of 30 components
  • A community section gathering designers and developers who bring their expertise and support.

Launch date: June 2014 

Check out the French Government design system 

The Design system of the City of Brussels

Launched in July 2012, the design system of the city of Brussels allows the different organizations and projects of the city to ensure graphic consistency.

It consists of the following different points: 

  • Foundations including colors, typography, logo, icons, layouts and hover/focus
  • Components including navigation, buttons, requests, tabs, filters, forms, messages, and data display.

Launch date: July 2021

Consult the Design System of the City of Brussels

The Design System of the City of Antwerp

Launched in 2017, the Antwerp UI design system was set up to help create applications within the city of Antwerp. It is also useful to ensure that these applications meet accessibility standards.

It consists of the following elements:

  • A starter kit
  • A complete list of components, from simple colors to the layout of articles
  • Patterns including sets of reusable components that can be used for forms or navigation.

Launch date: 2017
Check out the Design System of the City of Antwerp.

Examples of Design Systems from the associative world

ONE’s design system

The ONE (Office de la naissance et de l’enfance) design system was created by Anais Digital and launched in February 2022. This tool allows the ONE team to build a consistent experience across their different ecosystems.

The ONE design system consists of the following elements:

  • Foundations including colors, typography, structures, shadows and logos
  • Assets including icons and a photo catalog
  • Components including elements needed for an action (buttons, links, etc.), forms, layouts, navigation, overlay and indicators.

Launch date: February 2022

Consult the ONE design system

To create your company’s design system, contact our team of experts!

Why use a Design System?

A design system streamlines design and development work by providing a common language and framework for designers and developers. 

A good design system covers all aspects of the design process, from typography and color theory to layout and user experience (UX).

A design system is very useful when :

  • Your design and development teams are not located in the same place
  • Your design and development teams evolve and change over time
  • You are present on several platforms, with different technologies and you want to keep a graphic consistency
  • The quality of your user experience decreases
  • Your teams are constantly recreating existing design or development elements.

The advantages of a design system

  • Sharing and collaboration: the Product, Design and Development teams develop a common language that everyone can understand. This helps to improve communication considerably.
  • Efficiency: Components are created once and then stored in one place. It is therefore no longer necessary to redesign them for each project. Productivity increases, products are delivered faster, and design and development expenses decrease. 
  • Focus: Designers no longer have to spend time creating interfaces. They can concentrate on creative projects and their areas of specialization (user research, design of new features, etc.).
  • Consistency and quality: With clearly established interface actions that are easier to process and absorb cognitively, users enjoy a smooth product experience.

If you want to know more about design systems, book a meeting with one of our design experts.

Ces articles devraient aussi vous intéresser

Skills needed software developer

07/01/2023

The 7 Skills Needed to be a Great Software Developer in 2023

In today’s IT job market, the demand for software developers (or software engineers) is extremely high. Whether you are just starting out or have already begun working in software development, we invite you to discover (or rediscover) the 7 key skills needed to be a great software developer.

03/01/2023

Design System : why do you need one in 2023? 

A design system is a solution that allows you to save time and increase productivity while keeping your digital products consistent. In this article, we explain what a design system is, the advantages associated with it and how to create an efficient version adapted to your company.

10 Best Tools for Wireframes and Prototypes

12/08/2022

The 10 best wireframe tools to use in 2022

Designing a user interface can be a difficult task. It’s important to get it right, because the user interface is the first thing that your users will see. If it’s not designed well, they may not even bother trying to use your website or app. That’s why the best wireframes and mockups tools come handy. In this post, we will present 10 of the best wireframe tools out there!

become UX designer

05/07/2022

How to become a UX Designer in 2022? 

User Experience (UX) is one of Anais Digital’s strengths. It is part of our DNA. But what are the skills you need to become a UX Designer? What training should you do to get into the profession? Our UX team shares its point of view and experience on the topic.

No waste podcast ep10

21/04/2022

Ep10 – Définir la gouvernance d’un projet digital (FR)

Saviez-vous que la performance de vos projets ne se trouve pas uniquement dans la mise en place d’un plan efficace ? Elle se traduit aussi par la mise en place d’une gouvernance efficace et adaptée au contexte. La mise en place de projets digitaux au sein d’une entreprise implique la définition d’une structure : la […]

No waste podcast Ep 9

14/04/2022

Ep 9 – Un moment pour tout et un temps pour chaque chose (FR)

C’est sans doute l’une des perspectives les plus séduisantes de la vie d’entrepreneur : être maître de son temps.  Quand on comprend que dans la vie chaque minute compte. Apprendre à gérer son temps devient une compétence indispensable de l’entrepreneur.  Dans cet épisode, Christophe Jouret revient sur ce célèbre adage de l’Ecclésiaste : “Un moment […]

Download our Free Report

Want to have a chat about this ? Call us now +32 2 320 12 94.