I saw what you did there. The padding between form fields is 24 pixels. Please remove 8 pixels from that gap. Make sure to use the components provided.

Chief of Pixel Police

Well… yeah… it’s your fault. Components are ready-built — why can’t you just use it with all its pre-built goodnes. Why take matters into your own hands and decide 24 pixels here and 32 pixels there. Don’t ever do that next time. If you do, make sure to just move 1 pixel at a time to avoid detection. My brain whispered to me.

Beware the Pixel Police

Can sarcasm be used for fun? Sure can! Actually, I don’t have any beef in using components, no matter how they scream for adjustments. But, hey, we are designers. We design — that’s what we do. We take, we break, and make it new again, in a different light. Better, I hope.

Riding on CSS

And this post is really about answering the question, “Can I really design in my browser?” Because I was thinking of using Figma in creating the visual design of the warning “Beware the Pixel Police”. But Figma also uses CSS, so I thought I’d just go straight up using CSS.

Get the style

• Background image via Unsplash Source (it changes every page load)
• Fluid typography via CSS clamp() function
• Fonts via Google: Permanent Marker and Montserrat
• 1:1 (square) ratio of the canvas via RatioBuddy

You may check out the HTML and CSS in CodePen:

See the Pen Beware the Pixel Police by Brian Dys Sahagun (@briandys) on CodePen.