How should I use website references?

A useful reference is not a template to copy. Compare hierarchy, typography, spacing, interaction patterns and content structure, then translate the underlying decisions into your own constraints.

How do I find the right web design inspiration?

Start with the page or section you are designing, then narrow by visual style or industry. A small collection with a clear reason for every item is more useful than hundreds of disconnected screenshots.

Does Refframe include full websites and UI sections?

Refframe includes full website captures and focused interface sections. Full sites help with overall systems; sections help compare a specific problem such as a hero, About block, feature grid or footer.

Refframe inspiration library

Website references and web design inspiration

A curated library of websites and interface sections for faster research. Compare ideas, open the details and save the strongest references to your boards

Browse references See section examples

A bright magazine cover with a rainbow gradient and butterflies resting on the edges, laid on grass beside red mushrooms.

A vertical collage page showing jewelry, fashion photography, and text blocks on a light cream background with scattered decorative elements and images interspersed.

Minimal e-commerce site layout with pale background showing column of product images, jewelry details, and contact form elements.

A grid of jewelry items on a pale background, including bracelets, rings, a green box, and earrings with prices beneath each item.

A vertical collage of fashion and portrait photography arranged in a grid on a black background, featuring diverse models in various outfits and settings.

Recent website references

View the complete catalog

Checkout form on a minimalist ecommerce site with multiple payment options and a right side order summary showing items and totals.

A minimal ecommerce checkout card floats in a soft gray rounded panel with a small product image and a checkout button placed toward the bottom.

A grid of rounded-square image cards in a soft, airy layout with labels Shop, About, Events, Journal, Sounds, and Instagram beneath each tile.

FAQ section with dropdowns and chat-like bubbles on a light page, a dotted grid pattern appears at the top, and product links scattered at the bottom.

Web page showing a searchable list of stores with filters beside a large map.

Minimal webpage listing awards with large orange heading and repeated award entries on a pale background.

Hero section showing an oversized orange headline and a silver number four balloon on a pale peach background.

A group of runners walk along a sunlit promenade with palm trees and spectators; an oversized orange heading looms above and a photo is held at a tilted angle.

A bold red homepage hero with oversized pale text reading large words across the frame and a collage of photos pinned toward the bottom right.

Large bold typography reading All Projects across a dark page with navigation chips and a text block on the right labeled Info.

Popular web design collections

Start with a focused visual direction or interface section, then follow related references to broaden the search

Ideas and methods from the Refframe blog

Practical guides on finding references, researching visual directions and turning inspiration into clearer design decisions

Read the blog

Landing page handoff checklist

A practical pre-handoff checklist covering landing-page content, responsive behavior, states, accessibility, assets, component mapping, and visual verification

Workflow

31.07.269 min

Web composition, grid, and typography guide surrounded by visual hierarchy, spacing, and alignment rules

Composition, grid, and type rules

Six practical heuristics for checking hierarchy, alignment, spacing, grid behavior, type roles, and readability before a web composition leaves Figma

Workflow

31.07.268 min

Component, token, and site structure specifications flowing into a Claude Code terminal

Design system handoff to claude code

A practical context package for Claude Code: where to put design-system rules, how to map Figma components to code, and what the implementation prompt must verify

Workflow

31.07.2610 min

Components, tokens, foundations, and site structure feeding an AI-ready design system package

Prepare a design system for AI

Make a design system usable by AI coding tools by turning visual choices into explicit tokens, component contracts, responsive rules, examples, and verification criteria

Research

31.07.269 min

Design system workspace with typography, colors, buttons, components, spacing, and a website preview

Build a design system in Figma

A step-by-step Figma workflow for turning a website’s repeated colors, spacing, typography, controls, and layout rules into a small working design system

Workflow

31.07.2610 min

Typography, colors, components, and layout rules connected to a website mockup

Design systems for web designers

A practical explanation of design systems for web designers: what belongs in one, how it differs from a UI kit, and how small the first useful version can be

Workflow

31.07.268 min