I want to preface this by saying this isn’t a knock on @BrettFromDJ because I think he does great work, however I’ve been seeing these @jsngr-inspired Cobot-esque buttons all over recently and I think it’s important for designers to understand why certain skeuomorphic lighting techniques look good and others look “almost good” and what the differences are Let’s start with the basics → highlights, gradients, and shadows in software interfaces exist because since the 80s we have been trying to emulate the physical properties of light as if our 2D graphics are popping out of the screen and catching light rays from a source. For decades Apple HIG said we should be emulating a light source 90° straight down but recently that’s been murkier with Liquid Glass but the core idea remains → emulate the physical properties of light and what would happen if it actually was shining on your interface This is why we perceive buttons with a light → dark gradient to be convex and popping off the screen, and buttons with a dark → light gradient to be concave and indented into the screen (pressed or selected) because the 90° light source would cause this in physical reality In @BrettFromDJ’s button below, the button itself has a light → dark gradient on the surface (indicating the presence of a simulated 90° light source) but it also has 2 rim highlights on the top left and top right indicating the presence of 2 additional light sources The challenge here is the TOP edge of the button is not adhering to the simulated light sources that are guiding the rest of the aesthetic → there should be a top edge highlight caused by the 90° global light source but instead the top edge is dark and makes you think that maybe it has a shadow cast over it somehow Compare this button to one from @cobotapp → it also has a light-dark gradient on the surface (adhering to a simulated 90° light source) but the top edge of the button is lit correctly from that simulated source. The button also introduces a secondary light source to cause the pink glow, but you can see how the edges of the button are catching some of that light and making it feel like it’s actually there and affecting the surface When designing highly stylized buttons it’s just as important to know *why* you’re adding light and dark regions as it is knowing *how* to make Figma layers do your bidding x.com/BrettFromDJ/status/198…