Smart announces an open design system

October 8, 2021

We're happy to announce we, at Smart Belgium, have started to work on a design system for the web applications of the Smart group. For the first time, but surely not the last, we've decided to make this project open source and available on GitHub. We believe this matches the collaborative values of Smart and will enable various parties of the Smart ecosystem to benefit from it.

The home of the design system lives at the homepage of this very website. In addition to the blog that you're reading right now, you will be able to learn what's new, find the necessary documentation to get started with designing, using and developing the design system yourself, as well as find the right links to be able to contribute.

With this design system we are pursuing three goals:

  • The first goal is to create the visual basis of our future software developments. This may mean the different colors that can be used, the shape and size of a button, or the location of a menu or a form on the screen. This visual work follows and stands on top of the graphic charter introduced in early 2019.
  • The second goal is to create and assemble those design elements in a tool called Figma. Figma is specialized to design software interfaces. In addition of design work by designers, it can also be used by software development teams to prototype what new screens could look like and how they are organized.
  • The third goal is to implement and present the design using web technologies: HTML and CSS. This implementation is meant to be a source of truth for other developers, so they can replicate the design in whatever programming language and technical stack they want.

We're very excited by what we've done so far and will write additional blog posts soon. In the mean time, you can already join the conversation using the GitHub issue for commenting for this post. Feel free to raise your own issues to give feedback and comment on the design system, or start your first contribution.

  • avatar-image

    Thu

  • avatar-image

    Wolfr