Preview image. Unlock full-res
Dark navy slide demonstrating device-shadow opacity across colored swatches, grouped by black-opacity percentage.
Summary
A shadow specification slide: rounded swatches in many brand colors, each holding a white card with a drop shadow, grouped to show the black-opacity level needed per background depth.
Visual description
Dark navy (#11212E) background, white "Product visualisation" pill top-left and page number "60" top-right. A white headline "Shadow on colour" with a short muted sub-line about adjusting the device shadow by colour depth. Below, two rows of large rounded-square swatches, each a different brand color (white, mint, pink, lime, orange, coral on top; teal, olive, slate, near-black on the bottom) with a small white card centered inside casting a soft drop shadow. Tiny bold labels group them by opacity: "15% black opacity (multiplied)" and "20%" on the top row, "25%" and "35%" on the bottom, so the shadow darkens as the background deepens.
Key takeaway
Turning an abstract shadow rule into a calibrated swatch matrix, where you can read off the exact opacity for any background by eye. Grouping the swatches by percentage rather than by color keeps the spec about the rule, not the palette.
Reuse notes
A precise template for documenting elevation, shadow, or any value that scales with background darkness. The labeled swatch-grid pattern transfers to opacity, blur, or contrast specs. Best on a dark canvas so the lightest swatches still read.
From this deck: Monzo shadow on colour spec
View deck
