BLOG
Suggest Product

Nachos

Nachos is Trello's design system. This comprehensive guide and resource library contains everything you’ll need to design with us, including our core principles, visual design and interface components.

Visit Website

About Nachos

Nachos: Trello's Comprehensive Ingredient for Consistent and Principled Design
For a widely used project management tool like Trello, which empowers teams to organize work visually through boards, lists, and cards, a clear, flexible, and consistent user interface is paramount to its effectiveness. Users rely on Trello to provide an intuitive space for collaboration, task tracking, and project oversight. Ensuring that this visual system remains coherent and easy to navigate, even as new features are added and the platform evolves, requires a robust and centralized approach to design. This is where Nachos, Trello's design system, plays a vital role, serving as a comprehensive guide and resource library containing everything needed to design with them, including their core principles, visual design, and interface components.

Nachos is explicitly presented as Trello's design system, highlighting its foundational role in shaping the user experience of their product. The description as a "comprehensive guide and resource library" underscores its ambition to be the definitive and all-encompassing source for anyone involved in designing for Trello. This suggests that Nachos provides not just a collection of assets but also detailed documentation and guidance covering various aspects of the design process. The phrase "everything you’ll need to design with us" reinforces this idea of a complete toolkit, implying that the system is designed to support designers from the initial concept phase through to implementation.

The comprehensive nature of Nachos is further detailed by its contents: it includes our core principles, visual design and interface components. Core principles represent the fundamental beliefs and philosophies that guide all design decisions at Trello. These principles likely relate to Trello's core values, such as simplicity, flexibility, collaboration, and visual clarity. They provide the underlying "why" behind the design choices and help teams make consistent decisions even when encountering new design challenges.

Visual design encompasses the aesthetic elements that define the look and feel of Trello. This includes specifications for color palettes (including those used for labels and backgrounds), typography, iconography (especially for card features and actions), spacing rules, and overall layout conventions. These elements work together to create the distinct visual identity of Trello, which is both functional and recognizable to its users.

Interface components are the reusable building blocks of the Trello user interface. These include elements like cards, lists, boards, buttons for adding items, menus for options, modals for detailed views, and various input fields. Nachos provides documentation, specifications, and likely coded implementations for these components, ensuring that they are used consistently throughout the Trello application in terms of appearance, behavior, and functionality.

By consolidating these elements – core principles, visual design specifications, and interface components – into a comprehensive guide and resource library, Nachos provides several significant benefits to Trello's internal teams. It fosters increased efficiency in the design and development process by providing a centralized source of truth and a library of reusable components. Designers can work faster by utilizing established visual styles and components, and developers can implement interfaces more quickly using the documented components and code snippets. This reduces
redundant effort and accelerates the delivery of new features and improvements to the Trello platform.

Furthermore, Nachos ensures a high degree of consistency in the user interface across the entire Trello web application. The shared visual design and the consistent use of interface components reduce confusion for users and make the platform easier to learn and navigate. The clear documentation also improves communication and collaboration between design and development teams, ensuring that the implemented product accurately reflects the intended design. The inclusion of core principles helps maintain this consistency even as the platform evolves.

For the vast user base of Trello, the existence and application of Nachos translate into a more user-friendly, predictable, and cohesive experience. The visual consistency makes it easy to move between different boards and teams. The standardized interface components ensure that interactions are familiar and intuitive. This improved usability helps users focus on organizing their work and collaborating effectively, rather than struggling with an inconsistent interface.

In conclusion, Nachos is a critical design system that serves as Trello's comprehensive guide and resource library. By housing everything needed for design, including core principles, visual design specifications, and interface components, Nachos empowers Trello's teams to build a consistent, intuitive, and high-quality user interface. It is the essential system that helps Trello maintain its visual clarity, support effective collaboration, and deliver a consistently great experience to its millions of users worldwide. Nachos provides the foundational ingredients for Trello's continued success as a leading project management tool.

Blog Posts About Design System

Related Products View All
Palmetto Design System

The goal of the Palmetto Design System is to make it easier and faster for us to produce applications with the Palmetto brand.

Paradigm Design System

For Mail.ru products, Paradigm is a design system that enables us to preserve the integrity of the user experience while streamlining design and development resources.

Paste Design System

At Twilio, the Paste design system is employed to create user interfaces that are intuitive, unified, and of the highest caliber. With tools and resources, Paste assists Product Designers and Engineers in creating consumer UIs in Figma and React.

Primer Design System

Design, construct, and produce using the design system on GitHub

Radius Design System

You may speed up your design system by using the opinionated collection of open-source tools and frameworks known as The Radius.

UI2 Figma's Design System

Figma's UI2 Design System is a comprehensive set of design guidelines and resources that help teams create consistent, high-quality user interfaces (UIs) across web, mobile, and other digital platforms.

VTEX Design System

VTEX Styleguide is the design system for VTEX, serving as the home for all reusable patterns, components, and assets related to product design.

Wanda Design System

Wanda is Wonderflow’s open-source design system built for digital products and experiences. Wanda aims to provide a solid guidance for designers and developers, to reduce the risks of divergence.

Cedar

Cedar is REI’s open-source Design System for digital products and experiences. Cedar includes the resources to create user interfaces consistent with REI’s experience principles, brand styles, and best practices.

Latitude

Design guidelines, component documentation, and resources for building interfaces with Flexport’s design system.