Productivity / iOS / Android / Web

Trello

Trello pairs deep navy ink with one bright blue and keeps everything else pale and softly rounded, so the cards on a board are the loudest thing on screen.

Download
  • #0065FF
  • #091E42
  • #0747A6
  • #F4F5F7
  • #DEEBFF
  • #F0F0F0

Color

Every color token in the file, grouped by role.

Brand

  • primary#0065FF
  • on primary#FFFFFF

Surfaces

  • canvas#FFFFFF
  • canvas subtle#F4F5F7
  • canvas faint#FAFBFC
  • card#F0F0F0

Text

  • link#0052CC
  • ink#091E42
  • ink strong#172B4D

Lines

  • scrim#091E4226 (15%)

More

  • blue deep#0747A6
  • blue wash#DEEBFF

Typography

Each style is set with the file's own family, size, weight and spacing.

  • Charlie DisplayCharlie Display is private and not available in open fonts. Shown in Hanken Grotesk, the closest open match.
  • Charlie TextCharlie Text is private and not available in open fonts. Shown in Work Sans, the closest open match.
  • display48px / 500 / 60px

    Trello

  • headline36px / 500 / 48px

    Trello

  • lead20px / 400 / 30px

    Pack my box with five dozen liquor jugs

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • button16px / 400 / 24px

    Continue to checkout

Shape

Corner radius tokens.

  • xs2px
  • sm4px
  • md5px
  • lg8px
  • round999px

Spacing

The spacing scale, drawn to size.

  • sm8px
  • md16px
  • lg20px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button hero
    button-hero
  • nav item
    nav-item
  • feature card
    feature-card
  • info wash
    info-wash
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 96 lines
version: alpha
name: Trello-design-analysis
description: "A board app in the Atlassian blue family: deep navy ink (#091e42), a bright blue action (#0065ff), pale gray and light blue surfaces, Charlie Display and Text at regular weights and 4 to 8px rounded shapes."
status: Draft
appVersion: "measured in a browser, 2026-10-06"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#0065ff"
  on-primary: "#ffffff"
  blue-deep: "#0747a6"
  link: "#0052cc"
  ink: "#091e42"
  ink-strong: "#172b4d"
  canvas: "#ffffff"
  canvas-subtle: "#f4f5f7"
  canvas-faint: "#fafbfc"
  blue-wash: "#deebff"
  card: "#f0f0f0"
  scrim: "#091e4226"

typography:
  # Font note: "Charlie Display" is a private font and is not available in open fonts. Closest open alternative: "Hanken Grotesk".
  # Font note: "Charlie Text" is a private font and is not available in open fonts. Closest open alternative: "Work Sans".
  display:
    fontFamily: "'Charlie Display', 'Hanken Grotesk', sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 60px
  headline:
    fontFamily: "'Charlie Display', 'Hanken Grotesk', sans-serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 48px
  lead:
    fontFamily: "'Charlie Text', 'Work Sans', sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 30px
  body:
    fontFamily: "'Charlie Text', 'Work Sans', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  button:
    fontFamily: "'Charlie Text', 'Work Sans', sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px

rounded:
  xs: 2px
  sm: 4px
  md: 5px
  lg: 8px
  round: 999px

spacing:
  sm: 8px
  md: 16px
  lg: 20px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.md}"
    height: 50px
    padding: 0 24px
  button-hero:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.lead}"
    height: 60px
    padding: 0 32px
  nav-item:
    backgroundColor: transparent
    textColor: "{colors.ink-strong}"
    typography: "{typography.body}"
    height: 60px
    padding: 20px 16px
  feature-card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.ink}"
    typography: "{typography.lead}"
    rounded: "{rounded.md}"
    padding: 20px
  info-wash:
    backgroundColor: "{colors.blue-wash}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 16px

Overview

Trello is a card-board productivity tool with a public marketing site. The look is the Atlassian blue family: deep navy ink, a bright blue action, light gray surfaces and rounded 4 to 8px shapes. [Observed]

What defines the look:

  1. Deep navy ink. Text is #091e42 and #172b4d, not black. [Measured]
  2. A bright blue action. #0065ff fills the main buttons, with #0747a6 and #0052cc for deeper blues. [Measured]
  3. Pale surfaces. #f4f5f7, #fafbfc and #deebff for sections, and #f0f0f0 for feature cards. [Measured]
  4. Two Charlie faces. Display at weight 500 for headlines and Text at 400 for copy. [Measured]
  5. Soft, small corners. Buttons and cards use 4.8px, with 8 on panels. [Measured]

Source for this file: the Trello marketing home page measured in a browser at 1440 and 390 wide, read on 2026-10-06. The board and card screens are behind login and were not measured. The Atlassian Design System was not read. No app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Action blue#0065ffPrimary buttons
Deep and link blue#0747a6, #0052ccBands and links
Text#091e42, #172b4dHeadlines and navigation
Page#ffffffMain surface
Pale grays#f4f5f7, #fafbfc, #f0f0f0Sections and cards
Blue wash#deebffHighlight panels

Typography

Charlie Display sets headlines at weight 500: 48 on 60 for the hero and 36 on 48 for sections. Charlie Text sets copy at 400: 20 on 30 for leads and 16 on 24 for body and buttons. [Measured]

Shape and spacing

Corners are 2, 4, 4.8 and 8, with circles for avatars. Buttons are 50 to 60 high, navigation items 60 high with 20 by 16 padding. Cards carry a soft shadow of 15 percent navy. [Measured]

Iconography and motion

Not measured in this pass. [Inferred]

Themes

Light on the pages measured. [Observed]

Platform: iOS

The Trello iOS app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Chevron plus previous title and the edge swipe, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for boards, notifications and account. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

A floating or bar button for adding a card. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The apps are expected to share the blue, the navy ink and the card style with the web. [Inferred]

Platform: Android

The Trello Android app was not captured. The notes below follow from the web design and platform conventions.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

System back and gesture, with an up arrow in the top bar, as the platform expects. Not confirmed on a device. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for boards, notifications and account. [Inferred]

Main action

Expected on Android: Floating action button.

A floating action button for adding a card. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-06 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The apps are expected to share the blue, the navy ink and the card style with the web. [Inferred]

Platform: Web

The Trello marketing home page, measured at 1440 and 390 wide. Board and card screens were not measured.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

A 60 high top bar with Features, Solutions, Plans and Resources and sign-in buttons. [Observed]

Main action

Expected on Web: Page-level button.

A bright blue button with white text, 50 to 60 high. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

Not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Square-ish blue buttons with a 4.8px corner. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values at each breakpoint. [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Buttons measure 50 to 60 high. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

Not measured. [Inferred]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Not applicable to the public pages measured. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

The responsive page keeps type and color and changes layout. [Measured]

Cross-platform consistency

Consistent across platforms: the blue and navy pair, pale surfaces and soft corners. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Use navy for text instead of black.
  • Use one bright blue for the main action.
  • Keep corners small and cards softly shadowed.
  • Use pale blue for highlights.

Don't

  • Don't use pure black text.
  • Don't use pills for primary buttons.
  • Don't add a second action color.

Known Gaps

  • Boards, cards, lists and the signed-in app were not measured, so the core product look is only inferred.
  • The iOS and Android apps were not captured. Their sections are inferred from the web design and platform conventions.
  • Icons, motion and exact breakpoints were not measured.
  • Account deletion and store policy rules were not verified.
  • The Atlassian Design System was not read, so role names are not given.