Play Design systems
Spot the drift.
Compare a design system component with its production copy and find what changed.
Round 1 of 3. Alert: the production copy has drifted from the design system in three ways. Which three?
Compare the specs in text
| Property | Design system | In production |
|---|---|---|
| Padding | 16px | 12px |
| Corner radius | Square corners | 6px rounded corners |
| Border color | Light grey | Light grey |
| Text weight | Semibold title | Semibold title |
| Icon size | 20px | 16px |
| Text color | Muted ink | Muted ink |
Small changes like these usually come from a copy-pasted component that was tweaked locally. Each one is minor, but together they make the product feel slightly off.
Round 2 of 3. Button: the production copy has drifted from the design system in three ways. Which three?
Compare the specs in text
| Property | Design system | In production |
|---|---|---|
| Padding | 12px by 20px | 12px by 20px |
| Corner radius | Square corners | Square corners |
| Text weight | Semibold | Regular |
| Space between icon and text | 12px | 4px |
| Letter spacing | Normal | Wide |
| Border color | Accent | Accent |
Type drift is the hardest to notice side by side and the easiest to feel across a whole page. Tokens for weight and spacing keep every copy of a button in step.
Round 3 of 3. Text field: the production copy has drifted from the design system in three ways. Which three?
Compare the specs in text
| Property | Design system | In production |
|---|---|---|
| Border color | Dark grey | Light grey |
| Text color | Ink label | Muted ink label |
| Padding | 10px | 10px |
| Corner radius | Square corners | Square corners |
| Text weight | Semibold label | Semibold label |
| Space between icon and text | 8px between label and field | 2px between label and field |
A fainter label is harder to read, and a squeezed gap makes a label look like it belongs to the field above. Drift is not only about consistency; it can make a form harder to use.
Drift is cheap to prevent and expensive to find later. Shared tokens and components keep every copy in step.