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.
I experimented with several color palettes and applied them to a rough home page wireframe to demonstrate what the brand could look like.
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:
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.
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.
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
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.
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