Product studies
The examples that reproduce recognizable products, what each one is for, and what to keep when copying one.
These examples reproduce recognizable product interfaces. Use them when the brief needs product fidelity, denser content, native chrome or a specific interaction. They sit under Real products in the gallery. They are illustrations, not working clients, and not affiliated with the products shown.
| Product | Source | Focus |
|---|---|---|
| Figma | figma | Canvas objects, properties and comments |
| Linear | linear | Command menu, issue context and assignment |
| Slack | slack | Reactions, message layout and a thread reply |
| Raycast | raycast | Keyboard search and clipboard navigation |
| Finder | finder | Quick Look, file selection and drag |
| Finder with glass | finder-glass | Translucent window surfaces |
| Spotify | spotify | Library and media controls |
| Notion | notion | Document blocks and editing controls |
| Gmail | gmail | Inbox and message actions |
| Google Calendar | google-calendar | Event and calendar views |
| Google Docs | google-docs | Document editing and collaboration |
| PowerPoint | powerpoint | Slide editing |
| Excel | excel | Cells, selection and calculations |
| Wikipedia | wikipedia | Search suggestions and article navigation |
| Telegram | telegram | Phone conversation and message arrival |
| iMessage | imessage | Native composer and delivery feedback |
Some studies import lucide icons from @/components/mock/core/lucide (lucide 0.468.0, vendored so every glyph matches the original drawings). When copying one into another host, copy the kit with it, or swap the icons for the host's own set. The kit itself needs only Vue. Product names, marks and imagery are covered by layers/ui/app/components/mock/NOTICE.
Open the source and look at it at the intended width before borrowing. A recognizable interface can still have a weak crop, reset or transition, so give it the same rehearsal as a new scene. Being in this list is not a review.