{
  "id": 5842771,
  "title": "I audited 20 design systems for spacing drift. Here is what your team can use from it.",
  "url": "https://urgent.news/2026/09/05/i-audited-20-design-systems-for-spacing-drift-here-is-what-your-team",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-09-05T21:14:57.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/petrilahdelma/i-audited-20-design-systems-for-spacing-drift-here-is-what-your-team-can-use-from-it-3ac7"
  },
  "original_language": "en",
  "account": "A reporter examined 20 design systems for spacing inconsistencies. The audit revealed that teams often choose arbitrary pixel values for spacing, such as 13px, without a proper scaling system. Six months later, these values become scattered, with over 500 off-scale findings in a single design system.\n\nRhythmguard, a Stylelint plugin, was applied to these 20 repositories to analyze spacing drift. The results showed that most of the drift can be attributed to three specific values: 10px, 15px, and 5px. These values accounted for two-thirds of the total drift in the sample.\n\nThe audit also found that some values are defined as custom properties in the design system's tokens, while others are derived from function calls in Sass or configured variables in CSS frameworks like Bootstrap, USWDS, Carbon, and Lightning. This means that while the design system may have a spacing scale defined, it may not be consistently applied across all components.\n\nThe audit also discovered that certain CSS properties, such as transform, margin-inline-start, outline-offset, and translateY, often appear with single-pixel offsets, which are reported as off-scale. However, these are not necessarily design mistakes but rather visual artifacts that can be ignored.\n\nBased on these findings, the reporter recommends focusing on fixing the top three off-scale values to significantly reduce spacing drift. Additionally, the audit highlights the importance of using a consistent spacing scale within a design system and checking which scale is being used before celebrating a \"clean\" report. Finally, the reporter suggests temporarily disabling certain rules in Rhythmguard to avoid false positives and maintain a balanced approach to spacing consistency.",
  "summary": "Nobody on your team chose 13px. Someone pasted it. Someone nudged 12px until a border lined up. A coding agent produced it because nothing told it your scale stops at 12 and 16. .card { padding : 13px ; /* off-scale: nearest are 12px or 16px */ margin-bottom : 7px ; /* off-scale: nearest are 4px or 8px */ } Six months later git grep finds forty distinct spacing values, and the design system's…",
  "key_points": [
    "20 design systems examined for spacing inconsistencies",
    "Rhythmguard identified 10px, 15px, and 5px as key contributors to drift",
    "Focus on fixing top three off-scale values to reduce spacing drift"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}