Color tokens that fall apart at 60% opacity

I kept seeing teammates pick a hex from our Figma library and paste it into code without checking how it handled on tinted backgrounds. Last month we shipped a dashboard where the success green turned muddy on a light gray card, and everyone blamed the monitor. Turns out our tokens didn't define any opacity steps, only solid values, so developers improvised with 60% alpha and it broke the contrast ratio. I added a tiny table in our docs showing each token at 40, 60, and 80 percent, and it's already cut three Slack questions this week. Has anyone else run into token opacity being the silent killer in their system?

1 comments

1 Comment

lucas9724d agoMost Upvoted

Wait, have you ever tested your tokens on actual gray backgrounds before shipping, because I used to think the solid hex was all we needed and devs would just figure it out, but after one brutal client demo where our blue turned into this weird purple haze on a light card, I did a complete 180 on this. That little opacity table idea is honestly genius because it forces everyone to stop guessing, and I bet you’re already seeing fewer “why does this look off” tickets. I’d even suggest adding a tiny note about what background each tint looks good on, since 60% on white is totally different than 60% on a slate gray. Our team ended up baking those steps right into the token names like green-40, green-60, so nobody has to do math in their head mid-handoff. It’s wild how such a small piece of documentation can kill so many silent problems before they hit production.