Brand Guide

Whether it’s an app, a business card, a landing page, a t-shirt, or a promotion, we want Trello things to look and feel like Trello things. This guide has guidelines, logos, colors, assets, and instructions necessary for putting together your very own Trello-branded materials.

This is primarily for people at Trello working on Trello. If you are looking to write about Trello, email press@trello.com or download the brand assets. If you are you looking to use Trello or the Trello API in your third-party project, check out the third-party guidelines.

July 17, 2017: Updated Trello logos without gradients

Show complete history.

Contents

Logo and Assets

Download the Trello logo in PNG, SVG, and PDF below.

All Brand Assets

The following download includes the Trello logo and icon, Business Class and Trello Gold logos, mascots like Taco and Chorizo, and every Trello-related image you’ll ever need in PNG, SVG, PDF, and Sketch. And screenshots.

Trello Brand Assets - Click to download them all.

Download All Brand Assets (ZIP)

Looking for screenshots of the app? Download a collection of Trello screenshots.

Logo Guidelines

Colors

Need a color for your UI element, illustration, or t-shirt? Choose from our plentiful color palette!

Applying Colors

There are ten different weights for each hue, 50 being the lightest and 900 being the darkest. Generally, you should start with the 500 weight and go up or down from there.

There should be enough colors in the palette to use for anything you would want to make for Trello, from marketing materials to interface chrome, to illustrations, to labels, to backgrounds, to icons, to stickers and hats. Of course, there will be an occasional case where you need to work outside the palette, which is fine.

Trello Blue

Trello Blue is defined as…

We use Trello Blue in backgrounds, app headers, and logos. When you need a single color to represent the brand, use this one.

Business Blue

“Business Blue” is reserved for Business Class and Enterprise marketing materials. It shouldn’t be one of the primary colors in the app.

Semantics

Colors should have a semantic value when used in an interface. Stick with these rules main rules.

Some additional interface guidelines:

Text Contrast

Each color has a corresponding lightness for the text (dark or light) as seen in the palette. Don’t put dark text on a dark background.

Backgrounds

There are often cases where we have white elements on the page, like comment bubbles, buttons, and form inputs. With a white background, there isn’t enough contrast to distinguish them. In those cases, Light Gray 100 (#EDEFF0) is used to help those elements stand out.

Typography

Trello uses Facit for all marketing purposes. It works great for headlines, body font, and as a display font. The logotype uses FF Market. That’s the only place Market should be used, however. Stick to Facit for any brand materials. For apps, we tend to use system fonts for performance and platform consistency.

The default font color is #4D4D4D or hsl(0, 0%, 30%). When you need a “quiet” font color, go with #8C8C8C or hsl(0, 0%, 55%). Always use white text on a colored background.

For optimal readability, we strive for a line length of 50 to 75 characters per line. Font sizes and line heights vary based on platform. For marketing pages, we have a font size of 20px for desktop and 16px for mobile. We stick to a line height of around 1.4em. Keep copy succinct and focused and favor small paragraphs. Important text is emphasized with bold.

Use proper quotes, accents, ellipsis, and dashes for all copy. Here’s a great guide to smart quotes from Jason Santa Maria. Here’s another on quotes, accents, and dashes from Jessica Hische. Typographically, it’s the right thing to do, plus you’ll look cool and impress all your friends.

Graphics

Here are some general rules for graphics, particularly surrounding campaigns…

Some examples might help visualize what we’re going for here…

Examples of graphics in a campaign.

Graphics in Campaigns

When initially running a campaign, we should be visually consistent throughout. Blog graphics should match the social graphics which should match the landing page graphics and email graphics and so on. Later social posts and emails in the campaign might use different graphics—gifs, quotes, or what have you—to highlight certain features. Here are some places we use graphics in campaigns.

Campaigns aren’t the only place we have graphics, of course. Some graphics are only used in a single place at one time and don’t need to adhere to the general rules so strictly. You should still generally draw from the palette for these and all the other branding guidelines. Some examples of one-off graphics…

Business Class and Trello Gold

Business Class and Trello Gold each have their own brand colors and logos. Business Class uses the Business Blue from the palette, with the 500 weight being the primary color. Business Blue is meant to be more calm, muted, and professional.

The Trello Gold brand color is… gold, or more specifically Yellow 500 from the palette. You can use various Yellow weights for backgrounds and such. Always refer to the product as “Trello Gold,” not just “Gold”.

The Business Class and Trello Gold logos are included in the assets download.

Card Anatomy

Cards should leave the same visual imprint wherever they appear: sites, apps, marketing materials, etc. Here are some guidelines to use. You should attempt to work within the given platform’s style.

Frame

Cards have a white background. They are borderless except for a bottom border of Light Gray 400, to give them some depth. Because of the lack of contrast, you shouldn’t display cards on a white background. If need to show cards on a white background, use a border color of Light Gray 300.

Card Covers and Stickers

Card covers go edge to edge and fill the top of the card. The top left and right corners should be rounded.

Covers have a max-height. If the cover meets the max height, the extra “letterbox” space will be filled with the edgeColor which is available on the server. It’s taken from the edge of the image at time of upload.

Stickers have a white border to separate the image from the cover. They have a slight shadow to give them depth. If there is no cover, the stickers have their own area above the card name.

Labels

Labels help you categorize cards. They are shown on the front of cards above the name and below the card cover (if there is one). Labels are rounded and separated with whitespace. Use the primary, 500-weight colors from the palette for colors.

Badges

Badges give you a quick glimpse of the number of comments, attachments, completed checklist items, due dates and such, so you don’t have to open the card. They show up in the bottom left of the card.

A badge consist of an icon and optional text. Badges use a lighter color than the name of the card, as they aren’t the focus. They are separated by whitespace. By default, they do not have a background color. There are some states where there is a background color.

  • For cards that are “due soon” (within 24 hours before the due date), use Yellow 500.
  • For cards that are “due now” (within 36 hours after the due date), use Red 600.
  • For cards that are “past due” (after 36 hours of the due date), use Red 300.
  • For the notification badge, use Red 600.
  • For cards with completed checklists, use Green 500.
  • For cards you have voted on, use Light Gray 200.

If a badge uses a background color, round the corners of the badge slightly.

Badges should be ordered as such:

  1. Notifications
  2. Archived
  3. Subscribed
  4. Due Date
  5. Description
  6. Comments
  7. Attachments
  8. Checklists
  9. Votes

Members

Members are shown in the bottom right corner. Show them in the same order they were added, and in the order on the front and back of the card. If there are enough badges and members that they would overlap, the members section wraps and shows below the badges.

Mascots

Taco is our spokes-husky, a.k.a. our mascot. He’s modeled after Fog Creek co-founder Joel Spolsky’s siberian husky, though it was the team that co-opted Taco. Taco howls (“Roo!”), but doesn’t bark (“Woof!”). He only appears occasionally, like to announce new things, or in a video game here and there. Don’t use Taco in place of a logo. Taco should only appear once on a screen or view.

Chorizo the cat is our co-mascot. She appears even less frequently. When Taco is talking to someone besides people using Trello, he’s usually talking to Chorizo. She’s kind of like the superhero’s sidekick that’s not in every movie. There’s also Pete, a lovable computer, featured in a sticker pack. If you need another character to use and somehow you’ve used both Taco and Chorizo, go with Pete.

All the mascots are available in the assets download.

Third-Party Guidelines

If you’re using Trello in your third-party project, that’s awesome! Please feel free to do the following…

But please don’t…

Trello and the Trello logo are trademarked. Don’t use them to represent your product. Please don’t name your projects or domain names anything that implies Trello’s endorsement. Thanks!