Attending Diana Mountner’s ‘A colorful journey into design systems’

As companies grow, so do their design teams and the lines of codes used to express their vision. As years go by, inconsistent design decisions compile to create what we call a design debt that teams must eventually resolve. That’s where design systems come in.

Design systems not only ensure a consistent user experience, they also improve workflow efficiency and provide everyone a common language with which to speak about design. Implementing a design system is often a tedious, but necessary, task design teams will face.

Nulab is currently in the process of creating its own design system to streamline managing the designs of all of our collaborative apps (i.e. Backlog, Cacoo, and Typetalk). One of the most critical elements in establishing a design system is working with color, so last week, I and the rest of our design team—alongside our CMO Shinsuke Tabata—decided to attend an event by Diana Mountner called A colorful journey into design systems.

Color in design systems

The event, hosted by Designers + Geeks, was held at ustwo’s office in the nearby financial district. The speaker, Diana Mounter, comes from Github’s Design Systems team, a team she created when she first joined Github.

After joining Github in 2015, she realized the best way she could positively influence design within the company was to start by consolidating their code. Having too many different styles meant their CSS files were huge. She became the resident expert at dealing with CSS bloat.

One of the most surprising things she discovered was the lack of control and consistency around color. Color, she found, was a uniquely challenging subject to find agreement on amongst designers. She provided some great advice for teams now facing those same challenges, such as:

• When it comes to color in design, you need to work with intention and use it in a meaningful way.
• It’s important to think of the bigger picture—how will this one element work with the rest of the page? An element may work isolated by itself, but it’s important that it works in various contexts.
• Color specifically is very tricky because it is subjective. You can control the color palette you choose but you can’t control how it will be perceived; and many factors such as age, environment, and background effect this.

One of our own Nulabers, Pattie Acevedo, asked Mounter how long it took to redo Github’s styles. Her response was 3-4 weeks, but she dedicated all her time during those 4 weeks to this project. And while she started this project by herself, her team has since grown to 4 people and continues to grow. Github today has an entire team dedicated solely to creating consistency throughout their site.

Nulab’s progress

As our designers take on the challenge of consolidating and simplifying all of Nulab’s design styles, we’ll be taking her advice to heart.

For our own design system, we set out a basic plan: 

• Step 1: Conduct a design audit of all our sites
• Step 2: Decide whether the current elements in use are conveying the message we want them to convey (i.e. is this button making it clear that this is an urgent matter, does our typography display the correct level of hierarchy on each page, are the feel of our designs conveying our brand values?)
• Step 3: Make changes accordingly
• Step 4: Have the dev team implement these changes into the CSS

We started small by unifying our font sizes and colors across all our product sites. Then we proceeded to consolidate the styling of our buttons, typography, hyperlinks, navigation, and icons. We’re still working on finalizing some changes, but our dev team will be implementing these changes into our CSS soon!

Learn more

If you’d like to watch the talk for yourself, you can check out the video from the event here. We also found a better quality video of the same talk she did in September here.

And don’t forget to check out other upcoming Meetups hosted by Designers + Geeks.