Here's some detail around how the new @trycampsite switch component was crafted and built. Will share some of the shadow/lighting detail as well as a little code used for the toggle animation: This 2x zoom better exposes the smaller highlights as well as the finer contrast shadows that create more environmental detail. White highlights on white backgrounds are difficult to show, but there are some little tricks you can use to make them visible. I'll call some out next:

A 🧵 on how to implement beautiful shadow borders:

Yesterday, @jamesm called out our @trycampsite UI bits and how we utilize box shadows as borders to get better border contrast on elements with shadows. Lets talk about how we actually implement this and work around the gotchas: To recap - use a 1px slightly transparent box shadow as a border instead of a traditional css border on elements with shadows to get a gradient border on the element for free. The box shadow blends with the element's shadow as it gets darker towards the bottom. Why not borders?