W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Trello
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.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/trello/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/trello/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Trello
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 · [email protected] · 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 ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
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: [email protected] from the encyclopedia.
Components — same template, themed by Trello
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Trello
A clear hierarchy in Trello's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ trello-blue #0079BF accent-hover
→ trello-blue-hover #2890CC background-dark
→ trello-canvas-dark #1D2125 background-light
→ trello-white #FFFFFF error
→ trello-blue #0079BF identity
→ trello-blue #0079BF on-identity
→ trello-white #FFFFFF primary
→ trello-blue #0079BF primary-hover
→ trello-blue-hover #2890CC success
→ trello-blue #0079BF surface-dark
→ trello-surface-dark #22272B surface-light
→ trello-surface-light #F4F5F7 text-primary-dark
→ trello-white #FFFFFF text-primary-light
→ trello-black #172B4D warning
→ trello-blue #0079BF Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from trello)
Light mode (14 roles)
accent
→ trello-blue accent-hover
→ trello-blue-hover background
→ trello-white error
→ trello-blue primary
→ trello-blue primary-hover
→ trello-blue-hover success
→ trello-blue surface
→ trello-surface-light surface-elevated
→ trello-white text-primary
→ trello-black text-secondary
→ trello-text-secondary text-tertiary
→ trello-text-tertiary warning
→ trello-blue warning-hover
→ trello-blue-hover Dark mode (14 roles)
accent
→ trello-blue accent-hover
→ trello-blue-hover background
→ trello-canvas-dark error
→ trello-blue primary
→ trello-blue primary-hover
→ trello-blue-hover success
→ trello-blue surface
→ trello-surface-dark surface-elevated
→ trello-surface-dark text-primary
→ trello-white text-secondary
→ trello-text-tertiary text-tertiary
→ trello-text-secondary warning
→ trello-blue warning-hover
→ trello-blue-hover Rules (8 typed constraints)
error · 6 rules
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 rule
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 rule
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.