Mission

Internal communication is everything to a distributed company, which means culture is often digital. A custom emoji set for our chat app was one area we could inject a little Github-style fun.

In a tech world full of endless emoji designs, GitHub’s opportunity was unique because of our brand IP, we had octocats.

The designs needed to be legible, visually appealing, entertaining, systems-built, and on-brand.

Concepts

This was a communication tool so legibility was everything. I started with basic silhouettes and worked my way up.

Alternates

I also explored some ideas based on the chromatophore concept by Joao Ribeiro. The idea that octocat skin could change like an octopus - their skin could resemble a biological-style computer monitor. We decided against it, but I love the versatility of visual emotion.

Design systems

The goal was to create a set of emojis and we needed a system.

We aimed for 2D illustrations mimicking a 3D style “vector-painted” in Figma (2D vector application). So I developed a hierarchy that clearly illustrated distance from the camera for each facial characteristic. Analogies are often easy to remember and communicate an idea, I went with cookies. The eye and nose characteristics sit on top of the main “cookie” shape and the mouth shape is cut into the “dough”.

I dubbed this system, Snickerdoodle.

Lighting system

I utilized a simple 3 light system - omni, spot, and bounce.

• The omni light was bright but neutral, letting the octocat local colors do the talking.

• The spot light is cool, which blends well with the violet skin.

• The bounce light is pink. A color that vibrant stands out. Also, it blends well with the warm shadows.

Color system

I broke some rules. I created a color palette outside GitHub’s standard color system, Primer. I wanted something more energetic and exciting, and Primer lacked the saturation needed for this one.

Keep in mind, I used every color that I could from Primer, and any additional colors were not picked at random. I studied the hue, saturation, and value curves of each Primer color and created extensions of the palette so they would integrate seamlessly.

Template System

I had the pleasure to collaborate with one of the fastest Figma designers in the Southern Hemisphere, Matt DeSauers. He created this template for vector creation.