Mobile vs desktop token consistency
Overview
Responsive coherence breaks quietly: type stops scaling, spacing rhythm shifts, touch targets shrink. Extract both viewports and flag every inconsistency between them.
A design system is supposed to hold together across viewports, but mobile and desktop drift apart: the type scale stops being proportional, the spacing rhythm changes, navigation colors differ, buttons fall below comfortable touch-target size. Extract the page twice, once at the default desktop viewport and once with --mobile, then compare. An agent flags inconsistencies in typography scaling, spacing rhythm, touch targets, and color usage, and recommends fixes for responsive coherence.
Desktop (default viewport)
Mobile viewport
A list of responsive inconsistencies between mobile and desktop, with recommended fixes for coherence.
More in Audit & Compliance
Browse all
All recipes →
Continue reading
Getting started
Install Dembrandt and turn any public website into a complete set of design tokens in under 2 minutes. All you need is Node.js and a terminal.
MCP
Use Dembrandt as a tool inside Claude Code, Cursor, Windsurf, or any MCP-compatible editor. Your agent extracts live design tokens automatically when you ask.
Skills
30 UX and design system skills for AI agents. Install once, your agent designs with hierarchy, WCAG standards, and brand accuracy. The UX knowledge that normally costs senior consultant days.