ABOUT STYLE GALLERY
Interface knowledge,
easy to reach for again.
Building a screen takes many judgment calls.
How to lay it out, how it should respond, what a shared word really means.
StyleGallery gathers the patterns and guides behind those calls. Search 134 resources across 6 domains by what you want to do, try small examples by hand, and keep reading in the context of the original English sources.
Search by what you want to do
Search by task, like “search screen”, “saving”, or “scroll”. Titles, keywords, and original English names are all searched.
Understand by changing small things
Narrow a region, interrupt a transition, reorder responses. The featured examples show the behavior as you change it.
Apply it with its context
Check each source's scope and origin. Validate experimental guides and examples in your own product before relying on them.
One screen, 6 perspectives.
Browse the gallery ↗Structure where content finds its place.
Small HTML and CSS patterns for alignment, grids, responsive layout, and scrolling.
MotionMotion that makes change understandable.
A motion guide that plans for transitions, feedback, interruption, and retries.
Design EngineeringSturdy down to the smallest interaction.
Implementation patterns for state ownership, editing while saving, async responses, and recovery.
Platform GuidesKnow the differences between platforms.
Compares Apple, Android, and Windows interaction by source and scope.
Design TerminologySame word, different context.
See which source uses a design term, and in what sense.
ExpressionFor a scene worth remembering.
Expressive directions, texture, gradients, and WebGL techniques for brand studies and showcases.
OPEN KNOWLEDGE
Read by people,
queried by agents.
Everything on this site comes from the StyleGallery repository. The source text and pattern code live in the repository; the site presents that knowledge so people can browse it easily.
Agents can start from the task guides and read what they need, with Markdown for every document.
How agents use it ↗