Branding With Code

David Lee
David Lee
Dec 30, 2018 · 4 min read

I stayed at an Airbnb in Melbourne for 3 months last summer. Come to think of it, both Airbnb and Melbourne city had very vibrant and dynamic identities.

Melbourne City

And they reminded me of a project that I did 2 years ago. I developed a dynamic and flexible identity system for Bespin Global, one of the fastest growing cloud management startups.

Credit: June

Bespin Global’s new identity system resists the traditional thinking of brand design. We rather welcomed the idea of modulation and progressiveness, giving a degree of flexibility into the identity. For example, a company’s services or apps could be identified through different types of logos like JetBrains or MIT Media Lab.

Anyone can download a vector pdf file from the web app. The downloaded logo can be used as it is or modified in any graphics software. An employee may access this web app and create her own identity to make a unique name card for example. A web designer could change the website logo once in a while using this.

Check out the real-life interactive example

How To Make


This is an ideal set of generated identities that a brand designer June made. The first thing came to my mind was to deconstruct the cloud shape into basic elements like ellipses and (rounded) rectangles and their properties like position, radius, direction, color, and number. The next step was to find if there was an arithmetic pattern of the components, which I ended up creating a simplified formula. By having this, the number of logos that can be generated is infinite.


Now it was time to prototype and test. I started with my favorite prototyping tool, FramerJS. But I soon realized that it was hardly possible to make a vector export function, which was one of the core functionalities. So I moved to Processing that I used to make some interactive artworks on my website to generate a vector file. (Watch the video below.)

The prototype served well as a proof-of-concept. But I wanted a smooth transition between different clouds. The prototype also didn’t support high-resolution displays and had to be run on a computer, not a browser.


As stated above, the app should be open for everyone to easily access from anywhere. Running it on a browser seemed inevitable.

Thanks so much to PaperJS, I could make this app alive. It’s a Javascript library for vector graphics and interactions. The API was well documented with interesting examples. Most importantly, it supported the vector download function by default.

I just converted the script that I wrote in Java for Processing to Javascript. The logic remained the same. I just added a bit of code for transition animations.

Here’s a beta version that you can play with.

Wrapping Up

I hope this inspired you to think about some initiatives or to revisit traditional thinking about design practice. I was very impressed by how Airbnb was doing for their design system. No doubt they are paving a new way, but also inspiring others like me. It is always exciting to question the way it is and be ready to be failed in exchange for pioneering.

Thanks for reading.

Design Consultancy: Daylight Design
Brand Design: June Lee
Interaction Design & Development: David Lee

Thanks to Jihoon Suh and Michelle

David Lee

Written by

David Lee

designer at daylight /

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade