Saint Hedwig and the New Convent; Nuns from Bamberg Settling at the New Convent — Paul Getty Museum

Was the Gothic style one of the first examples of a “design language” based on modularity and repetition?

“Is it possible to draw parallels between the art of the medieval cathedrals, and the design of a modern design system?”


In recent months, I couldn’t help but notice how many people (and companies) when referring to “design tokens” what they actually mean is colors, typography, spacing (and in some cases elevation, timing, and sizing).

In this post, I share my point of view and my experience on this topic, showing why so much more can be done with them, and how.

A little preamble…

“Design tokens are so hot right now!” has become…


A few days ago I was writing my bi-annual review, and I was thinking of how I could include some meaningful metrics about the success of our design system in Badoo.


Second part: the build script and the generation of the assets.

This is the second part of a post about the creation of a pipeline that can take a Sketch file and export all the icons included in the file, in different formats, for different platforms, with the possibility of AB testing each icon.


First part: from the idea to the assets Sketch files.

TL;DR

Using a custom build script in Node JS, it is possible to manipulate a series of Sketch files, and then, using an internal Sketch tool, automatically export their assets, to generate multiple icon libraries, for multiple platforms and different brands, that support dynamic colourisation of the assets via design tokens, and also AB testing of the assets via naming convention. Easy peasy :)

The problem we were trying to solve

At Badoo we build a dating app…


Recently I have come across a tool, called Style Dictionary, developed by Danny Banks at Amazon, that allows you to manage design tokens (or “style properties”) for a design system. I’ve used it to replace the existing tool that we used to process the design tokens for our Cosmos design system. I’ve found the task very interesting, and I’ve decided to document it, so that other people may benefit from what I’ve learned during the process.

A reader…


How one line of CSS code saved me hours of React development

Yesterday I was trying to solve a problem while building the style guide of Cosmos, the Design System that we have developed in Badoo (you can read more about it here here and here).

The visualisation of the “Page” component and its sub-components.

The problem I had is that, in order to obtain this layout (that fills the entire viewport and has overlaying elements…


“Why did it took so long?”

Well, because it took so little to the dev before me!”

The End


A quote from “There’s a Hole in My Sidewalk” by Portia Nelson

Photo by Marc-Olivier Jodoin on Unsplash

A few days ago I came across this lovely quote in a comment to a blog post about change (and why we are so extremely resistant to it). It’s from a book, There’s a Hole in My Sidewalk: The Romance of Self-Discovery, written by Portia Nelson, an American popular singer, songwriter, actress, and author.


Third part: where I show where we are today, and where we think we will be in the future

This is the story of how a small style guide that was first introduced under the radar, became so appreciated by both developers and designers that it finally became a complex unification project — a design system called Cosmos.

Today

Fast forward to today, a few months later, what has happened?

Cristiano Rastelli

Design System Lead at Bumble. In love with Atomic Design, Design Systems & CSS architecture. Attendee/speaker/organiser of tech conferences and meetups.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store