Product-as-hero 6
The real product UI sits directly under or beside the headline instead of an illustration.
Best practiceShow a real, readable product state cropped to the feature the headline promises; avoid fake dashboards.
See it in
Browse
Industries & patterns
Every entry grouped by the industry it serves and by the UX patterns we saw in our captures. Use it to answer “how do other devtools sites do pricing?” or “who uses a search-first gallery?”. The groupings, pattern notes and tips are our own analysis.
By industry
Five sectors, each split into the exact industry label on the entry. The summary line is counted from the tags on these entries.
Developer & AI tools 4
Products sold to engineers: platforms, launchers and agent tooling.
- Common patterns
- Product-as-hero (2), Pricing table (2), Sign-up entry (2)
- Color themes
- Monochrome light (2), High-contrast (1), Monochrome dark (1)
- Layouts
- Documentation (2), Split hero (1), Centered hero (1)
Devtools 1
Developer platform 1
Productivity / Devtools 1
AI tooling 1
SaaS & workplace 8
Team software where the marketing site has to explain a product people use daily.
- Common patterns
- Product-as-hero (3), Pricing table (3), Sign-up entry (3)
- Color themes
- Bold color accent (3), Monochrome dark (3), Monochrome light (1)
- Layouts
- Centered hero (3), Stacked product hero (2), Split hero (2)
SaaS 5
WR-001 · Website Reference
Linear
WR-004 · Website Reference
Notion
WR-007 · Website Reference
Framer
FL-001 · UX Flow
Linear onboarding flow
FL-002 · UX Flow
Notion onboarding flow
Workplace software 1
Email marketing 1
Design tools 1
Consumer & commerce 5
Products for individuals, plus payments and marketplaces.
- Common patterns
- Sign-up entry (3), Docs sidebar (1), Usage rules (1)
- Color themes
- Monochrome light (3), Vibrant gradient (1), Bold color accent (1)
- Layouts
- Centered hero (2), Documentation (1), Split hero (1)
Consumer software 1
Consumer electronics 1
Music streaming 1
Travel marketplace 1
Fintech 1
Design resources 20
Libraries you take assets from: icons, fonts, avatars, illustrations and galleries.
- Common patterns
- Search-first gallery (7), Docs with code tabs (5), Gallery grid (5)
- Color themes
- Monochrome light (12), Bold color accent (3), Warm neutral (2)
- Layouts
- Card grid (7), Split hero (5), Centered hero (5)
Open-source design assets 12
IC-001 · Icon Library
Lucide Icons
IC-002 · Icon Library
Heroicons
IC-003 · Icon Library
Phosphor Icons
IC-004 · Icon Framework
Iconify
FT-001 · Font Library
Google Fonts
LG-009 · Open Brand Assets
Simple Icons
AV-001 · Avatar Library
DiceBear
AV-002 · Avatar Style
DiceBear · Lorelei
AV-003 · Avatar Style
DiceBear · Notionists (Notion-style avatars)
AV-004 · Avatar Library
Boring Avatars
AV-006 · Illustration Library
Open Peeps
AV-007 · Illustration Library
Humaaans
Free design assets 3
AV-005 · Avatar Library
Multiavatar
AV-008 · Illustration Library
unDraw
AV-009 · Illustration Library
Storyset
Type foundry 1
Design community / inspiration 4
Platforms & education 3
Platform design systems and teaching material.
- Common patterns
- Docs sidebar (2), Navigation rail (1), Long-form editorial (1)
- Color themes
- Monochrome light (2), Pastel (1)
- Layouts
- Split hero (1), Documentation (1), Editorial (1)
Platform design system 2
Reference / education 1
By UX pattern
The patterns tagged on entries, grouped into five families. Each card says what the pattern is, one best practice (our guidance, not a quote from the source) and where to see it in the library.
Heroes & first impression
How the first screen states the promise.
Split hero 1
Headline and actions on one side, proof (product, code or media) on the other.
Best practiceKeep the text column narrow (about 45–60 characters a line) and stack the proof under the text on phones.
See it in
Split hero with artwork 3
A split hero where the proof is the library’s own artwork.
Best practiceLet the artwork be the product itself (the icons or illustrations you offer), not generic decoration.
See it in
Centered hero 4
One centered headline, one supporting line and at most two actions.
Best practiceUse one primary action and one quieter secondary; let the next section carry the detail.
See it in
Centered hero with artwork 2
A centered hero with an illustration below or around the text.
Best practiceKeep the actions above the artwork so they stay in the first screen on mobile.
See it in
Discovery & galleries
How a catalog of many items is browsed.
Search-first gallery 8
A search box is the main entry point, with results as a grid.
Best practiceFocus the search on load (or bind a shortcut), show results as you type and keep an empty-state suggestion list.
See it in
Gallery grid 5
A large uniform grid of thumbnails.
Best practiceKeep thumbnails the same ratio, show the minimum text per card and put filters above the grid.
See it in
Filter sidebar 2
Facets (category, style, license) in a side column next to results.
Best practiceShow result counts per filter, keep chosen filters visible as removable chips and collapse the sidebar into a sheet on phones.
See it in
Category index 2
Items grouped into named categories you browse into.
Best practiceName categories by what people look for, show a count and a preview for each.
See it in
Specimen list 1
Each item is shown rendered (e.g. a font set in sample text) rather than as a name.
Best practiceLet people type their own sample text and change size; render at real UI sizes.
See it in
Map + list 1
Results shown on a map next to a scrollable list, kept in sync.
Best practiceHighlight the map pin when a list item is hovered or focused, and give mobile a list/map toggle.
See it in
Download cards 1
Assets offered as cards with a direct download each.
Best practiceState format and size on every card and bundle everything in one ‘download all’.
See it in
Tools & generators
Interactive pages where people make something.
Generator / playground 3
Change options and see the output update live, then copy or download it.
Best practiceStart from a good default, show the exact URL or code for the current settings and make reset obvious.
See it in
Mix-and-match builder 3
Combine parts (heads, bodies, poses) into a custom result.
Best practiceOffer a randomize button, keep parts on one consistent grid and preview at final size.
See it in
In-context product preview 2
Assets previewed inside realistic UI instead of on a blank canvas.
Best practicePreview in the places they’ll really be used (avatars in a comment list, illustrations in an empty state).
See it in
Conversion & onboarding
Pricing, sign-up and the first minutes in the product.
Pricing table 6
Plans side by side with prices and a feature list.
Best practiceLimit to three or four plans, mark one as recommended and keep the full comparison table below the cards.
See it in
Sign-up entry 8
The first sign-up screen: provider buttons, email field or both.
Best practicePut the most-used provider first, keep email as a clear fallback and link ‘Log in’ for returning users.
See it in
Multi-step form 1
A long form split into short steps with progress shown.
Best practiceShow progress, keep one topic per step and never lose entered data when someone goes back.
See it in
Onboarding wizard 2
A short sequence of first-run screens that sets up the workspace.
Best practiceAsk one thing per screen, make optional steps skippable and end on useful content, not an empty page.
See it in
Integrations step 1
An onboarding step that offers to connect other tools.
Best practiceMake it skippable and show the two or three most popular integrations first.
See it in
Use-case survey 1
A question about what the user plans to do, used to tailor setup.
Best practiceKeep options short and visual, allow ‘other’ and visibly use the answer in the next screen.
See it in