# Designesy — /contracts/compare Canonical page: https://www.designesy.org/contracts/compare --- ## Compare Compare is the diff engine: fetch two URLs, extract their :root token systems, and produce a structured diff. "What actually changed between our old token system and the new one?" — answered deterministically from live production URLs, not from file uploads. Also serves as the diff engine inside /monitor (m08 token-set mutation). Version 0.1.0 · provisional · [machine export](/contracts/compare.json) ## Source authority Designesy design intelligence research 2026-08-02 Adobe token-diff-generator v2.5.3 — detects added/deleted/renamed/deprecated/updated across schema versions Tokens Studio diff + codemod — upload two token files, get a diff + ast-grep migration designlang diff_designs MCP tool — compares two DESIGN.md brand slugs at the color-token level No competitor fetches two live URLs, extracts their token contracts, and diffs the contracts — the designesy pattern ## Diff method Fetch both URLs, extract all CSS + :root custom properties from each. Parse token names and values. Compare the two token maps: tokens present in A but not B (added), present in B but not A (removed), present in both with different values (value-changed). Heuristic rename detection: tokens with similar names (Levenshtein distance ≤ 2) and different values are flagged as potential renames. Scale analysis: compare the distinct value sets for spacing, radius, and color to detect scale-stop changes. Optionally run /score on both URLs to compute a score delta. ## Diff dimensions ## Verification 8 checks — 8 checks. PASS=1, WARN=0.5, FAIL=0. Score = (points/8) × 100. A≥90, B≥80, C≥70, D≥60, F<60. Note: the compare score reflects diff completeness (did the engine produce a full diff), not design quality — design quality is the /score surface. The diff result itself is the product; the score is secondary. Validation: Designesy compare engine — dual-URL fetch + token extraction + set diff + scale analysis. Method: Fetch both URLs, extract :root tokens, compute set diff (added/removed/renamed/value-changed), compare scales, run /score on both for score delta. Browser-only checks: None — all checks are static CSS analysis + set operations, no browser needed. ## Open questions - Rename detection (c04) is heuristic — Levenshtein distance ≤ 2 may produce false positives for short token names - Contrast drift (c07) uses WCAG contrast ratio against a fixed reference background — teams with multiple themes need per-theme comparison - Score delta (c08) runs /score on both URLs, which doubles the fetch time — caching is essential - The diff does not detect semantic drift — same value but different role (e.g. --primary changed from blue to red but the role is still "primary") - Cross-origin token comparison may surface third-party CSS tokens (analytics, embeds) as part of the diff — a suppression list may be needed ## Run it Compare two URLs to see how their design systems differ: