--- version: alpha name: Trello website: "https://trello.com" description: >- Trello's marketing surface inherits the Atlassian design vocabulary while keeping its own voltage — a near-black navy ink ("#091e42") that carries 423 of the page's text and border occurrences, a punchier brand blue ("#0065ff") reserved for the rectangular "Get Trello for free" CTA, and the legacy Trello Blue ("#0052cc") still hanging on as link color. Display type is Charlie Display at weight 500 (48px hero, 36px section h2); body and buttons run Charlie Text at 12-24px weight 400. The shape language is square — the primary CTA renders at 0px radius against form inputs at 4.8px and feature cards at 8px, the inverse of the pill-everywhere convention. seo: title: "Trello Design System for React — Charlie Display, #0065ff, 18 components" metaDescription: "Trello's design system as a DESIGN.md file. Charlie Display, brand blue #0065ff CTA, navy ink #091e42, 18 components — for React, Next.js, and AI tools." highlights: - "Square-cornered primary CTA — `#0065ff` rectangle at 0px radius against 4.8px inputs and 8px cards" - "Navy ink dominance — `#091e42` carries 423 text-and-border occurrences across the page" - "Two voltages in tension — new `#0065ff` brand blue for the CTA, legacy `#0052cc` Trello Blue for link text" - "Atlassian-owned typography — Charlie Display 48px weight 500 hero, Charlie Text 19.2px weight 400 buttons" - "Decorative accent palette in mockups — `#8777d9` purple, `#00c7e5` teal, `#deebff` pale-blue inside Inbox-Boards-Planner illustrations" tags: - "Project Management" - "Productivity & SaaS" lastUpdated: "2026-05-13" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "https://trello.com" title: "Trello — official site" description: "The Atlassian-owned visual project-management product the design system documents." - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files." questions: - id: "primary-color" title: "What is Trello's primary brand color?" answer: "Trello's CTA voltage is `#0065ff`, a more saturated blue than the legacy Trello Blue (`#0052cc`). The `#0065ff` value fills the rectangular 'Get Trello for free' button (background 4 times, border 5 times in the captured DOM) and lives as `--color-B300-rgb` (0,101,255) inside the Atlassian token sheet. The pressed/deep variant is `#0747a6` (Atlaskit N300, count 3). Link text and inline anchors still use the older `#0052cc` — that hex shows up 25 times across the page as text and border, predating the brand-blue refresh." - id: "shape-language" title: "Why is Trello's primary CTA a square rectangle at 0px radius?" answer: "Trello gates the radius scale by component role and inverts the pill convention. The primary CTA renders at `0px` — a true rectangle, `60px` tall, `8px 24px` padding. Form inputs run at `4.8px` (the dominant radius in the extraction, count 13). Feature cards step up to `8px` (count 8), and smaller chips drop to `4px` (count 6). Avatar circles use `50%`. The square CTA reads as a Trello card — flat-edged, document-like — instead of a chip, reinforcing the kanban product identity. Where Atlassian's homepage commits to a `10000px` pill on the Jira CTA, Trello refuses the shape entirely." - id: "typography" title: "What typography does Trello use, and what should I use if Charlie isn't available?" answer: "Trello runs the same two Atlassian-licensed families that ship across Jira and Confluence: Charlie Display for display and section heads, Charlie Text for body, nav, and labels. The hero h1 sits at 48px weight 500 with line-height `60px` on Charlie Display; section h2 drops to 36px weight 500 line-height `48px`; body p sits at 16px weight 400 line-height `24px` on Charlie Text. Buttons render Charlie Text at 19.2px weight 400. Inter at weight 500 is the closest open substitute for Charlie Display; Inter at weight 400 covers Charlie Text. The cascade falls back to `-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Fira Sans, Droid Sans, Helvetica Neue, sans-serif` before generic sans-serif." - id: "ink-color" title: "Why is `#091e42` used instead of pure black for text?" answer: "The deep navy `#091e42` is the Atlaskit N600 token (RGB 9,30,66), and it carries 423 occurrences across the captured page as text (204), border (204), bg (6), and shadow (9). It reads as black at body sizes but holds a faint blue cast that ties the chrome back to the brand-blue voltage. Pure `#000000` shows up only 16 times — reserved for icon strokes inside form fields and a handful of high-contrast labels. The `#172b4d` mid-navy (N900, count 15) covers a third tier for headlines that need contrast against the surface pane without going to true black." - id: "css-variables" title: "Why does the page ship 86 CSS variables on `:root`?" answer: "Trello inherits the Atlassian token sheet at the document root — `--color-B300-rgb`, `--color-N600-rgb`, `--color-trelloblue-rgb`, `--bxp-charlie-display-font-family`, `--bxp-charlie-text-font-family`, and the full Atlaskit ramp (N0-N900, B50-B500, R50-R500, G50-G500, M50-M500, O50-O500, P50-P500, T50-T500, Y50-Y500) — 86 properties total. The values resolve through `var()` references inside component CSS, which is why a hex like `#0065ff` shows up as `rgb(var(--color-B300-rgb))` in the computed style. The `--color-trelloblue-rgb` value (0,121,191) is the legacy product-blue from the pre-Atlassian Trello brand, still resolved on `:root` for backwards compatibility." - id: "use-in-project" title: "How do I use this DESIGN.md to build a React project?" answer: "Feed the file to Claude, Cursor, or any agent that reads structured tokens — the AI will reproduce Trello's gate: white canvas, navy headlines, Charlie Display weight 500 at 48px hero, one square blue rectangle per fold at `#0065ff`. Reference the 19 color tokens, 12 type styles, and 18 components directly: every value is a quoted hex or px size you can paste into Tailwind config, CSS variables, or a `:root` block that mirrors the Atlaskit `--color-*-rgb` naming. The `button-primary` recipe (background `#0065ff`, text `#ffffff`, radius `0px`, padding `8px 24px`, height `60px`) maps onto shadcn/ui `Button` with a single `rounded-none` variant override." colors: brand-cta: "#0065ff" brand-cta-deep: "#0747a6" brand-link: "#0052cc" ink: "#091e42" ink-mid: "#172b4d" ink-true: "#000000" canvas: "#ffffff" surface-neutral: "#f4f5f7" surface-selected: "#deebff" hairline: "#dfe1e6" accent-purple: "#8777d9" accent-teal: "#00c7e5" trello-legacy-blue: "#0079bf" ramp-blue-100: "#4c9aff" ramp-blue-200: "#2684ff" ramp-green-300: "#36b37e" ramp-orange-200: "#ff8b00" ramp-red-300: "#de354c" ramp-yellow-300: "#f39300" typography: display-lg: fontFamily: "Charlie Display, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif" fontSize: 48px fontWeight: 500 lineHeight: 1.25 letterSpacing: 0 display-md: fontFamily: "Charlie Display, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif" fontSize: 36px fontWeight: 500 lineHeight: 1.33 letterSpacing: 0 display-md-strong: fontFamily: "Charlie Display, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif" fontSize: 36px fontWeight: 700 lineHeight: 1.33 letterSpacing: 0 display-sm: fontFamily: "Charlie Display, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif" fontSize: 24px fontWeight: 500 lineHeight: 1.33 letterSpacing: 0 heading-md: fontFamily: "Charlie Display, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif" fontSize: 20px fontWeight: 500 lineHeight: 1.2 letterSpacing: 0 eyebrow: fontFamily: "Charlie Display, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.25 letterSpacing: "0.5px" body-lg: fontFamily: "Charlie Text, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif" fontSize: 24px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-md: fontFamily: "Charlie Text, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-sm: fontFamily: "Charlie Text, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 button-md: fontFamily: "Charlie Text, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif" fontSize: 19.2px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 caption: fontFamily: "Charlie Text, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 legal: fontFamily: "Charlie Text, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.33 letterSpacing: 0 rounded: none: "0px" xs: "4px" sm: "4.8px" md: "8px" circle: "50%" spacing: xxs: "4px" xs: "8px" sm: "12px" md: "16px" lg: "20px" xl: "24px" xxl: "32px" section: "40px" band: "52px" components: button-primary: backgroundColor: "{colors.brand-cta}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "8px 24px" height: "60px" button-primary-hover: backgroundColor: "{colors.brand-cta-deep}" textColor: "{colors.canvas}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "8px 24px" height: "60px" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "8px 24px" height: "60px" border: "1px solid {colors.hairline}" button-on-dark: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.none}" padding: "8px 24px" height: "60px" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.none}" height: "60px" padding: "0 16px" nav-link: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: "12px 16px" height: "44px" hero-heading: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-lg}" rounded: "{rounded.none}" padding: "0" section-heading-dark: backgroundColor: "{colors.brand-cta}" textColor: "{colors.canvas}" typography: "{typography.display-md}" rounded: "{rounded.none}" padding: "0" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-true}" typography: "{typography.body-sm}" rounded: "{rounded.sm}" padding: "11.2px 12px 12.8px" height: "50px" border: "1px solid {colors.hairline}" text-input-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-true}" typography: "{typography.body-sm}" rounded: "{rounded.sm}" padding: "11.2px 12px 12.8px" height: "50px" border: "2px solid {colors.brand-cta}" feature-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: "20px 16px 16px" border: "1px solid {colors.hairline}" feature-card-tint-selected: backgroundColor: "{colors.surface-selected}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: "20px 16px 16px" feature-card-tint-purple: backgroundColor: "{colors.accent-purple}" textColor: "{colors.canvas}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: "20px 16px 16px" band-dark-blue: backgroundColor: "{colors.brand-cta}" textColor: "{colors.canvas}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "40px 32px" band-neutral: backgroundColor: "{colors.surface-neutral}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: "40px 32px" chip-status: backgroundColor: "{colors.surface-selected}" textColor: "{colors.brand-link}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: "4px 8px" list-card: backgroundColor: "{colors.surface-neutral}" textColor: "{colors.ink}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: "16px 16px 16px 24px" avatar: backgroundColor: "{colors.surface-neutral}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.circle}" height: "32px" divider: backgroundColor: "{colors.hairline}" textColor: "{colors.ink-mid}" typography: "{typography.caption}" rounded: "{rounded.none}" height: "1px" footer: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.legal}" rounded: "{rounded.none}" padding: "32px 32px" --- ## Overview Trello's marketing surface is the rare Atlassian-owned site that breaks the parent's pill convention — the primary CTA "Get Trello for free" renders as a `60px`-tall blue rectangle at `0px` border-radius against `#0065ff`, sitting on a white canvas (`#ffffff`) anchored on deep navy ink (`#091e42`). Where Atlassian's homepage gates the Jira action through a `10000px` pill, Trello hard-cuts the same component class into a square. The shape is the brand. **Square-as-card geometry**: Trello's primary CTA refuses the pill, the rounded-rect, and the chip — it commits to `0px` radius. The decision reads as a kanban move: every Trello card on the live product is a flat-edged document, and the marketing CTA inherits the same silhouette. Form inputs step up to `4.8px` (the dominant radius in the extraction, 13 occurrences), feature cards round to `8px`, and avatars use `50%`. The `0px → 4.8px → 8px → 50%` radius ladder gates radius by component role, and the primary action sits at the bottom rung — the most flat-edged, the most card-like. The typography pairing is inherited from Atlassian: **Charlie Display** at weight 500 (48px hero h1, 36px section h2, 24px h3) and **Charlie Text** at weight 400 (16-24px body, 19.2px buttons, 12px captions). The fallback chain is the long Atlaskit native stack — `-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Fira Sans, Droid Sans, Helvetica Neue, sans-serif`. Where most workspace-tool marketing sites license a humanist sans like Inter or Söhne and bolt their own weight strategy on top, Trello leans entirely on Charlie's weight 500 display ceiling — there is no weight 700 in the hero hierarchy. Only a single `strong` tag at 36px weight 700 (count 1 in the extraction) breaks the pattern, used inside a stat callout. Color discipline runs **two voltages in tension**. The newer brand blue `#0065ff` (CSS variable `--color-B300-rgb` at RGB 0,101,255) fills the primary CTA — only 9 occurrences across the captured DOM, but every one of them is load-bearing. The legacy Trello Blue `#0052cc` (Atlaskit N300, count 25) carries link text and underlined anchors — outnumbering the CTA voltage by three to one, but never appearing as a background. Both blues coexist because Trello has not migrated link styling to the refreshed brand voltage yet — a token-migration tell that documents the design system mid-transition. **Key Characteristics:** - Square primary CTA (`0px` radius) at `#0065ff` against `4.8px` inputs and `8px` feature cards. - Two blue voltages — `#0065ff` for CTA backgrounds, `#0052cc` for legacy link text. - Charlie Display weight 500 ceiling — no weight 700 in the hero hierarchy. - Navy ink `#091e42` carries 423 text-and-border occurrences across the page. - Decorative accents (`#8777d9`, `#00c7e5`, `#deebff`) live only inside the Inbox-Boards-Planner UI mockups, never as section backgrounds. - A single dark-blue band at `#0065ff` carries the "From message to action" section — the same hex as the CTA, here at section scale. ## Colors - **Brand CTA blue (`#0065ff`)** — frequency 9. Used as bg (4), border (5). The `--color-B300-rgb` token (RGB 0,101,255). Reserved for the primary CTA rectangle and the single dark-blue band ("From message to action") — the page's load-bearing brand voltage. - **Brand CTA deep (`#0747a6`)** — frequency 3. Used as bg (3). The pressed-state and `--color-N300-rgb` Atlaskit fill. Never appears at rest, only on hover and active. - **Legacy Trello Blue (`#0052cc`)** — frequency 25. Used as text (14), border (11). The older brand blue Trello carried before the `#0065ff` refresh. Still load-bearing for inline link text and anchor borders — outnumbers the CTA voltage 3-to-1. - **Deep navy ink (`#091e42`)** — frequency 423. Used as text (204), border (204), bg (6), shadow (9). The `--color-N600-rgb` value (RGB 9,30,66). The page's dominant ink — every headline, paragraph, and most border outlines. - **Mid navy (`#172b4d`)** — frequency 15. Used as text (6), bg (2), border (7). The `--color-N900-rgb` value (RGB 23,43,77). Used for accent headlines and the "From message to action" callouts inside the dark band. - **True black (`#000000`)** — frequency 16. Used as text (9), border (7). Reserved for icon strokes inside form inputs and high-contrast labels — never for body type. - **Canvas white (`#ffffff`)** — frequency 186. Used as text (87), bg (15), border (84). The default surface and inverse-ink color on the `#0065ff` band. - **Surface neutral (`#f4f5f7`)** — frequency 3. Used as bg (3). The `--color-N20-rgb` value (RGB 244,245,247). The pale pane behind list-card mockups and the "About" content frame. - **Surface selected (`#deebff`)** — frequency 2. Used as bg (2). The `--color-B50-rgb` pale-blue tint (RGB 222,235,255). Reserved for selected list cards and chip backgrounds inside the Boards mockup. - **Hairline (`#dfe1e6`)** — frequency 2. Used as border (2). The `--color-N40-rgb` value (RGB 223,225,230). The default border on text inputs and feature card outlines. - **Accent purple (`#8777d9`)** — frequency 2. Used as text (1), border (1). The `--color-P200-rgb` family (RGB 153,76,255 base). Appears only inside the Planner UI mockup illustration — never as a marketing surface. - **Accent teal (`#00c7e5`)** — frequency 2. Used as text (1), border (1). The `--color-T200-rgb` value (RGB 0,199,229). Inside the Inbox mockup illustration only. ## Typography Two Atlassian-licensed families, no third — the same pairing that ships across Jira, Confluence, and the Atlassian marketing site. **Charlie Display** carries display and section heads at weight 500: hero h1 at 48px line-height `60px`, h2 at 36px line-height `48px`, h3 at 24px line-height `32px`. The ceiling stays at weight 500 — there is no weight 600 or 700 in the hero hierarchy, with one `strong` tag at 36px weight 700 (count 1) the only exception, used inside a stat callout band. **Charlie Text** covers body, nav, buttons, and captions at weight 400. Body type sits at 16px line-height `24px` (count 37, the dominant signature); subhead body steps up to 20px line-height `30px`. The CTA button uses a distinctive 19.2px size with line-height `28.8px` — the only signature at that exact pixel that doesn't round to an even number, a tell that the Atlaskit token sheet computes button type as `1.2rem` against a base 16px root. Eyebrow labels and section overlines use Charlie Display at 16px weight 500 with `textTransform: uppercase` — the only place uppercase appears in the type hierarchy. Letter-spacing is `normal` (zero) across every signature in the extraction — Trello relies on size jumps and weight contrast rather than tracking to mark hierarchy. The fallback chain (`-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Fira Sans, Droid Sans, Helvetica Neue, sans-serif`) is identical to the Atlaskit `--atlassian-recommended-system-fonts` value. **Inter** at weight 500 for display and 400 for body is the closest open substitute. ## Layout The grid centers on a content frame near `1168px` with side gutters that step to `32px` on the dark-blue band and `40px` inside the major sections (the `40px 32px` padding pattern appears 6 times in the extracted spacing histogram). Sections stack vertically with `52px` of top-padding between major bands (`52px 0px 0px`, count 3) — narrower vertical rhythm than Atlassian's `64px+136px` scheme, which tracks with Trello's denser content surface. Inside sections, content blocks use `24px` between heading and supporting copy, `16px` between sibling cards, and `8px` for micro-spacing inside list-card stacks. The hero uses left-aligned type at roughly `538px` width — narrower than the `968px` Atlassian hero — paired with a hand-held mobile mockup illustration on the right. Below the fold, three-tile feature grids replace the split; tiles run at equal width with `16px` gutters and `20px 16px 16px` internal padding (count 5). ## Elevation & Depth Trello commits to **hairline + surface contrast** for elevation, never drop shadows. Cards on the white canvas use a 1px `#dfe1e6` border to lift off; cards on the `#f4f5f7` neutral pane use no border, letting the surface contrast carry the lift. The deep navy ink (`#091e42`) shows up 9 times as a `shadow` color in the extraction, but those are box-shadow overlays on form-input focus states, not floating card surfaces. The Atlaskit token sheet ships `--ds-shadow-overlay` and `--ds-shadow-raised` properties for product UI, but the Trello marketing surface does not import or apply them above the fold. Elevation is binary: hairline-bordered card on canvas, or borderless card on the neutral surface. The single dark-blue band (`#0065ff`) functions as a third elevation tier — full-bleed color that anchors the "From message to action" section and reverses contrast against white floating mockup cards inside it. ## Shapes A four-tier radius language gated by component role: `0px` (rectangle) on the primary CTA, secondary CTA, navigation, and hero band; `4.8px` (the dominant input radius, 13 occurrences) on form fields and search inputs; `8px` (count 8) on feature cards, list cards, and inset content tiles; `50%` on avatars and brand-logo circles. A small register at `4px` (count 6) covers chip badges and inline status tags. The `0px → 4.8px → 8px → 50%` ladder gates radius by interaction class. Interactive primary surfaces (CTA, nav, sections) sit at the flat-edged bottom rung. Engineered-control surfaces (inputs, search) sit at `4.8px` — a fractional pixel that reads as soft but engineered. Content cards step up to `8px` for the rounded-rect register, and circular shapes are reserved for human-figure objects (avatars, brand marks). Trello deliberately avoids the mid-range `12-20px` register that Notion uses for its feature cards — the gap between `8px` and `50%` signals which components contain content and which contain identity. ## Components - **`button-primary`** — brand-blue (`#0065ff`) fill, white text, Charlie Text 19.2px weight 400, `0px` radius, padding `8px 24px`, height `60px`. The signature square CTA — one per fold. - **`button-primary-hover`** — same geometry, fill shifts to `#0747a6` (the deep-blue pressed value). - **`button-secondary`** — white fill, navy ink text, 1px `#dfe1e6` hairline border, same `0px` radius — pairs alongside primary as the muted alternative. - **`button-on-dark`** — white rectangle with navy ink text, used on the `#0065ff` band. - **`top-nav`** — white canvas, navy ink text, Charlie Text 16px, `60px` height with `0 16px` horizontal padding. - **`nav-link`** — flat 44px height, no border, ink at default and `#0052cc` on hover. - **`hero-heading`** — Charlie Display 48px weight 500 line-height `60px`, no padding, sits left-aligned at `538px` width. - **`section-heading-dark`** — Charlie Display 36px weight 500 white text on the `#0065ff` band. - **`text-input`** — white canvas, true-black text, 1px `#dfe1e6` border, `4.8px` radius, padding `11.2px 12px 12.8px`, height `50px`. - **`text-input-focused`** — border switches to 2px `#0065ff` — the only place the brand CTA blue appears outside of a button. - **`feature-card`** — white canvas, 1px `#dfe1e6` hairline, `8px` radius, `20px 16px 16px` padding — the workhorse content tile. - **`feature-card-tint-selected`** — pale-blue (`#deebff`) fill, navy ink text — represents the "selected" state on list cards inside the Boards mockup. - **`feature-card-tint-purple`** — accent-purple (`#8777d9`) fill, white text — reserved for the single Planner-mockup tile in the feature grid. - **`band-dark-blue`** — `#0065ff` fill, white text, `40px 32px` padding — the "From message to action" section anchor. - **`band-neutral`** — `#f4f5f7` fill, navy ink text — the "About Us" content frame. - **`chip-status`** — pale-blue (`#deebff`) fill, legacy-blue (`#0052cc`) text, pill-shape via `4px` radius — the "On Demand Now Available" announcement chip. - **`list-card`** — neutral-surface fill, `8px` radius, `16px 16px 16px 24px` asymmetric padding — the kanban list-card mockup inside the Boards illustration. - **`avatar`** — neutral-surface fill, 32px circle (`50%` radius) — user-figure objects only. - **`divider`** — 1px hairline at `#dfe1e6` — section breaks above the footer. - **`footer`** — white canvas, navy ink text, Charlie Text 12px caption sizing, `32px 32px` padding. ## Do's and Don'ts **Do** use `#0065ff` (`{colors.brand-cta}`) exclusively for the primary CTA, the section-anchor band, and the focused-input border. The hex shows up as a background 4 times and as a border 5 times in the page — never as a text color. If you reach for it as link text, you've crossed into legacy-blue (`#0052cc`) territory instead. **Do** stack hierarchy through size, not weight. Display drops 48 → 36 → 24 → 20 with weight 500 at every tier and weight 400 by body. Add a weight 600 or 700 inside the hero hierarchy and the page reads as a fintech marketing one-pager, not a kanban workspace surface. **Don't** round the primary CTA. The `0px` radius is the brand's load-bearing geometric decision — every Trello card on the live product is a flat-edged document, and the marketing CTA inherits the silhouette. Switching to `{rounded.md}` (`8px`) or `{rounded.sm}` (`4.8px`) collapses the gate that separates Trello from the rest of the Atlassian portfolio. **Don't** use `#0052cc` for the primary CTA fill. The legacy Trello Blue is a text and border color (14 text occurrences, 11 border) bound to link semantics — using it as a button background reads as a downgrade to pre-refresh chrome. Reserve it for inline links, anchored copy, and underlined navigation. **Don't** mix the mockup accent palette (`#8777d9`, `#00c7e5`, `#deebff`) with the brand-blue voltage in the same marketing component. The accent hexes live inside Inbox-Boards-Planner UI illustrations only — pulling them into section chrome breaks the semantic gate Trello maintains between product mockup atmosphere and marketing surface. **Don't** swap Charlie Display for Charlie Text on the hero h1. Charlie Display at 48px weight 500 holds a tight `60px` line-height (1.25 ratio); Charlie Text at the same size opens the leading and breaks the engineered density of "Capture, organize, and tackle your to-dos from anywhere." ## Known Gaps - **Dark-mode tokens** — the Trello product app ships a dark theme, but the marketing surface stays light. This DESIGN.md captures the marketing track only. - **Motion and animation timings** — Trello uses entrance animations on the mobile-mockup illustration and the dark-band reveal; durations and easings are not exposed via the Atlaskit `--ds-*` properties on `:root`. - **Charlie Display and Charlie Text are Atlassian-licensed** — Inter at weight 500/400 is the closest open substitute. The `--bxp-charlie-display-font-family` and `--bxp-charlie-text-font-family` variables resolve through the BXP (Brand Experience Platform) Atlassian shared stylesheet. - **The 86 `--color-*-rgb` variables include the full Atlaskit ramp** (N0-N900, B50-B500, R50-R500, G50-G500, M50-M500, O50-O500, P50-P500, T50-T500, Y50-Y500) — most don't paint pixels above the fold but ship to `:root` because the page imports the full token sheet. - **The `--color-trelloblue-rgb` legacy value (0,121,191)** is resolved on `:root` for backwards compatibility but no element in the captured DOM resolves through it — the older Trello product-blue is no longer load-bearing on the marketing surface.