Stop Hardcoding Hex #d9d9d9 In Your CSS

If you open any massive legacy codebase or inspect a fresh Figma handoff, you will probably see one hex code repeating everywhere: #d9d9d9.

It’s the ultimate default. Developers use it for disabled buttons, subtle borders, card backgrounds, and dividers. But treating this specific light gray as a "safe" neutral is causing massive UI bugs in your production apps right now.

Here is why you need to stop hardcoding #d9d9d9 and how to handle it properly.

1. The Dark Mode Theme Breaker

****

The most common mistake junior developers make is hardcoding border: 1px solid #d9d9d9; directly into their component CSS.

When your app switches to dark mode, that 85% lightness gray becomes a glaring, dominant bright line that ruins the dark UI ergonomics.

The Fix: Never hardcode this hex. Always map it to a semantic CSS variable or a design token.

CSS

`/* ❌ Bad Practice */

.card { border: 1px solid #d9d9d9; }

/* ✅ Good Practice /

:root {

--color-border-subtle: #d9d9d9;

}

]``