A juried showcase recognizing ambitious websites from designers, developers, studios, and agencies around the world.
Best for Studying high-craft visual direction, interaction, and implementation in live production websites.
Resources / Topic 01
Design resources
Useful references and working tools for interface, brand, typography, components, motion, visualization, and design engineering.
51 resources
Interface and web inspiration
Study layouts, interactions, and visual direction through real product flows and curated websites.
An independently curated library of Webflow, Framer, and Shopify templates reviewed for both design and implementation quality.
Best for Choosing a polished starting point without evaluating every template marketplace listing yourself.
A weekly gallery of exceptional websites filed by the exact detail each capture shows — hero, footer, button, navigation, page transition, scroll animation — with a vault of copyable snippets alongside.
Best for Comparing how many sites handle one specific element or interaction, instead of scanning whole pages for the part you need.
A large designer community and visual showcase covering interfaces, branding, illustration, animation, and portfolios.
Best for Exploring many visual directions quickly or discovering designers with a particular style.
A curated gallery of website footers organized across typographic, illustrative, grid, animated, and dark styles.
Best for Studying how a page closes with navigation, utility links, and a final visual gesture.
A curated archive of distinctive mobile websites and unconventional digital experiences, browsable by visual and interaction tags.
Best for Finding expressive mobile-web references when a standard responsive layout feels too predictable.
A hand-picked shelf of beautifully designed macOS apps, with a quick visual browse of useful desktop products.
Best for Studying polished native macOS interface and interaction patterns when designing a desktop product.
A searchable reference library of real mobile and web product screens, interface elements, and complete user flows.
Best for Studying how established products solve a specific screen or multi-step interaction.
A compact, opinionated feed of noteworthy live websites selected for daily web design inspiration.
Best for Finding a fresh visual direction without wading through a large popularity-driven gallery.
A broad curated feed spanning interfaces, websites, branding, typography, motion, editorial work, and digital products.
Best for Starting broad when you need references across more than one design discipline.
Brand, editorial, and social
Explore how logos, guidelines, decks, and social content build coherent visual languages.
A showcase of real brand guideline documents linking to identity systems created in-house and by design studios.
Best for Seeing how a visual identity becomes practical rules, assets, and documentation.
A Threads account posting free color palette cards, each swatch captioned with its name and hex code. The paid dictionary it promotes is optional.
Best for Grabbing a ready-made palette with usable hex values when a project needs a starting color direction.
A curated collection of presentation decks and individual slides across pitches, reports, guidelines, portfolios, and strategy.
Best for Finding structure and visual pacing for a specific kind of presentation.
A searchable library of free SVG logos for apps, developer tools, and technology brands, with quick copy and download workflows.
Best for Finding a ready-to-use brand mark before drawing or exporting a logo asset yourself; check each brand's guidelines before use.
A focused logo inspiration library organized by type, industry, style, shape, color, and mood.
Best for Building a precise logo moodboard or comparing directions for a new identity.
A curated reference wall for well-designed social posts, product announcements, launches, and visual updates.
Best for Planning a launch post or translating product news into a clear visual format.
Typography
Study how type shapes tone and hierarchy through real-world examples and usable typeface catalogs.
An independent archive documenting typefaces as they appear in real branding, editorial, packaging, software, and web projects.
Best for Evaluating a typeface through finished work instead of an isolated specimen.
A visually led catalog of typefaces available under various free licenses, organized by broad typographic style.
Best for Discovering distinctive type options before confirming the license on the original source.
Component discovery
Compare patterns across design systems or browse broad community catalogs for a useful starting point.
A community marketplace for React and Tailwind components, templates, and themes from independent design engineers.
Best for Browsing a broad catalog or bringing component ideas into AI-assisted workflows.
A cross-system reference showing how real design systems name and implement common interface components.
Best for Comparing established patterns before designing or naming a component.
An endless spatial canvas of original animated web components that can be opened individually and copied into a project.
Best for Exploring unconventional interaction ideas through a playful, highly visual browsing experience.
A collection of free Figma layout blocks recreated for close inspection, remixing, and hands-on design study.
Best for Learning layout decisions by taking polished interface sections apart pixel by pixel.
A free, MIT-licensed library of 154 copy-paste React and Tailwind components across 26 categories, spanning buttons and widgets alongside device mockups and annotation callouts.
Best for Taking a consistently styled component as source you own — including presentation pieces like device frames and callouts — with no dependency and no attribution required.
A community-built library of several thousand open-source UI elements, each copyable as plain HTML/CSS, Tailwind, React, or Figma.
Best for Borrowing a visual treatment for a single element, then rebuilding it on accessible primitives — submissions are community-made and rarely keyboard- or screen-reader-ready.
Foundations
Reliable starting points for the structure, behavior, and accessibility of product interfaces.
Adobe's unstyled React components and hooks for robust keyboard, touch, and assistive-technology behavior.
Best for Complex widgets where accessibility and interaction behavior cannot be improvised.
Accessible, customizable component source code that becomes part of your own React codebase.
Best for Starting a product design system while keeping full ownership of the implementation.
Motion and expressive UI
Explore motion languages ranging from product micro-interactions to high-impact marketing effects.
A visually dramatic collection of animated React components, backgrounds, and landing-page sections.
Best for High-impact marketing pages that need expressive motion quickly.
A library of 66 animated text effects built in pure CSS, each self-contained and offered alongside a ready-made prompt for coding agents.
Best for Adding a single expressive headline or wordmark animation without pulling in a JavaScript motion dependency.
A copyable collection of animated React and Tailwind components, effects, and larger page blocks for expressive interfaces.
Best for Adding animated product or landing-page sections while retaining access to the implementation.
An open-source React library of 42 animated loading indicators split across text, inline, and image variants, each with an adjustable animation speed.
Best for Filling the wait in AI-generated interfaces, where streaming responses need a loading state that matches the content being produced.
A focused library of spring-physics interface animations with live tuning and copyable implementations.
Best for Learning and tuning motion that should feel physical rather than decorative.
Animated components and effects designed to layer cleanly onto a shadcn-style foundation.
Best for Adding restrained polish to product marketing and portfolio surfaces.
A catalog of polished motion patterns and animated components aimed at real product flows.
Best for Dashboards, uploads, tables, navigation, and other in-product interactions.
A browsable collection of animated backgrounds, text treatments, effects, and interactive React components.
Best for Finding a specific visual effect without building its animation from scratch.
A catalog of 210 procedural Three.js and WebGL components — heroes, shaders, backgrounds, and landing-page templates — each copyable as code or as a prompt, with an MCP server for coding agents. The app and the Community tier are MIT licensed; a Pro tier unlocks the rest.
Best for Adding a 3D or shader-driven hero to a page without writing WebGL from scratch, and for handing those components straight to a coding agent through the MCP server.
Visualization and diagramming
Sketch flows, system relationships, and ideas quickly so complex subjects are easier to discuss and understand.
A collaborative, hand-drawn-style canvas for turning flows, systems, and early ideas into diagrams quickly.
Best for Explaining a complex idea before its structure is stable enough for formal design documentation.
Icons and supporting tools
Find consistent visual assets and create small, purposeful interface moments.
A browser-based tool for turning compatible SVG icons into adjustable stroke-draw animations.
Best for Quick icon micro-interactions without setting up a motion project.
A large handcrafted SVG icon catalog with outline and filled styles across multiple frameworks.
Best for Searching a consistent icon family before reaching for one-off assets.
Design engineering
Bring visual taste, interaction details, and frontend implementation into the same working practice.
A React dev-mode overlay for annotating interface elements in the browser, exporting each note with its CSS selector, position, and context as Markdown.
Best for Pointing a coding agent at the exact element you want changed instead of describing it in prose.
An open-source framework that generates skeleton loading screens from real components at build time, capturing each layout across breakpoints for React, Vue, Svelte, Angular, and React Native.
Best for Replacing hand-measured placeholder screens with generated ones — a production dependency with a build step, not a snippet to copy.
A categorized directory of tools for web-focused design engineers, spanning inspiration, AI coding, components, motion, 3D, utilities, and more.
Best for Scanning the broader design-engineering landscape when you know the task or medium but not which tool to use.
A practical essay on developing design taste by studying strong work, naming why it works, and practicing deliberately.
Best for Building a repeatable critique habit instead of relying on instinct alone.
An open-source design language for AI coding agents, pairing a design skill and commands with a deterministic detector for common AI design anti-patterns.
Best for Raising the design quality of agent-generated interfaces without reviewing every screen by hand.
The personal site of a product designer and engineer, re-themed live from a panel of font, colour, radius, and background controls, alongside released motion components such as Transitions.dev, Border Beam, and Liquid Metal.
Best for Studying how a design engineer makes a portfolio demonstrate its own craft instead of describing it, and lifting the motion components it ships.
Linear's guide to managing design projects, from verifying the problem and exploring options to feedback, direction, and design–engineering handoff.
Best for Structuring collaborative design work when requirements and solutions are still evolving.
A small, dependency-free, fully themeable fluid stepper component with click navigation and optional autoplay.
Best for Adding a polished, stateful stepper without assembling the interaction from scratch.
A library of design systems extracted from real product websites and published as DESIGN.md files that coding agents can read directly.
Best for Handing an AI coding assistant a concrete visual reference so generated UI follows a chosen system instead of defaulting to a generic look.
A searchable library of UI patterns spanning navigation, layout, forms, feedback, commerce, mobile, and other product interface needs.
Best for Naming and comparing common interface patterns when designing a product screen or explaining UI to an AI coding assistant.
A focused drawer component for React, presented with documentation and an interactive example.
Best for Studying a polished React drawer interaction before building a similar pattern yourself.
A visual glossary of web UI parts, styles, interactions, and CSS fundamentals for describing interfaces clearly to AI coding assistants.
Best for Learning the vocabulary needed to turn a vague interface idea into a precise prompt for an AI-built website.
A living, practical checklist for the interaction, typography, motion, touch, performance, accessibility, and design details that make web interfaces feel considered.
Best for Auditing the details of a web interface before polishing a release.
Nothing matches this filter.