Gregory's ServerWe’re showing this in Figma, but this can be easily done wherever you’re building UI.
The view is made up of two layers: the image and the text layer. Both layers are the same size.
|
4 comments
Lickability
Lastly, a text shadow for a final layer of defending your design against poor contrast. We use the same color as the legibility scrim for the shadow. You want the shadow to be sharp enough so it remains close to the letter shape, but not so sharp that it looks embossed.
Lickability
That’s it! Just a little finessing can make your design easier to read on any arbitrary background. ✨
BG!
@lickability really love these threads! Thanks for taking the time. I feel the threaded posts are a great way to digest the info you’re sharing. Thank you! |
The text layer gets a legibility scrim (linear gradient) for the background with these stops:
0.0: Transparent
0.6: Transparent
1.0: Off-black color at 80% opacity
Why off-black? https://lickability.com/blog/plussing-your-ios-app/#-elevating-aesthetics-with-color-grading