diff_designs

Compare two brands — token-level deltas across colors, typography, spacing.

Compare two design systems at the token level. diff_designs returns color additions, removals, and modifications between designs — useful for migration planning, design-system audits, or understanding what changes when you switch from one brand standard to another.

Input schema

{
  from: string  // Source design slug (e.g. "linear")
  to: string    // Target design slug (e.g. "stripe")
}

Both slugs must be valid entries in the catalog. Use list_designs or search_designs to find slugs.

Output

The response is a JSON object with the design slugs and a color diff:

{
  "from": "linear",
  "to": "stripe",
  "colors": {
    "added": {
      "primary-50": "#f8f7ff",
      "accent-700": "#4f46e5"
    },
    "removed": {
      "dark-accent": "#ffffff"
    },
    "modified": {
      "bg-primary": {
        "from": "#08090a",
        "to": "#0a2540"
      },
      "text-primary": {
        "from": "#ffffff",
        "to": "#ffffff"
      }
    }
  }
}
  • added — Colors in to that don’t exist in from. Token names and hex values.
  • removed — Colors in from that don’t exist in to. Token names and hex values.
  • modified — Colors that exist in both, but with different values. Shows from and to for each token.

Example: agent dialogue

User: “What’s different between Stripe and Linear’s design systems?”

Agent calls diff_designs({ from: 'linear', to: 'stripe' })

Agent: “Stripe runs a primary indigo (#635bff) on a near-navy background (#0a2540), while Linear uses a lighter indigo (#5e6ad2) on near-black (#08090a). Stripe also adds mid-tone neutrals at 50/100/200 levels; Linear skips those. Typography would require reading both full files with get_design, but color-wise you’re looking at a warmer, more saturated palette swap.”

When to use

  • Design-system migration — “What changes if we go from Bootstrap to Tailwind?” Call diff_designs, then get_design for each to see typography and spacing.
  • Brand comparison — “How different is Company A’s design from Company B’s?” Quick token audit before diving into full documents.
  • Audit checklist — Identify which tokens have shifted so design review can focus on the modified set.
  • Variant planning — “If we picked colors from Stripe and spacing from Notion, what would that look like?” Diff both, then compare the deltas.
  • get_design — full DESIGN.md for one brand (colors, typography, spacing, components)
  • search_designs — find brands to compare
  • list_designs — see all 300+ brands in the catalog