designesy
Score a site

Sibling contract

Drift

AI-generated UI can drift off the tokens a site declares. This contract names four drift modes and defines the checks that detect drift deterministically from compiled CSS rather than prose advice.

Version 0.1.1 · provisional · machine export

View as Markdown

Source authority

Scale of the problem
~160 visual issues per AI-generated app
OverlayQA · Jason Arbon, 1000+ checks
Primary source
Designesy design intelligence research 2026-08-01

The four drift modes

01 token fabrication var() references to custom properties not declared in :root: the model invents token names that look real but have no definition d02 · d11 · d12
02 within session drift Same semantic value (spacing, color, radius) uses different raw values across pages within a single build session d04 · d05 · d06 · d07 · d08 · d09 on the fetched URL only
03 between session amnesia Values established in a previous session are not reused: the model re-derives from scratch and produces a different result No check needs historical snapshots
04 silent breaking changes Token values changed without version bump: downstream consumers inherit the change without notice No check needs version tracking

Conformance

Detection method

Fetch the URL HTML + all linked CSS. Extract :root custom property declarations and all var() references. Compare declared tokens against referenced tokens. Measure value variance across declarations for spacing, color, radius, shadow, and timing.

Verification

12 checks. PASS=1, WARN=0.5, FAIL=0. Score = (points/12) × 100. A≥90, B≥80, C≥70, D≥60, F<60.

01 d01 · Token registry declared: :root has ≥5 custom properties Pass Token registry found with N custom properties Fail No :root custom property declarations detected (the site has no token system)
02 d02 · No fabricated tokens: all var() references resolve to :root declarations Pass All var() references resolve Warn 1-2 undeclared references (may be third-party or fallback chains) Fail N var() references to undeclared custom properties (token fabrication detected)
03 d03 · Inline color values minimized: raw hex/rgb replaced by token references Pass ≤5 inline color values found (N color tokens available) Warn 6-20 inline color values (partial token adoption) Fail >20 inline color values (color system bypassed)
04 d04 · Spacing values cluster on a scale: padding/margin values follow a system Pass Spacing values cluster on ≤6 distinct steps Warn 7-15 distinct spacing values (loose scale) Fail >15 distinct spacing values (no spacing scale)
05 d05 · Color values consistent: same semantic role uses the same value Pass Color values consistent across declarations Warn 2-3 variants of a semantic color detected Fail Same semantic color used with N different raw values (color drift)
06 d06 · Font-family consistent: single font stack or documented system Pass ≤2 distinct font-family stacks Warn 3-4 distinct font-family stacks Fail >4 distinct font-family stacks (typography drift)
07 d07 · Border-radius values cluster: consistent radii or documented scale Pass Border-radius values cluster on ≤4 distinct radii Warn 5-8 distinct border-radius values Fail >8 distinct border-radius values (radius drift)
08 d08 · Shadow values consistent: shadow tokens or inline Pass ≤3 distinct box-shadow values Warn 4-6 distinct box-shadow values Fail >6 distinct box-shadow values (shadow drift)
09 d09 · Transition duration/easing consistent: motion tokens or scattered Pass Transition durations cluster on ≤4 distinct values Warn 5-8 distinct transition durations Fail >8 distinct transition durations (motion drift)
10 d10 · Z-index values within a sane range: no chaos Pass All z-index values within 0-100 Warn Z-index values reach 50-100 Fail Z-index values exceed 100 or scatter across >10 levels (stacking chaos)
11 d11 · Undeclared custom property ratio: % of var() calls with no :root definition Pass <5% undeclared var() references Warn 5-20% undeclared (moderate fabrication) Fail >20% undeclared (widespread token fabrication)
12 d12 · Token alias chains resolve: var(--x, var(--y)) chains don't dangle Pass All alias chains resolve to a declared value Warn 1-2 dangling alias chains Fail N alias chains reference undeclared tokens (dangling references)

Validation

Designesy drift engine: CSS extraction + var() reference analysis. Method: Fetch HTML + linked CSS, extract :root declarations and var() calls, compute variance. Browser-only checks: None: all 12 checks are static CSS/HTML analysis, no browser needed.

Open questions

Run it

Score any URL for drift:

Drift radar →API endpoint
The drift contract scores AI-generated UI drift deterministically: 12 checks against compiled CSS. Machine export.