---
version: alpha
name: Trello
description: Kanban-native productivity tool in the Atlassian family — deep navy canvas tone, a bright action blue CTA, Charlie Display headings over Charlie Text body, small 4.8px radius throughout, and brand-navy-tinted shadows that give every card a deliberate, grounded lift.

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#ffffff"
  surface-muted: "#f4f5f7"      # quiet gray panel fill (Atlassian ds-background-neutral)

  # Ink / text — Atlassian navy scale
  ink: "#091e42"                # deep Atlassian navy — 460 uses — primary headings + body
  ink-secondary: "#172b4d"      # mid-navy — nav labels, secondary text (31 uses)
  ink-muted: "#505f79"          # muted navy-gray supporting copy /* estimated from Atlassian token ds-text-subtle */
  on-dark: "#ffffff"            # white text on colored surfaces

  # Brand accent — action blue
  primary: "#0065ff"            # bright action blue — CTA buttons, interactive fills (9 uses)
  primary-hover: "#0747a6"      # pressed / active blue — hover state from live motion data
  on-primary: "#ffffff"         # white text on action blue

  # Secondary action — navy-outline style
  secondary: "#ffffff"          # white fill for secondary/ghost buttons
  secondary-border: "#0065ff"   # blue outline on secondary button (detected on "Browse Integrations")
  on-secondary: "#0052cc"       # deep blue text on white secondary button

  # Text link blue
  link: "#0052cc"               # link + visited blue — 33 uses

  # Atlassian category / label palette (from border data)
  label-yellow: "#ffab00"       # Trello yellow label — warning / sunshine (7 uses as border)
  label-purple: "#6554c0"       # Trello purple label — 6 uses as border
  label-green: "#32ae88"        # Trello green label — 1 use
  label-blue: "#0065ff"         # reuses primary blue for blue labels

  # Semantic
  error: "#de350b"              # destructive actions /* estimated from Atlassian token ds-icon-danger */
  success: "#00875a"            # success / done /* estimated from Atlassian token ds-icon-success */

  # Borders
  border: "#dfe1e6"             # hairline card and panel border (detected on inputs)
  border-strong: "#c1c1c1"      # stronger outline (textarea border)

  # Shadow tints — brand-navy tinted (opaque approximations)
  shadow-soft: "#c8d0de"        # was rgba(9,30,66,0.15) — Google format requires hex
  shadow-near: "#bac3d4"        # was rgba(9,30,66,0.20) — Google format requires hex
  shadow-strong: "#a9b4c9"      # was rgba(9,30,66,0.31) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Charlie Display, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0px
  display:
    fontFamily: "Charlie Display, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
  heading-section:
    fontFamily: "Charlie Display, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Charlie Display, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0px
  body-large:
    fontFamily: "Charlie Text, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body:
    fontFamily: "Charlie Text, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body-small:
    fontFamily: "Charlie Text, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Charlie Text, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: 0.16px
  label-ui:
    fontFamily: "Charlie Text, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.50
    letterSpacing: 0px
  caption:
    fontFamily: "Charlie Text, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 80px

rounded:
  none: 0px
  xs: 2px
  sm: 5px            # actual measured 4.8px — rounded to 5px for token clarity
  md: 8px
  pill: 9999px

components:
  # Primary CTA — action blue
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 11px 16px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  # Secondary / ghost — blue outline on white
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.on-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.sm}"
    padding: 11px 16px
    border: "1px solid {colors.secondary-border}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.on-secondary}"

  # Subtle nav button — dark navy text, no outline
  button-nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 8px 12px
  button-nav-hover:
    textColor: "{colors.primary}"

  # Kanban card — the signature Trello unit
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 12px
  card-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  # Feature / marketing card
  card-marketing:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 24px

  # Text input / email capture
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 11px 12px
    border: "1px solid {colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.primary}"

  # Card label chip — the colored label strips on Trello cards
  badge:
    backgroundColor: "{colors.surface-muted}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.xs}"
    padding: 2px 6px

  # Navigation bar
  nav-bar:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 8px 16px

  # Popover / dropdown
  popover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    padding: 16px

  # Link style
  link:
    textColor: "{colors.link}"
    typography: "{typography.body-small}"
    padding: 0px
  link-hover:
    textColor: "{colors.primary-hover}"
---

# Trello Design System

## Overview

Trello arrives on screen with an unmistakable personality: the page is white but the navigation bar is Trello navy — a near-midnight `{colors.ink}` (`#091e42`) that grounds every session. This two-toned canvas strategy (bright white content area inside a dark global chrome) has been Trello's signature since before the Atlassian acquisition, and the design system keeps it intact as the primary spatial anchor. One action blue (`{colors.primary}`) punches through for CTAs; everything else — nav labels, secondary links, supporting text — descends the Atlassian navy scale from `{colors.ink}` through `{colors.ink-secondary}` and `{colors.ink-muted}`, all variations of the same deep corporate family.

Charlie Display leads the editorial hierarchy at 500 weight across headings — a wide-spacing, confident stroke from Atlassian's own type family — while Charlie Text handles all body copy in regular and semibold. The pairing is cohesive without being monotonous: Display has slightly more optical personality at large sizes, Text reads with frictionless clarity at reading scale. Button labels use Charlie Text at 600 weight with a subtle 0.16px letter-spread, adding a small "print" quality to interactive labels. No decorative type, no serif moments — the system is entirely neo-grotesk, communicating reliability over expression.

The geometric vocabulary is precise but soft. Border radius lands consistently at a measured 4.8px (tokenized here as `{rounded.sm}`) on buttons and inputs — tight enough to feel organized, just shy of pill to stay friendly. Cards use 8px (`{rounded.md}`), which is Trello's Kanban-card DNA: an eight-pixel corner reads as the single most recognizable shape in collaborative work software. Shadows carry the brand's own navy tint — `rgba(9,30,66,0.15)` — so even elevated surfaces feel categorically "Trello blue" rather than generic gray. The overall impression is calm, purposeful, and familiar: the organizational clarity of a physical kanban board rendered in a system that scales to thousands of cards.

**Key Characteristics:**
- Deep Atlassian navy (`{colors.ink}`) as the global navigation background — white content inside a dark frame
- Single action blue (`{colors.primary}`) reserved for primary CTAs and interactive highlights
- Charlie Display (500 weight) for headings + Charlie Text (400/600) for body — Atlassian's custom type pair
- Measured `{rounded.sm}` (4.8px) on buttons and inputs, `{rounded.md}` (8px) on Kanban cards
- Brand-navy-tinted shadows — elevation reads "Trello blue," never generic gray
- A structured label palette (yellow, purple, green, blue) for Kanban card categorization
- `8px` base spacing unit with 16px as the dominant interface rhythm (193 uses in the scan)
- Flat hairline borders (`{colors.border}`) on cards and inputs — precise, never heavy
- Motion at 0.25–0.3s `ease` — measured transitions on buttons and links, never flashy
- All typography at 0 letter-spacing except button labels (0.16px spread)

## Colors

### Surface & Canvas
- **White** (`{colors.background}` / `{colors.surface}`): The full content area — board view, marketing sections, card faces.
- **Quiet Gray** (`{colors.surface-muted}`): Panel fills, hover states on secondary buttons and list column backgrounds.

### Brand Navy Scale
- **Trello Navy** (`{colors.ink}`): The deepest brand tone — global nav background and primary headings (460 uses). Sets the grounded, professional register.
- **Mid-Navy** (`{colors.ink-secondary}`): Navigation labels and secondary headings. Slightly lighter than the deep ink for readable text on white.
- **Navy-Gray** (`{colors.ink-muted}`): Supporting copy, captions, muted metadata.

### Brand Accent
- **Action Blue** (`{colors.primary}`): The one "go" color — "Sign up – it's free!", CTAs, interactive selection states.
- **Active Blue** (`{colors.primary-hover}`): Deepens on hover and press for the primary button.
- **Link Blue** (`{colors.link}`): Slightly deeper blue for text links and bordered secondary buttons — visually distinct from the action blue at a glance.

### Kanban Label Palette
- **Yellow** (`{colors.label-yellow}`): The warmth label — highest contrast for urgent or flagged cards.
- **Purple** (`{colors.label-purple}`): Product, design, or creative category tagging.
- **Green** (`{colors.label-green}`): Done, approved, or success labels.
- **Blue** (`{colors.label-blue}`): Reuses the primary action blue for the blue label category.

### Semantic
- **Error** (`{colors.error}`): Destructive actions — delete card, remove member.
- **Success** (`{colors.success}`): Completion states — green checkmarks, done lists.

### Borders & Shadows
- **Hairline** (`{colors.border}`): Standard card and input borders — `#dfe1e6`, light and unobtrusive.
- **Strong Border** (`{colors.border-strong}`): Textarea and heavier outline contexts.
- **Shadow Soft** (`{colors.shadow-soft}`): Opaque stand-in for `rgba(9,30,66,0.15)` — used for the inset card scroll shadow and floating cards.
- **Shadow Near** (`{colors.shadow-near}`): `rgba(9,30,66,0.20)` equivalent — standard card elevation.
- **Shadow Strong** (`{colors.shadow-strong}`): `rgba(9,30,66,0.31)` equivalent — combined with near shadow for modal-weight elevation.

## Typography

### Font Family
- **Display**: `Charlie Display` — Atlassian's custom display face, weight 500. Slightly wider aperture and personality than Charlie Text; used for marketing headings and hero moments.
- **Text**: `Charlie Text` — Atlassian's custom UI text face, weights 400 (regular), 600 (semibold). All body, navigation, buttons, and captions.
- **Fallback stack**: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`.
- Self-hosted as `.woff2`: `Charlie_Text-Regular`, `Charlie_Text-Bold`, `Charlie_Display-Semibold`, `Charlie_Display-Bold`.

### Hierarchy

The full type scale lives in the `typography:` token block above. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 48px / 500 Charlie Display — marketing hero headline |
| `display` | 36px / 500 Charlie Display — section headlines |
| `heading-section` | 24px / 500 Charlie Display — feature and card group headings |
| `heading-sub` | 20px / 500 Charlie Display — sub-section labels |
| `body-large` | 24px / 400 Charlie Text — lead marketing paragraphs |
| `body` | 20px / 400 Charlie Text — standard body |
| `body-small` | 16px / 400 Charlie Text — UI text, nav labels, inputs |
| `button-ui` | 16px / 600 Charlie Text + 0.16px spacing — button labels |
| `label-ui` | 14px / 600 Charlie Text — form labels, card metadata |
| `caption` | 12px / 400 Charlie Text — badges, timestamps, card labels |

### Principles
- **Display / Text split**: Charlie Display only at heading scale; Charlie Text everywhere else. The distinction is optical, not dramatic.
- **Weight discipline**: 400 for reading, 600 for action. Nothing goes to 700+ in the Trello marketing register.
- **Zero negative tracking**: headings sit at 0px letter-spacing — confident without the tight-squeeze affectation of tech display type.
- **Button label spread**: 0.16px on button labels adds a subtle "printed" quality that distinguishes interactive copy from body text.
- **All caps avoided**: uppercase appears only in rare section labels — not a system-wide pattern.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. The dominant measured value is 16px — 193 occurrences in the scan — which is the heartbeat of Trello's interface density. Kanban board density is intentional: cards are compact, columns are close together, but every edge has its 8px breath.

### Grid & Container
- Marketing site: centered content with max ~1280px container; hero pairs left-aligned copy and a product screenshot
- Breakpoints cluster tightly around 768px / 992px / 1200px (the Atlassian standard responsive ladder)
- Board view: horizontal scroll of columns (each ~272px wide), cards stacked vertically inside — the quintessential Trello spatial logic

### Whitespace Philosophy
- **Compact-but-breathing**: Trello is not a generous-whitespace system. Cards are dense, columns are tight. The breathing comes from precise 8px padding inside each card and 16px gutters between columns.
- **Dark nav frames white content**: the hard contrast between `{colors.ink}` nav and white board creates instant spatial orientation without any extra spacing.
- **Section rhythm on marketing site**: 48-80px (`{spacing.2xl}`–`{spacing.3xl}`) between marketing sections — tighter than a typical B2C product, reflecting the tool-first personality.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, hairline `{colors.border}` | Board column backgrounds, most page content |
| Inset (Level 1) | `0px 24px 16px -16px inset` at `{colors.shadow-soft}` | Column scroll shadow — content passing beneath the header |
| Card (Level 2) | `0px 8px 16px 0px` at `{colors.shadow-soft}` | Marketing feature cards, hovering board cards |
| Component (Level 3) | `0px 3px 5px` + `0px 0px 1px` dual-layer at `{colors.shadow-near}` + `{colors.shadow-strong}` | Card popover, quick-edit panel |
| Focus Ring | `0px 0px 0px 3px` brand blue | Focused inputs, interactive controls |

**Shadow Philosophy**: Trello uses brand-navy-tinted shadows throughout. Instead of a generic gray or black shadow, every elevation carries a cool, navy undertone — `rgba(9,30,66,…)` in the source. This is an Atlassian design system signature: the shadow is made of the same deep ink as the navigation, so even floating cards feel categorically "Trello" rather than floating in a neutral void. The inset scroll shadow on columns is particularly distinctive — it signals depth without a secondary container border.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Navigation bar, full-width banners |
| `xs` | 2px | Card label chips, small badge indicators |
| `sm` | 5px | Buttons, text inputs, small interactive controls |
| `md` | 8px | Kanban cards, marketing cards, popovers |
| `pill` | 9999px | Avatar rings, count badges |

The shape vocabulary is deliberately constrained. `{rounded.sm}` (the measured 4.8px, rounded to 5px) is the standard interactive radius — snug but friendly. `{rounded.md}` (8px) is the Kanban card: half a grid unit, the most recognized shape in collaborative task software. No large-radius cards, no pill buttons — the system reads organized and precise, not playful or rounded-tech.

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Action blue (`{colors.primary}`) fill, white text, `{rounded.sm}` radius, 11px top/bottom padding. Hover deepens to `{colors.primary-hover}`. The "Sign up – it's free!" and "Get Trello for free" CTAs.
- **`button-secondary`** — White fill with a 1px action-blue border, blue text (`{colors.on-secondary}`), same radius as primary. "Browse Integrations" uses this pattern. Hover lightens to `{colors.surface-muted}`.
- **`button-nav`** — Transparent background, mid-navy text (`{colors.ink-secondary}`), hovering shifts text to action blue. Used for the horizontal nav items (Features, Solutions, Plans, Resources).

### Cards
- **`card`** — White, 8px radius, 12px padding, hairline border. The Kanban card unit — the single most repeated element in the entire product.
- **`card-marketing`** — Same radius, 24px padding for breathing room on the marketing site feature cards.

### Inputs
- **`input`** — White fill, `{colors.border}` outline, `{rounded.sm}` 5px radius, 11px × 12px padding. Focus swaps border to action blue (`{colors.primary}`) — reinforcing the single interaction color.

### Badges / Labels
- **`badge`** — `{rounded.xs}` (2px) chip in quiet gray — the Kanban label strip. Filled with category colors (`{colors.label-yellow}`, `{colors.label-purple}`, etc.) in product; neutral gray on marketing.

### Navigation
- **`nav-bar`** — `{colors.ink}` fill, white text, full-width, flat. The dark header that frames the entire application and marketing site.

### Popover / Dropdown
- **`popover`** — White, 8px radius, 16px padding, dual-layer navy-tinted shadow. Used for card quick-edit, member picker, label picker.

## Do's and Don'ts

### Do
- Use `{colors.ink}` (`#091e42`) as the nav background — the dark-header / white-content split is Trello's primary spatial signature
- Reserve `{colors.primary}` (action blue) for the single CTA per section — it signals "go" and nothing else should compete
- Apply `{rounded.sm}` (5px) to all buttons and inputs; `{rounded.md}` (8px) to cards and popovers — the two-radius system defines the interface
- Tint all box shadows with the brand navy (`{colors.shadow-soft}` / `{colors.shadow-near}`) — never use a gray or black drop shadow
- Use Charlie Display for marketing headings (500 weight), Charlie Text for everything else
- Keep label chips to `{rounded.xs}` (2px) — the near-flat chip reads as a category color swatch, not a decorative badge
- Set button labels in Charlie Text 600 with 0.16px letter-spacing — the subtle spread lifts interactive text from body copy

### Don't
- Don't round buttons beyond `{rounded.sm}` (5px) — pill buttons are not part of the Trello vocabulary
- Don't introduce a second accent color to compete with action blue for CTA status
- Don't use pure black or warm-gray shadows — the navy tint is deliberate and brand-defining
- Don't use Charlie Display below heading-sub scale — body-size Display conflicts with the Charlie Text reading rhythm
- Don't add large section-level radii (16px+) to content areas — the system reads organized, not expressive
- Don't crowd nav items — the horizontal nav keeps a minimum 12px horizontal padding with color-shift hover, never underline-only
- Don't skip the dark nav for app-within-app views — the `{colors.ink}` header is the universal orientation cue across all of Trello's surfaces

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <400px | Single column; nav collapses; hero type drops to ~28px |
| Mobile | 400–767px | Single column; horizontal Kanban board scrolls; CTA goes full-width |
| Tablet | 768–991px | Two-column marketing grids; board shows 1-2 columns visible |
| Desktop | 992–1279px | Full layout; board shows multiple columns; three-column feature grids |
| Large Desktop | ≥1280px | Max container width; generous section padding |

### Touch Targets
- Primary buttons: `~42px` computed height with 11px padding — comfortable thumb zone
- Card surfaces: full-row tap to open; minimum 44px height cards recommended in app
- Navigation items: 40px+ interactive height in mobile drawer

### Collapsing Strategy
- **Navigation**: horizontal nav → hamburger drawer on mobile; dark header persists across all breakpoints
- **Hero**: copy-left / product-right split → stacked; product screenshot goes full-width
- **Board view**: horizontal column scroll with momentum scrolling on touch; cards maintain 8px padding
- **Feature grids**: 3-column → 2-column → single-column stacked
- **Typography**: 48px hero → ~28px mobile; body type stays at 16-20px across breakpoints

### Image Behavior
- Product screenshots and board mockups scale within their flex container, maintaining aspect ratio
- Marketing illustrations and feature screenshots clip or reduce on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (white content area)
- Nav / global chrome: `{colors.ink}` (deep Atlassian navy `#091e42`)
- Primary text: `{colors.ink}` on white, `{colors.on-dark}` on navy
- Secondary text: `{colors.ink-secondary}`
- Brand CTA: `{colors.primary}` (action blue)
- Border: `{colors.border}`
- Shadow tint: `{colors.shadow-soft}` (navy-tinted, not gray)

### Example Component Prompts

- "Build a Trello-style navigation bar: `{colors.ink}` (`#091e42`) fill, full-width, `{rounded.none}` (flat), white text in Charlie Text 16px. Nav items: mid-navy `{colors.ink-secondary}` at rest, shift to action blue `{colors.primary}` on hover at `0.25s ease-out`. Add a primary button ("Sign up") — action blue fill, white text, `{rounded.sm}` 5px radius, 11px × 16px padding."
- "Create a Trello Kanban card: white fill (`{colors.surface}`), `{rounded.md}` 8px radius, `{colors.border}` 1px hairline, 12px padding. Add a label chip strip at the top — `{rounded.xs}` 2px chips, 2px × 6px padding, filled with the label color. Tile title in Charlie Text 14px `{colors.ink}`. Box shadow: `0 1px 3px {colors.shadow-near}` (navy-tinted)."
- "Design a primary CTA button: `{colors.primary}` (`#0065ff`) fill, white text, Charlie Text 600 / 16px / 0.16px letter-spacing, `{rounded.sm}` 5px radius, `11px 16px` padding. Hover: deepens to `{colors.primary-hover}` (`#0747a6`) at 0.3s ease."
- "Build a secondary ghost button: white fill, 1px solid `{colors.secondary-border}` border, `{colors.on-secondary}` text, `{rounded.sm}` 5px radius, same padding as primary. Hover: `{colors.surface-muted}` fill."
- "Create a feature card for a marketing section: white fill, `{rounded.md}` 8px radius, `{colors.border}` hairline, 24px padding, `0 8px 16px {colors.shadow-soft}` navy-tinted box shadow. Heading in Charlie Display 24px weight 500 `{colors.ink}`; body in Charlie Text 16px 400 `{colors.ink-secondary}`."
- "Design a text input for email capture: white fill, `{colors.border}` 1px border, `{rounded.sm}` 5px radius, `11px 12px` padding, Charlie Text 16px. On focus: swap border to `{colors.primary}` with no box-shadow — clean, single-ring focus indication."

### Iteration Guide

1. Start with the `{colors.ink}` dark nav above a white content area — the spatial contract between the two is Trello's primary orientation cue.
2. Place exactly one `{colors.primary}` action per section — action blue is the single "go" signal. Secondary actions get white + blue outline or quiet gray.
3. Apply `{rounded.sm}` (5px) to buttons and inputs; `{rounded.md}` (8px) to cards. Do not mix in rounder or larger radii.
4. All shadows carry the navy tint — use `{colors.shadow-soft}` (for glow/inset) and `{colors.shadow-near}` (for standard card elevation). Never use a gray drop shadow.
5. Set headings in Charlie Display weight 500; body in Charlie Text 400; labels and buttons in Charlie Text 600.
6. For Kanban label chips: `{rounded.xs}` (2px), `{colors.label-yellow}` / `{colors.label-purple}` / `{colors.label-green}` fills, caption type.
7. Keep spacing at 8px increments; use 16px as the primary interface rhythm for padding and gaps.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Trello. Brand names and trademarks belong to their respective owners.