Trello DESIGN.md

Visual task management with playful productivity and board-first clarity. Trello's public site uses a bright, approachable design language rooted in white, pale blue, bold blue gradients, rounded cards, and simple productivity metaphors like boards, cards, inboxes, and planners.

1. Visual Theme & Atmosphere

Overall Aesthetic

Trello feels like work management simplified into a colorful, visual, low-friction system. It is more playful than most B2B tools, but still clear and useful.

Mood & Feeling

• Light and productive
• Friendly, not intimidating
• Visual and easy to understand
• Organized but not corporate-heavy
• Optimistic and motion-ready

Design Density

Medium density. There are lots of feature blocks and examples, but the interface remains approachable because of bold cards, simple metaphors, and generous spacing.

Visual Character

• Blue-led brand framing
• Rounded cards and illustrated boards
• High-contrast white content shells
• Friendly productivity explanations
• Simple, legible feature modules

2. Color Palette & Roles

Core Foundation

Support and Utility

3. Typography Rules

Font Stack

css--font-display: "Charlie Display", "Helvetica Neue", Arial, sans-serif;
--font-sans: "Charlie Text", "Helvetica Neue", Arial, sans-serif;
--font-mono: "SF Mono", Menlo, monospace;

Type Scale

Typography Philosophy

Trello typography should feel clear, upbeat, and highly understandable. It should make productivity features feel accessible rather than dense.

4. Component Stylings

Buttons

css.button-primary {
  background: #0c66e4;
  color: #ffffff;
  border: none;
  border-radius: 999px;
  min-height: 44px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 600;
}

.button-primary:hover {
  background: #0055cc;
}

.button-secondary {
  background: #ffffff;
  color: #172b4d;
  border: 1px solid #dfe1e6;
  border-radius: 999px;
  min-height: 44px;
  padding: 0 20px;
}

Boards and Feature Cards

css.board-card {
  background: #ffffff;
  border: 1px solid #dfe1e6;
  border-radius: 20px;
  box-shadow: 0 12px 24px rgba(23, 43, 77, 0.06);
}

Inputs

css.input {
  background: #ffffff;
  color: #172b4d;
  border: 1px solid #dfe1e6;
  border-radius: 12px;
  min-height: 44px;
  padding: 12px 14px;
}

Component Notes

• Board metaphors should stay visually obvious
• Friendly illustrations and bright blues fit naturally
• Cards should feel tactile and approachable rather than severe

5. Layout Principles

Spacing Scale

Layout Behavior

• Use board-style demos and visual productivity stories
• Keep feature modules easy to browse in sequence
• Support both simple onboarding and more powerful capability discovery
• Use blue and illustration to add energy without losing clarity

Whitespace Philosophy

Whitespace should feel supportive and lightweight, making Trello’s visual productivity model easy to absorb quickly.

6. Depth & Elevation

Elevation Strategy

Trello uses soft card elevation with friendly, rounded content shells and approachable contrast.

css--shadow-soft: 0 8px 18px rgba(23, 43, 77, 0.05);
--shadow-card: 0 16px 28px rgba(23, 43, 77, 0.08);

Surface Hierarchy

• White base
• Soft blue and gray support sections
• Elevated cards and board demos
• Bright blue CTA emphasis

7. Do's and Don'ts

Do

• Keep the system visual, simple, and upbeat
• Use boards, cards, and lists as obvious metaphors
• Let blue energy support productivity rather than overwhelm it
• Preserve easy onboarding and approachability

Don't

• Do not make Trello look like heavy enterprise project software
• Do not overcomplicate feature demos with dense UI noise
• Do not flatten the board metaphor into generic cards
• Do not remove the sense of play and momentum

8. Responsive Behavior

Breakpoints

Responsive Rules

• Preserve the board metaphor on small screens
• Keep signup and tour actions obvious
• Prefer swipeable demos over tiny compressed layouts
• Maintain generous card radii and visual simplicity

9. Agent Prompt Guide

Quick Reference

• Blue-led, rounded, board-first productivity UI
• Friendly Charlie-style type and approachable feature blocks
• White cards, soft blue tints, and obvious task-management metaphors
• Lightweight but still capable work-management feel

Prompt Template

textDesign this like Trello's current public website:
- bright Trello-blue productivity foundation with white rounded cards
- visual board, list, and card metaphors that feel instantly understandable
- friendly, upbeat typography and approachable work-management demos
- soft blue and gray support sections with light card elevation
- simple, visual productivity energy instead of heavy enterprise complexity