It happened again last Wednesday. I was looking at a pull request for a new user settings modal. The UI was gorgeous. The React code was incredibly clean. Then I opened the stylesheet. Right there on line 42 was the culprit.

.modal-background { background-color : #f3f4f6 ; border : 1px solid #e5e7eb ; font-size : 14px ; }

Enter fullscreen mode

Exit fullscreen mode

I immediately requested changes. My feedback was just three words. Use the tokens.

This might sound incredibly pedantic. You might think I'm just being a difficult reviewer. But hardcoding hex values and raw pixels in modern web development is a fundamental mistake. It's technical debt disguised as a quick fix. We need to stop doing it entirely.

The copy paste trap

I understand exactly why this happens. You're building a complex feature under a very tight deadline. You open the design file to check the specifications. You click on a primary button component.…