# Swipefile design reference library Swipefile is a library of public website and app design references with screenshots, source URLs, capture dates, and authored design notes. ## Shared boards A public board URL has the form https://swipefile.design/board/{id}/. Open the exact URL supplied by the user. It returns complete HTML without JavaScript or sign-in. - Append notes.md for Markdown with all reference notes and design adaptation prompts. - Append data.json for structured reference data, source URLs, screenshot URLs, and capture scope. - Append export.pdf for a visual PDF guide with clickable board and source links. - HTML includes alternate-format links and CollectionPage / ItemList structured data. - Accept: text/markdown also returns Markdown at the board URL. Public links preserve a board's name, selection, and order. The latest published reference notes are returned; unpublished references are omitted. Never infer private or omitted content. Legacy /boards/# links keep their selection in a browser fragment. Ask the owner to use Copy public link to create a readable snapshot. ## Browse - [Blog](https://swipefile.design/blog/): design roundups and practical guides, rendered as full HTML without JavaScript. - [Collections](https://swipefile.design/collections/): curated boards with public links. - [Videos](https://swipefile.design/videos/): motion design, intros and product launch references, with credited YouTube links and click-to-play embeds. Search via ?q= and filter with ?category=motion, intros, or launches. Shared board video records include video thumbnails, not screenshots of the complete video. - [Library](https://swipefile.design/): reference browsing. ## Design guides - [100 Celebrity Websites: 12 Design Ideas Worth Studying](https://swipefile.design/blog/celebrity-website-design-examples/): Explore 100 English-language celebrity websites, with 12 illustrated design breakdowns across music, film, sport, comedy, dance, and television. Markdown: https://swipefile.design/blog/celebrity-website-design-examples/index.md - [100 YouTube Creator Websites: 10 Design Ideas to Borrow](https://swipefile.design/blog/youtube-creator-website-design-examples/): Explore 100 English-language creator websites, with 10 illustrated breakdowns of portfolios, newsletters, recipe libraries, educational brands, and stores. Markdown: https://swipefile.design/blog/youtube-creator-website-design-examples/index.md - [5 Website Design Examples to Study Before Your Next AI Build](https://swipefile.design/blog/website-design-examples-for-ai-builds/): Study Clay, Airtable, AdAnt, Aardvark, and Dennis Snellenberg: five different ways to make a website distinctive, with specific lessons to adapt. Markdown: https://swipefile.design/blog/website-design-examples-for-ai-builds/index.md - [3 Ecommerce Design References for Discovery and Product Selection](https://swipefile.design/blog/ecommerce-product-page-design-examples/): Study product grids and detail pages from Next.js Commerce and Medusa, with practical lessons for imagery, variants, comparison, and purchase controls. Markdown: https://swipefile.design/blog/ecommerce-product-page-design-examples/index.md - [3 Input-First Landing Pages That Make the First Step Clear](https://swipefile.design/blog/input-first-landing-page-examples/): Compare Sivi, Notify.domains, and Repaint to design a useful opening around a prompt, a domain, or an existing website URL. Markdown: https://swipefile.design/blog/input-first-landing-page-examples/index.md - [3 Login and Sign-Up Page Examples With Clear Entry Paths](https://swipefile.design/blog/login-signup-page-design-examples/): Compare Notion, Resend, and Stripe captures for sign-in hierarchy, provider choices, registration context, and the states an authentication flow needs. Markdown: https://swipefile.design/blog/login-signup-page-design-examples/index.md - [3 Newsletter Landing Page Examples With a Clear Reason to Subscribe](https://swipefile.design/blog/newsletter-landing-page-examples/): Study Justin Welsh, Kieran Drew, and David Perell for newsletter positioning, sample content, and a subscription form that fits the publication. Markdown: https://swipefile.design/blog/newsletter-landing-page-examples/index.md - [3 Portfolio Website Examples: Let the Work Shape the Layout](https://swipefile.design/blog/portfolio-website-design-examples/): Compare Brittany Chiang, Dann Petty, and Jessica Hische to choose a portfolio structure for experience, visual range, or detailed creative work. Markdown: https://swipefile.design/blog/portfolio-website-design-examples/index.md - [3 SaaS Hero Examples That Make the Product Easier to Understand](https://swipefile.design/blog/saas-hero-product-preview-examples/): Study Webflow, Airtable, and RightFont to choose between an output gallery, a workflow preview, and a focused interface image for your SaaS homepage. Markdown: https://swipefile.design/blog/saas-hero-product-preview-examples/index.md - [3 Search and Filter UI Examples for Different Kinds of Results](https://swipefile.design/blog/search-filter-ui-examples/): Compare Open Library, Tabler job listings, and Wikimedia Commons to design result metadata, filters, and recovery from an over-narrow search. Markdown: https://swipefile.design/blog/search-filter-ui-examples/index.md - [3 Status Page Examples: Show What Is Happening and When](https://swipefile.design/blog/service-status-page-design-examples/): Study Resend, Linear, and Tabler captures for service summaries, component history, incident context, and the difference between current state and past data. Markdown: https://swipefile.design/blog/service-status-page-design-examples/index.md - [3 Website Hero Image Strategies: Product World, Human Context, and Atmosphere](https://swipefile.design/blog/website-hero-image-examples/): Compare Clay, Shopify, and Skala to choose hero imagery that explains a product, connects it to real work, or establishes a distinctive setting. Markdown: https://swipefile.design/blog/website-hero-image-examples/index.md - [4 App UI Patterns Worth Studying: Dashboards, Boards, Timelines, and Canvases](https://swipefile.design/blog/app-ui-design-patterns/): Compare OpenPanel, Tabler, FullCalendar, and ChartDB to choose an app layout around the task: monitoring, moving work, scheduling, or mapping relationships. Markdown: https://swipefile.design/blog/app-ui-design-patterns/index.md - [4 Landing Page Examples: What to Borrow From Long Sales Pages](https://swipefile.design/blog/landing-page-examples-long-sales-pages/): Explore four course sales pages for offer structure, curriculum, product previews, and proof placement. Learn what to adapt without inventing results. Markdown: https://swipefile.design/blog/landing-page-examples-long-sales-pages/index.md - [Cart and Checkout Design: Keep the Order Clear at Every Step](https://swipefile.design/blog/ecommerce-cart-checkout-design/): Study Medusa cart and address captures to connect product choices, quantity editing, order summaries, checkout steps, and useful form feedback. Markdown: https://swipefile.design/blog/ecommerce-cart-checkout-design/index.md - [Data Table Design: Make Dense Information Easier to Compare](https://swipefile.design/blog/data-table-design-guide/): Use Tabler table, task-list, and log references to choose useful columns, distinguish actions, support long content, and plan narrow-screen behavior. Markdown: https://swipefile.design/blog/data-table-design-guide/index.md - [Designing swipe mode around the board you are building](https://swipefile.design/blog/swipe-mode-board-building-case-study/): A Swipefile product case study on reviewing references, saving decisions, undo, and keeping the destination board visible. Includes earlier and current interface captures. Markdown: https://swipefile.design/blog/swipe-mode-board-building-case-study/index.md - [Empty, Loading, and Error States: Design What Happens Between Screens](https://swipefile.design/blog/empty-loading-error-state-design/): Use empty-cart references to distinguish first use, no results, loading, failure, and success, with practical guidance for recovery and status feedback. Markdown: https://swipefile.design/blog/empty-loading-error-state-design/index.md - [From a plain library header to a visual product introduction](https://swipefile.design/blog/swipefile-hero-reference-case-study/): How Swipefile adapted a reference-led hero: a wide headline, real design previews, and clear browse and swipe actions. Includes earlier and current screenshots. Markdown: https://swipefile.design/blog/swipefile-hero-reference-case-study/index.md - [How to Design Account Settings That People Can Understand](https://swipefile.design/blog/account-settings-design-guide/): Use Tabler settings references to organize account sections, explain save behavior, separate personal and workspace settings, and handle plan changes clearly. Markdown: https://swipefile.design/blog/account-settings-design-guide/index.md - [How to Review an AI-Built Website Against Your Design References](https://swipefile.design/blog/review-ai-website-with-design-references/): Turn vague design feedback into a focused review: compare hierarchy, evidence, density, actions, and responsive behavior against a small reference set. Markdown: https://swipefile.design/blog/review-ai-website-with-design-references/index.md - [How to Turn a Mood Board Into an AI Design Brief](https://swipefile.design/blog/mood-board-to-ai-design-brief/): Build a focused reference board, explain what each example contributes, and hand a concrete design brief to your preferred AI coding or design tool. Markdown: https://swipefile.design/blog/mood-board-to-ai-design-brief/index.md - [Turning a screenshot collection into a useful design brief](https://swipefile.design/blog/design-collection-to-useful-brief-case-study/): How Swipefile adds selection criteria, focused reference notes, and design questions to an existing collection without replacing its save-to-board workflow. Markdown: https://swipefile.design/blog/design-collection-to-useful-brief-case-study/index.md - [Typography and Spacing for AI Websites: A Practical Checklist](https://swipefile.design/blog/typography-spacing-ai-websites/): Make an AI-built website easier to read with a clear type hierarchy, consistent spacing, real content, readable contrast, and responsive checks. Markdown: https://swipefile.design/blog/typography-spacing-ai-websites/index.md - [Website Navigation Design: Give Every Link a Clear Job](https://swipefile.design/blog/website-navigation-design-guide/): Learn how to separate global navigation, local sections, and actions using references from Brian Lovin, Tabler settings, and Next.js Commerce. Markdown: https://swipefile.design/blog/website-navigation-design-guide/index.md Article selections are editorial observations of dated captures, not performance rankings. Markdown versions preserve the article text, reference attribution, and questions. RSS: https://swipefile.design/blog/feed.xml Use the references to inform design principles and cite original sources. Adapt the user's own content and identity. Respect stated capture scope and dates.