Introducing Nachos, A Tasty New Design System For Trello

blog-intrographic (1)-1.png

If you’ve used Trello recently, you might have noticed it looking a little bit different.

Maybe you’ve caught that some of the buttons are visually flatter. Perhaps you have a keen design eye and you’ve thought our typography looks to be set in a new way. Or maybe it doesn’t look any different and you’re just eager to get in there and start doing some work!

Whichever your perception, we are excited to announce that Trello has begun creating a design system. We are calling this design system "Nachos" (mouth waters), and it means that the way you experience Trello will be more meaningful than ever.

blog-colorgraphic (2)-1.jpg

Need a Trello color? Check out our palettes here

Why Nachos?  

Inspiration for the name derives not (only) from the fact that we were working on this system while peckish. Trello continues to strive to be fun and delightful so having a name that makes us smile made perfect sense. Plus, our mascots Taco and Chorizo helped us out and they can be pretty persuasive.

There are many reasons to create a design system. Our main motivations are consistency, alignment, and efficiency:

Consistency

As Trello has grown, so has the amount of ways we’ve solved our problems. While trying out new approaches is a great way to find the *best* approach, it has left us with a lot of competing visual styles. With a solid design system to reference, it becomes easier to create solutions that connect to one another and collectively strengthen the product.

Alignment

The Trello team is growing and we all love to snack on foods baked with cheese... er, I mean, we all love staying in sync with one another. As we add new members to our product teams, we want them to acclimatize quickly and feel confident in their approach. Nachos will keep us all, new and old, on the same page.

Efficiency  

Nachos is becoming our source of design truth, our beacon of delicious guidance. Having all of our patterns and UI organized in one place will help everyone build, create, manage, and validate faster.

Guiding Principles

One of the biggest successes with Nachos so far has been defining and refining our Trello principles. Internally we often know whether or not something feels “Trello-y,” but when working with partners or discussing design with new team members, this philosophy can be difficult to explain. “Well, it just doesn’t feel like something we would do” is something that you might hear as a design critique.

Sitting down and hashing out the principles that make Trello so wonderful and, well, Trello-y, was a tough exercise. But the result is a guide that will help anyone working with the Trello product make thoughtful choices.

blog-principlesgraphic (3)-1.jpg

Our principles keep our design thoughtful and consistent. Check them all out here

Realignment Versus Redesign

The improvements we’ve already made to Trello do not represent any major brand or product reimagining. Instead, the direction in which we are headed embraces the product we already have and looks for the small changes with the biggest impact.

For example, we’ve worked hard to place everything within Trello on a consistent grid. While you might not immediately notice this structure when you load up your board, it’s something you might feel. A consistent grid structure creates an invisible rhythm that informs every element, and is an incredibly valuable structure to have in place when making new design choices.

blog-gridgraphic (4)-1.jpg

Our cardback page has loads of granular grid detail. Check out the page for more.

A Living Document

Nachos isn’t done, but we’ve made a great deal of progress. Next, we plan to reach out to our partners and see how we can improve their understanding of Trello and the Trello-y way of creating experiences. Expect to see Nachos grow with new ingredients too. This first course focuses on our web product, but will grow with more documentation around our iOS and Android apps in the next batch of ideas.  

We plan to not only be more comprehensive in our coverage of our products, but to also make Nachos a strong tool for developers. We’ve started the process of componentizing Trello to make it easy to grab and implement UI from the guide into a Power-Up or flow. Building upon Trello should be as straightforward as it is to use Trello for whatever project you might have on your plate.

As we continue to build upon and refine Nachos (mmm, refined Nachos) we will share our learnings, so stay tuned for more servings! In the meantime, head on over to Nachos to explore the new Trello design system experience.

Check out Nachos

Next: Trello Desktop for Mac and Windows: Get More Done Without Distractions

Trello lets you work more collaboratively and get more done.

Get Started