screenroveScreenrove / Design references
Trello design guide
Board header above horizontally arranged lists.
Typography
Observed family: "Atlassian Sans", ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif. Font files are not distributed.
marketing: Light and accent surfaces
- color 1:
rgb(255, 255, 255) - background 2:
rgb(23, 43, 77) - color 3:
rgb(9, 30, 66) - color 4:
rgb(0, 82, 204) - background 5:
rgb(0, 101, 255) - color 6:
rgb(0, 0, 0)
Layout and components
- Board header above horizontally arranged lists.
- Cards use modal details over the board.
- Compact popovers hold checklist and scheduling controls.
- List headers show titles and card counts.
- Card actions combine icons with short labels.
- The date picker combines calendar and reminder fields.
product: Dark
- color 1:
rgb(169, 171, 175) - color 2:
rgb(206, 207, 210) - color 3:
rgb(31, 31, 33) - background 4:
rgb(102, 157, 241) - color 5:
rgb(255, 255, 255) - color 6:
rgb(23, 43, 77)
Layout and components
- Board header above horizontally arranged lists.
- Cards use modal details over the board.
- Compact popovers hold checklist and scheduling controls.
- List headers show titles and card counts.
- Card actions combine icons with short labels.
- The date picker combines calendar and reminder fields.
Computed styles from captured visible DOM. Actual source viewports are recorded in work evidence; captures are not upscaled to the brief target.
Download DESIGN.md