# Trello — DESIGN.md

Board header above horizontally arranged lists.

## Agent task
Use these observed references to build an original interface.

## Font
"Atlassian Sans", ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif

## Marketing — Light and accent surfaces

### Observed palette
- color: `rgb(255, 255, 255)`
- background: `rgb(23, 43, 77)`
- color: `rgb(9, 30, 66)`
- color: `rgb(0, 82, 204)`
- background: `rgb(0, 101, 255)`
- color: `rgb(0, 0, 0)`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Skip to main content | 16px / 24px | 400 | Not recorded |
| Control | 20px / 30px | 400 | Not recorded |
| Go to your boards | 19.2px / 28.8px | 400 | Not recorded |
| Capture, organize, and tackle your to-dos fro | 48px / 60px | 500 | Not recorded |
| Trello 101 | 16px / 1.25px | 700 | Not recorded |

### Layout & hierarchy
- Board header above horizontally arranged lists.
- Cards use modal details over the board.
- Compact popovers hold checklist and scheduling controls.

### Components & behavior
- List headers show titles and card counts.
- Card actions combine icons with short labels.
- The date picker combines calendar and reminder fields.

## Product — Dark

### Observed palette
- color: `rgb(169, 171, 175)`
- color: `rgb(206, 207, 210)`
- color: `rgb(31, 31, 33)`
- background: `rgb(102, 157, 241)`
- color: `rgb(255, 255, 255)`
- color: `rgb(23, 43, 77)`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Control | 14px / 20px | 500 | normal |
| Control | 14px / 20px | 400 | normal |
| Screenrove Research | 16px / 32px | 653 | normal |
| Control | 14px / 10px | 500 | normal |
| Star or unstar board | 14px / 32px | 500 | normal |

### Layout & hierarchy
- Board header above horizontally arranged lists.
- Cards use modal details over the board.
- Compact popovers hold checklist and scheduling controls.

### Components & behavior
- List headers show titles and card counts.
- Card actions combine icons with short labels.
- The date picker combines calendar and reminder fields.

## Implementation recommendations
- Preserve the observed hierarchy and spacing roles.
- Use original content and branding.
- Do not infer missing onboarding or paid workflows.

## Interaction inventory
- Private blank board: New private Screenrove Research board with initial list composer. Same source capture appears in the walkthrough.
- First list: A To do list in the private research board. Same source capture appears in the walkthrough.
- Create a card: Drafting a sample research task. Same source capture appears in the walkthrough.
- Card details: Research task detail with the activity panel collapsed. Same source capture appears in the walkthrough.
- Add checklist: Checklist creation popover; no checklist submitted. Same source capture appears in the walkthrough.
- Schedule a card: Date picker opened without applying a due date. Same source capture appears in the walkthrough.

## Avoid
Do not treat exploratory branches as a completed signup journey.

## Reference pages
- https://trello.com/home
- https://trello.com/pricing
- https://trello.com/butler-automation

## Capture scope
Existing signed-in account; new private Screenrove Research board, list and sample task. Original signup not observed.

## Format inspiration
Existing Screenrove design guide structure.