Case Study
Runkit Rebrand
Runkit is a browser based coding environment simplifying the process of prototyping and shipping a product. It connects developers to each other’s code in real-time and eliminates non-coding distractions such as downloading packages or setting up the environment. It aims to establish itself as an essential utility to the JavaScript community. The core users are Javascript engineers and package authors who are building tools and services. In 2018, I was tasked to create a new brand identity for Runkit. We started by defining three key goals for the rebrand:
Unique and recognizable
Differentiate the brand more from other developers tools.
Approachable and trustworthy
Convey a deeper level of maturity and reliability, being approachable but not childish.
Flexible and Scalable
Be cohesive and consistent across the marketing pages and the user interface.
Color
I experimented with several color palettes and applied them to a rough home page wireframe to demonstrate what the brand could look like.
Primary Colors:
Primary Colors:
Primary Colors:
Primary Colors:
Primary Colors:
Primary Colors:
We landed on two primary colors that feels friendly and soft, which is quite a big departure from the its old identity and other generic developer brands.
I further expanded the color palette by adding secondary colors to use in illustrations and other visual elements.
Stripe's talented brand designer Tyler Thompson designed a new logo for Runkit inspired by old mechanical keyboard. To ensure the logo is used correctly everywhere, I created a brand guideline. Some of the usage rules:
Typography
I explored several options for the body typeface. We want to find a typeface that has some personality but also is highly legible at smaller sizes.
Source Sans Pro
Karla
Work Sans
The heading typeface, Radnika, is also used in the logo word mark, which creates better visual consistency. The body typeface Source Sans Pro is friendly and works well as a UI font.
I worked on creating a type scale system to establish a clear typographical hierarchy. I also added additional usage rules for leading and paragraph spacing.
Experiment in context
Halfway through the process, I realized the need to create more pages to test out new visual elements like colors and icons. So I mocked up some marketing pages and pages inside the user interface. The goal here is to ensure the visual system can adapt to different scenarios.
Grid system
Most measurements, such as spacings and sizes, align to an 4px grid. This applies to the typography, icons, and UI elements and ensures consistency across the board
Icongraphy
Icons should be simple, recognizable, and legible at smaller sizes. This icon set below is for common interactions in the code editor. They were drawn on 20px * 20px squares and works well with the 4px grid system.
Basic interactions
After a new visual system with colors, typography, and grid was established, we realized the need to define rules for basic interactions. This enables engineers at Runkit to work on building the application interfaces more efficiently.
New identity in use
Built with React, Next, and Tachyons