BLOG
UI Tools Mobile Menu
Suggest Tool
N

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
P
Pluralsight Design System

The Pluralsight Design System strives toward a cohesive design language for Pluralsight’s products, a shared vocabulary for their teams, and basic building blocks to accelerate development.

H
Human Interface Guidelines

Get in-depth information and UI resources for designing great apps that integrate seamlessly with Apple platforms.

S
Seek Style Guide

The SEEK styleguide's purpose is to enable the creation of content that will assist our users to complete tasks easily and hopefully enjoy the experience.

S
ServiceNow Design System

The ServiceNow Design System is a living system that empowers us to design and achieve a consistent, efficient, and high quality visual language that brings cohesion and familiarity to the user experience across the platform.

P
Photon Design System

Photon is the Firefox design language to build modern, intuitive, delightful experiences, for products across all platforms – from mobile to desktop, from TV to the next big thing.

P
Predix Design System

Our user interface components enable you to quickly and easily create Industrial Internet web applications that run on dedicated Predix services and data.

C
Canvas Design System

This library showcases the building blocks that make up Hubspot's design system, from colors and typography to React-based components and data visualization tools.

G
Global Experience Language (GEL)

GEL is the BBC's shared design framework which enables us to create consistent and delightful user experiences across all of our Digital Services.

Y
Yelp Styleguide

The styleguide is a resource that provides a common language around Yelp’s UI patterns. We use it to maintain modular front-end code and visual consistency across the web app.

W
Wonderbly Design System

We’ve been working to create this design system as a centralised hub for showcasing our design rules, principles, and frontend components.

Suggest Product