Real product screens and flows · Mixed access
Refero ↗
Use it for dashboards, onboarding, pricing, forms, cards, navigation and complete user flows.
Search by: page type, UX pattern or UI element.
Your reference route
Browse here. Send what you like.
You choose the visual direction. Send me a link or screenshot and one sentence about the part you like; I will identify it, check its source and terms, avoid duplicates, and save a useful reference into Design Brain.
Start with these four
Complete websites · Free to browse
Siteinspire ↗
Use it for whole-site art direction, typography, layout, navigation and industry examples.
Search by: style, type, subject or platform.
Expressive live websites · Free to browse
Recent ↗
Use it for bolder websites, motion, unusual composition and strong visual identity.
Notice: what is useful versus what would distract a client.
Landing pages · Mixed access
Land-book ↗
Use it for hero sections, service pages, portfolios, product launches and page structure.
Search by: industry, style, colour or page purpose.
For a specific kind of reference
Mobbin ↗
Real app and web-product screens. Best for product flows and common interface conventions.
Page Flows ↗
Recorded user flows. Best when a screenshot cannot explain how a task behaves from start to finish.
Lapa Ninja ↗
Landing-page collections for full-page sequence, hero and call-to-action research.
Minimal Gallery ↗
Restrained, typography-led sites for clarity, space and fewer visual effects.
Hoverstates ↗
Experimental websites for unusual navigation, type, motion and interaction ideas.
One Page Love ↗
Single-page websites for compact services and deciding what information earns a section.
Awwwards ↗
Highly produced websites. Study craft, then check usability and performance separately.
Figma Community ↗
Community design files and UI kits. Send the exact creator and file link; access does not settle reuse rights.
Design resources from Instagram
Use these for design research. Open a screenshot at full size or follow the source. Mobbin ↗ is already in the list above.
App flows · Visual study
ScreensDesign ↗
Study what each step does before a visitor reaches the result.
Typography · Visual study
Arcotype ↗
Try type pairings with your own headings and body copy. Check each font’s web licence at the source.
Art direction · Visual study
Interface Craft ↗
Study the type hierarchy, open space and illustrated cards on the public landing page.
Moodboards · Visual reference
Cosmos ↗
Find colour and image references. Follow any image you want to use back to its original source.
Existing builds and builder examples
Start Bootstrap free themes ↗
Downloadable whole-site structures. We already hold several, so I will check for duplicates.
HTML5 UP ↗
Downloadable portfolio, editorial and landing templates with attribution requirements.
Astro themes ↗
Modern static-site themes. Each has its own repository, build needs and licence.
Framer free templates ↗
Contemporary builder templates and interactions for visual scouting or Framer builds.
Webflow free templates ↗
Responsive complete sites inside Webflow. Platform limits and template terms still matter.
Webflow cloneables ↗
Cloneable sections and interactions. Cloneable does not automatically mean unrestricted outside Webflow.
WordPress themes ↗
A large free directory for projects that genuinely need WordPress.
Wix templates ↗
Broad industry examples. Treat them as Wix references, not downloadable source code.
Designers and teachers to learn from
Visual hierarchy
Steve Schoger
Design tips and UI refactors. Look for the exact spacing, weight or colour change that makes a screen clearer.
Tips, projects and videos ↗Motion
Emil Kowalski
Timing, easing and interactive animation comparisons. Course access depends on enrolment.
Animation examples and course preview ↗Interaction detail
Rauno Freiberg
A collection of interface experiments. Study the feedback, transitions and small details in each one.
Browse Craft ↗Interactive explanations
Josh W. Comeau
Adjust working examples to understand how layout behaves.
Try the CSS Grid guide ↗Responsive implementation
Kevin Powell
Lessons on building flexible layouts and understanding CSS decisions.
Browse lessons and articles ↗Image and brand tools
Choose a tool for the job, then compare a result with the original at the size it will appear on the page.
Photos and restoration
JPEG restoration guide ↗
Photoshop
Editing, generative fill and enlargement. Its restoration tools can also treat JPEG compression damage. Access depends on your plan.
Image tools ↗JPEG restoration guide ↗
Logos and vector images
Recraft
Explore SVG graphics and recolourable logo ideas. Review the selected plan’s commercial-use terms before client work.
Vector generator and examples ↗Local upscaling
Upscayl Desktop
Free open-source desktop image enlargement. Test for halos, altered detail and useful gains at the intended display size.
Desktop app and requirements ↗Colour palettes
Adobe Color
Extract colour ideas from a business’s photo or logo. Assign colours to page roles and check contrast.
Extract a palette ↗Web export
Squoosh
Compare compression settings and file sizes in the browser before putting images on a website.
Open the image compressor ↗What to send me
1 · Source
Link or screenshot
Send the exact page link. Add a screenshot or short recording when the important detail moves.
2 · Detail
What you like
Name the hero, card, menu, typography, colour, spacing, hover effect, flow or overall mood.
3 · Possible use
Where it might fit
For example: restaurant homepage, agency portfolio, booking flow or general inspiration.
Copy this sentence
Easy message
“Save this for [project/type]. I like the [part] because [reason].”
A screenshot is evidence of an appearance, not permission to copy the whole site, brand, artwork, photography or code. I will separate inspiration from reusable source when I file it.