Last updated Apr 12, 2023

Style Guide

Trello has a unique style which emphasizes clear intent, accessibility, and a consistent experience across the site. Having your Power-Up match Trello styles is the best way to give it a familiar and intuitive feel to your users.

Read this guide to learn about:

How to keep your Power-Up’s UI within Trello’s style guidelines.
How to ensure your Power-Up is color theme compliant, so it can look its best whether your users are in light mode or dark mode in Trello.

Using Trello Styles

The easiest way to adhere to the Trello style guide is to use our publicly available base stylesheet at https://p.trellocdn.com/power-up.css. There is also a minified version here.

To use our base style sheet, simply use the link tag in all your HTML files, like so:

1
2
<html>
  <head>
    <link rel="stylesheet" href="https://p.trellocdn.com/power-up.css" />
  </head>
  <body>
    ...
  </body>
  <script src="./js/my-script.js"></script>
</html>

The sheet includes styles for all common elements like buttons, inputs, tables, headers, font styles, and code blocks. The styles are also color theme compliant, meaning they automatically produce different colors depending on if the user is on light mode or dark mode.

Just make sure to call TrelloPowerUp.iframe() , inside a script in your HTML files, which will initialize your iframe’s color theme listener, so it stay up to date with the user’s current mode.

1
2
// my-script.js
const t = window.TrelloPowerUp.iframe();

There are also a few additional classes and attributes you can use for extra customizability:

Element	HTML	Result (light)	Result (dark)
Primary Button (`class="mod-primary"`)	`<button class="mod-primary">Submit</button>`
Danger Button (`class="mod-danger"`)	`<button class="mod-danger">Cancel</button>`
Disabled Input (`disabled`)	`<button disabled>Submit</button>` `<input disabled>`

Using Atlassian Design Tokens in Your Custom CSS

You may want to use your own .css files in addition to using our provided base style sheet. That’s totally encouraged! However, when it comes to colors, we recommend using Atlassian Design Tokens. You can lookup each token from this lookup page.

These color tokens are exactly the same colors that power-up.css uses, which means that using tokens reaps you the same benefits:

Your Power-Up’s UI will match Trello’s style.
You’ll get color theme support for free.

For a guide on how to use Atlassian Design Tokens in your Power-Up, check out our guide here.

Using Custom Tokens for Color Theme Compliance

Perhaps you don’t want to use Atlassian Design tokens, but you still want to keep your Power-Up color theme compliant. Don’t worry! For a guide on how to create your own color tokens for color theme compliance, check out this guide.