GFX-301i · Module 3
Design System Maintenance
3 min read
A responsive design system is a living system. New components are added. Existing components gain new responsive behaviors. Breakpoints occasionally shift as content evolves. The maintenance discipline ensures that changes to any part of the system do not break other parts.
Maintenance rules: every new component must include responsive behavior specifications before it is merged. No component ships without being tested at all 5 breakpoints and validated with the automated viewport sweep. Every breakpoint change triggers a full regression test — moving a breakpoint from 768px to 800px affects every component that uses that breakpoint.
The design system changelog tracks responsive changes specifically: "v2.3.1: adjusted tablet breakpoint from 768px to 800px due to CRM sidebar requiring additional width. Impact: all two-column layouts shift 32px wider at the tablet threshold. Regression test: passed, no visual regressions detected." The changelog entry connects the change to the rationale and the verification — any future question about "why is the tablet breakpoint at 800px instead of 768px" is answered immediately.
Monthly responsive health audit: review the most-visited pages at all breakpoints. Check for: newly broken layouts (caused by content changes that exceeded component boundaries), performance regressions (larger images served to mobile), and accessibility regressions (touch targets that shrunk below 44px minimum). The audit is the immune system that catches responsive drift before users report it.