Trello Design System

Trello's homepage is the rare Atlassian-owned marketing surface that ships a square primary CTA — a `60px`-tall blue rectangle at `0px` border-radius reading "Get Trello for free", set against form inputs at `4.8px` and feature cards at `8px`. The voltage behind the rectangle is `#0065ff`, distinct from the older Trello Blue (`#0052cc`) that still carries link text and from the Atlassian blue family that lives in Jira. The canvas is white (`#ffffff`); ink commits to a deep navy (`#091e42`) that lands as text or border 423 times across the captured DOM — the page's load-bearing chromatic event after the CTA. Where most productivity homepages soften their primary action with a pill or a `12px` corner, Trello hard-cuts the rectangle.

The DESIGN.md file packages 19 color tokens, 12 typography styles, 5 corner radii, 9 spacing values, and 18 components. Colors split into ink grades (`#091e42` deep navy, `#172b4d` Atlaskit N900, `#000000` true black for icon strokes), surfaces (`#ffffff` canvas, `#f4f5f7` neutral pane, `#deebff` selected-blue tint), brand voltage (`#0065ff` CTA, `#0747a6` pressed, `#0052cc` link), and a mockup accent family (`#8777d9` purple, `#00c7e5` teal) pulled from the Inbox-Boards-Planner UI illustrations. The format follows the Google Labs DESIGN.md spec — token references like `{colors.brand-cta}` and `{typography.display-lg}` that designers and AI agents can both parse without a translation layer.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Trello's specific gate: a white canvas, navy headlines, Charlie Display weight 500 at the top, Charlie Text weight 400 below, and one square blue rectangle per fold. Reference the tokens directly inside Tailwind config, CSS variables, or paste the component block into a brand audit. The discipline worth studying is the refusal of pill geometry — Trello keeps Atlassian's typography and ink palette but inverts the radius convention so the CTA reads as a board card, not a chip. The square is the signal.