DS LoopBring your screens
into the same system.
Compare an analytics dashboard, project form, launch board, and creative review workspace. See how shared foundations improve each without making them all the same.
What we changed
Each before-and-after pair keeps the same product task. Shared foundations improve layout, controls, and labels while leaving room for differences between screens.
| Area | Independent implementations | Shared foundation |
|---|---|---|
| Page structure | Competing page spacing, headings, and control density. | Shared spacing and type scales, with a composition suited to each task. |
| Controls | Feature-specific colors, button shapes, search, and filter treatments. | A common action style and matching control conventions. |
| Repeated data | Dense chart labels, form fields, planning cards, and review notes. | Clear data hierarchy, field grouping, card structure, and discussion rhythm. |
| Status language | Status treatments compete with content and vary between product areas. | Shared labels and appearances for equivalent states. |
| Product differences | Analytics needs a chart; project creation needs a form; planning needs a board; review needs a canvas. | Each screen keeps its purpose and composition while sharing the underlying conventions. |
Using Design System Loop for this work
DS Loop helps your coding agent investigate the existing screens, propose shared patterns, and carry out the work your team approves. Local checks provide code evidence; your team and agent decide what to change and what to keep.
Your team and agent need to inspect the layout, content hierarchy, and status terminology. These require design judgment beyond the engine’s code checks.
For a reproducible code-level example with actual audit output, browser checks, and a saved decision, read the completed theme repair.
Inspect the illustrative independent implementations, shared foundation, and specimen CSS.
Compare patterns in your codebase
The guide includes prompts for building a usable foundation, improving shared patterns, and reviewing contributions.