# Trello

> `trello@1.0.0`

Trello is a card-and-board work-management tool — the kanban app that made boards mainstream — owned by Atlassian since the 2017 acquisition. The brand voice is friendly, playful, and direct. Visually, Trello carries its own signature blue mark (#0079BF) while sharing the Atlassian Design product surface language — clean white canvases, near-black body text, and a disciplined neutral system.


**Tags:** `saas`, `productivity`, `trello`, `atlassian`, `kanban`

## Atoms

### Palette

**Trello** · `trello@1.0.0` · Proprietary — All Rights Reserved

> Trello's brand palette, anchored on Trello Blue (#0079BF) — the signature board-blue that has carried the kanban-card mark since the platform's early days. Trello (owned by Atlassian since 2017) retains its own brand color while sharing the Atlassian design language for product surfaces. The institutional voice pairs that blue with a clean white canvas and near-black body text. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `trello-blue` | Trello Blue | `#0079BF` |
| `trello-white` | Trello White | `#FFFFFF` |
| `trello-black` | Trello Black | `#172B4D` |
| `trello-canvas-dark` | Trello Canvas Dark | `#1D2125` |
| `trello-surface-light` | Trello Surface Light | `#F4F5F7` |
| `trello-surface-dark` | Trello Surface Dark | `#22272B` |
| `trello-text-secondary` | Trello Text Secondary | `#5E6C84` |
| `trello-text-tertiary` | Trello Text Tertiary | `#8993A4` |
| `trello-blue-hover` | Trello Blue Hover | `#2890CC` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `trello-white` | `#FFFFFF` |
| `surface` | `trello-surface-light` | `#F4F5F7` |
| `surface-elevated` | `trello-white` | `#FFFFFF` |
| `text-primary` | `trello-black` | `#172B4D` |
| `text-secondary` | `trello-text-secondary` | `#5E6C84` |
| `text-tertiary` | `trello-text-tertiary` | `#8993A4` |
| `primary` | `trello-blue` | `#0079BF` |
| `primary-hover` | `trello-blue-hover` | `#2890CC` |
| `accent` | `trello-blue` | `#0079BF` |
| `accent-hover` | `trello-blue-hover` | `#2890CC` |
| `warning` | `trello-blue` | `#0079BF` |
| `warning-hover` | `trello-blue-hover` | `#2890CC` |
| `error` | `trello-blue` | `#0079BF` |
| `success` | `trello-blue` | `#0079BF` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `trello-canvas-dark` | `#1D2125` |
| `surface` | `trello-surface-dark` | `#22272B` |
| `surface-elevated` | `trello-surface-dark` | `#22272B` |
| `text-primary` | `trello-white` | `#FFFFFF` |
| `text-secondary` | `trello-text-tertiary` | `#8993A4` |
| `text-tertiary` | `trello-text-secondary` | `#5E6C84` |
| `primary` | `trello-blue` | `#0079BF` |
| `primary-hover` | `trello-blue-hover` | `#2890CC` |
| `accent` | `trello-blue` | `#0079BF` |
| `accent-hover` | `trello-blue-hover` | `#2890CC` |
| `warning` | `trello-blue` | `#0079BF` |
| `warning-hover` | `trello-blue-hover` | `#2890CC` |
| `error` | `trello-blue` | `#0079BF` |
| `success` | `trello-blue` | `#0079BF` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `trello-blue` | `#0079BF` |
| `on-identity` | `trello-white` | `#FFFFFF` |
| `primary` | `trello-blue` | `#0079BF` |
| `primary-hover` | `trello-blue-hover` | `#2890CC` |
| `accent` | `trello-blue` | `#0079BF` |
| `accent-hover` | `trello-blue-hover` | `#2890CC` |
| `success` | `trello-blue` | `#0079BF` |
| `warning` | `trello-blue` | `#0079BF` |
| `error` | `trello-blue` | `#0079BF` |
| `background-light` | `trello-white` | `#FFFFFF` |
| `background-dark` | `trello-canvas-dark` | `#1D2125` |
| `surface-light` | `trello-surface-light` | `#F4F5F7` |
| `surface-dark` | `trello-surface-dark` | `#22272B` |
| `text-primary-light` | `trello-black` | `#172B4D` |
| `text-primary-dark` | `trello-white` | `#FFFFFF` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (6)

#### `colorChoice` → `logo.mark`

- **allowed:** trello-blue, trello-white, trello-black
- **forbidden:** any-non-brand-color

> The Trello mark renders in Trello Blue on light surfaces and in white on dark surfaces. Recoloring the mark into off- brand hues violates Atlassian's brand-use guidance for Trello. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, on-busy-photo, gradient-fill

> Atlassian's brand resources prohibit stretching, rotating, recoloring, or applying decorative effects to portfolio marks, including Trello. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> WCAG 2.1 Level AA contrast minimum for body text. Trello Black (#172B4D) on Trello White (#FFFFFF) clears AA comfortably. 

#### `variantSelection` → `logo`

- **use:** `logo-light`
- **when:** `backgroundColorScheme="dark"`

> On dark surfaces, use Trello's documented light-fill mark variant; do not invert the blue mark on the fly. 

#### `contextRestriction` → `roles.colors.identity`

- **forbiddenContexts:** product-of-competitor, merchandise, endorsement-implication, company-name-or-domain

> Atlassian's trademark guidance forbids use of the Trello name and mark in third-party company names, domains, and uses that imply affiliation or endorsement. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Trello-skinned surfaces must clear AA on body text, in line with Atlassian Design's accessibility floor. 

### ⚠️ warning (1)

#### `enumMembership` → `typography.heading.fontWeight`

- **allowed:** 500, 600, 700

> Trello's marketing and product surfaces render headings in the 500–700 band, consistent with Atlassian Design; lighter weights undermine the confident voice of the brand. 

### 💡 recommendation (1)

#### `compositionConstraint` → `roles.colors.identity`

- **pairsWith:** trello-white, trello-black, trello-surface-light

> Trello Blue is calibrated to read on white and on Atlassian's documented near-black. Pairing it with another saturated hue at the same weight breaks the focused, board-anchored voice of the brand surface. 

## Provenance

- **Source:** <https://atlassian.design/>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** Trello and the Trello logo are trademarks of Atlassian Pty Ltd. The primary brand color Trello Blue (#0079BF) is documented in Trello's brand surfaces; the surrounding product design language is documented at Atlassian Design (atlassian.design). brand-atoms catalogues only the publicly documented signature color and authored neutrals; licensed application of the Trello name and mark is governed by Atlassian's brand-use guidance. 
- **Imported:** `2026-05-18`
- **Notes:** Trello's product surfaces render in a neutral humanist sans consistent with Inter; Inter is referenced here as the primary face and is already in the brand-atoms catalog. Atlassian's Charlie Display proprietary face is used on some marketing surfaces; consumers with a licensed Charlie Display file should override this reference at consumption time. 

---

*Generated by the brand-atoms converter. Source: `trello@1.0.0` from the encyclopedia.*