A SMALL PATH, A COMPLETE OUTCOME
Name what you see in a screenshot
Separate structure from effects, then use numbered examples to name the parts you want to borrow.
Compare your screenshot with navigation, content groups, primary actions and overlays, then look for transparency, blur and shadows. This is a manual visual guide; it does not upload or automatically identify images.
Select a number to explore the concept. Position describes structure; transparency and blur describe style. Screenshots cannot reveal keyboard behavior, dismissal or retained state—try the interaction too.
Pick the parts in this order
Each stop explains the problem it solves and the trade-off to consider.
Sidebar
A persistent column of navigation switches primary sections. A temporary panel may be a drawer; the interaction matters.
Card
Group one object’s title, description and actions. Cards work for independent content; too many borders fragment continuous information.
Primary button
A stronger fill emphasizes the next step. A task area usually needs one primary action; meaning must not depend on color alone.
Glassmorphism
Background content shows through a blurred surface. This is a visual style, not a component; check text contrast over complex backgrounds.