Design taste resources.

Web inspiration Components and systems Visual fundamentals Product and app patterns Presentations, documents, and data Learning, practice, and critique

Web inspiration29

Exposure is the first rep. Pick two galleries, look daily, and name one decision you would steal before closing the tab; the naming is what turns browsing into training.

Award & flagship galleries

  • AwwwardsgalleryDaily and monthly awards judged by design professionals on UI, UX, creativity, and content across thousands of submitted sites.
  • GodlygalleryA tightly curated shortlist of the best recent website, interface and interaction design.
  • RecentgalleryDaily pick of the most inventive sites on the web, the rebrand of the gallery formerly called Godly.
  • CSS Design AwardsgalleryJudged showcase awarding a Website of the Day and Month on UI, UX, and innovation, with visible judge scores.
  • SiteInspiregalleryHand-picked showcase organized by style, industry, and subject, running since 2010 with a weekly editorial pick.
  • Best Website GallerygalleryHand-picked gallery running since 2008, filterable by color, CMS, framework, and design style.

Landing page galleries

  • Land-bookgalleryLong-running, hand-picked landing page gallery updated daily and filterable by industry, style, typography, and color.
  • Lapa NinjagalleryLibrary of over 7,000 landing page designs plus tens of thousands of full-page screenshots spanning startups, fintech, and agencies.
  • Landing.GallerygalleryCatalogue of thousands of landing pages tagged by page type, builder tool, and underlying framework.
  • Landingfoliolibraryfree+paidCurated landing page gallery paired with hundreds of copy-paste UI components for Tailwind, Webflow, and Figma.
  • Landing LovegalleryGallery of animated site designs that records full-page video of each entry's scroll, hover, and transition behavior.
  • SaaspogalleryDaily-updated library of SaaS website designs filterable by style, including a dedicated dark mode collection.

Niche style collections

  • Minimal GallerygalleryCurated source of minimalist website design running since 2013, tagged by category from portfolio to startup.
  • SiiimplegalleryHand-curated gallery of over a thousand minimalist sites across 60-plus categories, publishing since 2008.
  • Dead Simple SitesgalleryWeekly gallery of clean sites with no animation or scroll effects, just typography and layout.
  • Dark Mode DesigngalleryHand-picked gallery devoted entirely to dark-theme website design.
  • Footer.designgalleryGallery devoted only to website footers, organized by visual style like illustrative, grid, and minimal.
  • UnsectionlibraryLibrary of thousands of individual page sections, like hero, pricing, footer, and FAQ, plus a hover-effect and SVG collection.
  • Pricing PagesgalleryGallery focused exclusively on pricing page design, filterable by industry and layout pattern.
  • One Page LovegalleryShowcase of single-page site designs and templates running since 2008, with thousands of entries tagged by genre.
  • HttpstergalleryLong-running gallery of typographic, minimal, and brutalist site design, active since 2012.

Design engineer curators

  • SEESAWgalleryHand-picked sites updated daily across categories like AI, fintech, agency, and e-commerce.
  • ui.landlibraryDigital library pairing design engineer interviews with a curated set of tools, courses, and design systems.
  • DesEngslibraryCurated resource hub of components, animation libraries, design systems, and reading lists built specifically for design engineers.
  • Bookmarks.designlibraryDirectory of hundreds of design tools, galleries, and learning resources organized into 30-plus categories.

Curator hubs & tools

  • TOOOLS.designlibraryA weekly-updated directory of more than two thousand design resources and tools organized by specialty, from AI to typography.
  • MuzlitoolA browser extension and blog that curates design inspiration and industry news pulled from Dribbble, Behance, and Awwwards into a personalized feed.
  • UIZZEtoolfreemiumA searchable library of over eight hundred thousand web and iOS screens packaged as an MCP tool so coding agents can ground UI generation in shipped interfaces instead of generic defaults.
  • FountncommunityfreemiumA large, actively maintained directory of design resources curated by designers, spanning inspiration, tools, and learning material.

Components and systems30

Read the source and the usage guidelines, not just the demos. Comparing how two libraries solve the same component teaches more than either one alone.

Component libraries

  • shadcn/uilibraryA copy-paste component collection built on Radix primitives and Tailwind CSS that became the default starting point for modern web UI.
  • Cult UIlibraryAn open-source set of reusable components, themes and templates styled with Tailwind and compatible with shadcn.
  • coss uilibraryA modern component library built on Base UI, formerly Origin UI, with more than 480 composable pattern-level pieces called particles.
  • MantinelibraryA fully featured React library with more than 120 components and 70 hooks for building complete applications.
  • Chakra UIlibraryAn accessible React component system, rebuilt on Panda CSS and Ark UI, for building products quickly.
  • daisyUIlibraryfree+paidA Tailwind CSS plugin that adds semantic component class names and dozens of built-in themes.
  • Flowbitelibraryfree+paidAn open-source Tailwind CSS component library with first-party support for React, Vue and Svelte plus a Figma kit.
  • Prelinelibraryfree+paidA CSS and HTML-first Tailwind component library with UI blocks, templates and a Figma design system.
  • Tremorlibrary35-plus open-source components built specifically for dashboards and charts on React, Tailwind and Radix.
  • HeroUIlibraryA React and native UI library built on React Aria and Tailwind CSS, formerly NextUI, positioned as a modern alternative to MUI and Chakra.
  • Untitled UIcompanyfreemiumA large Figma UI kit and matching React component library built for production-grade product design.

Headless primitives

  • Radix UIlibraryUnstyled, accessible React primitives that handle focus, keyboard navigation and portals so engineers only style the surface.
  • Park UIlibraryBeautifully designed components built on Ark UI and Panda CSS that work across React, Vue and Solid.
  • Ark UIlibraryA headless library of 45-plus accessible components shared across React, Vue, Solid and Svelte.
  • Base UIlibraryUnstyled, accessible UI primitives for React maintained by the MUI team as a modern alternative to Radix.

Animated components

  • Aceternity UIlibraryfree+paidOver 200 React and Tailwind components built for dramatic landing page effects like spotlights, parallax and 3D cards.
  • Magic UIlibraryfree+paid150-plus open-source animated components covering marquees, bento grids and animated beams for marketing sites.
  • React Bitslibraryfree+paidA fast-growing animated component library that favors customizability and clean developer ergonomics over fixed styles.
  • UiversecommunityA community library of thousands of copy-paste HTML, CSS and Tailwind elements like buttons, loaders and cards.
  • Hover.devlibraryfreemiumAnimated UI components and templates for React, Tailwind and Motion that paste into a project in two clicks.
  • Motion Primitiveslibraryfree+paidA regularly updated set of animated primitives built with Motion for React, aimed at subtle rather than showy interaction.
  • Skiper UIlibraryfree+paidOver 100 uncommon shadcn-compatible components not found in the more mainstream animated kits.

Company design systems

  • Shopify PolariscompanyShopify's unified design system and component framework used across every merchant-facing app surface.
  • IBM Carbon Design SystemcompanyIBM's open-source, token-driven design system spanning web, product and data visualization components.
  • GitHub PrimercompanyGitHub's design system and component library covering the interface patterns behind github.com.
  • Atlassian Design SystemcompanyAtlassian's unified design language and component library behind Jira, Confluence and its other collaboration tools.
  • Adobe SpectrumcompanyAdobe's design system and component set used across Creative Cloud and its other professional tools.
  • Microsoft Fluent 2companyMicrosoft's official design system providing components and design resources across web, iOS, Android and Windows.
  • Google Material Design 3companyGoogle's design system and component framework built around dynamic color and adaptive layouts.

Templates & starter kits

  • Cruipcompanyfree+paidPremium and free Tailwind CSS templates for landing pages, dashboards and marketing sites in React, Next.js and Vue.

Visual fundamentals33

Engineer-built UI fails on type, spacing, and color before anything else. These references turn each into a system you can reason about instead of a guess.

Typography inspiration

  • TypewolfgalleryDaily site-of-the-day pick plus a searchable index of which typefaces power which sites.
  • Fonts In UselibraryIndependent archive of over 34,000 typeface uses across web, print, branding, and packaging.

Font pairing & discovery

  • FontjoytoolA neural-net tool that generates font pairings with a keypress and lets you lock one side while it explores contrast on the other.
  • FontpairtoolfreemiumA library of over a thousand curated Google Fonts and Fontshare pairings with an editable live preview.
  • FontsharelibraryA free type library from the Indian Type Foundry offering full commercial-use variable fonts.

Type scale calculators

  • TypescaletoolfreemiumA type scale generator that builds a full heading hierarchy from a base size and a musical ratio like Perfect Fifth or Golden Ratio.
  • UtopiatoolFluid type, space, and grid calculators by James Gilyead and Trys Mudford that interpolate scales between two viewport widths.
  • Modular ScaletoolTim Brown and Scott Kellum's calculator that generates proportional number sequences from a base value and a musical ratio.
  • GridlovertoolA no-signup playground for tuning font size, line height, and scale factor while watching vertical rhythm update live.

Foundries with taste

  • Klim Type FoundrycompanypaidKris Sowersby's New Zealand foundry behind Söhne, Tiempos, and Founders Grotesk, known for historically grounded, meticulously drawn text faces.
  • Pangram PangramcompanyfreemiumA foundry of over sixty trend-aware, free-to-try typefaces including Neue Montreal and Right Grotesk, used widely by startups and agencies.
  • VelvetynecommunityA French collective designing libre, open-source typefaces ranging from experimental display faces to workhorse text fonts.
  • Grilli TypecompanypaidA Swiss foundry behind GT America, GT Walsheim, and GT Sectra, working in the Swiss grotesk tradition with custom commissions for Figma and Decathlon.

Color palette & contrast tools

  • CoolorstoolfreemiumThe fast spacebar-driven color palette generator with an image color extractor, contrast checker, and palette visualizer.
  • HueminttoolA machine-learning palette generator that produces brand, web, and illustration color schemes from a small set of constraints.
  • Realtime ColorstoolA tool that previews a five-color palette and font pairing on a live mock website layout with built-in AA and AAA contrast checks.
  • Adobe LeonardotoolAdobe's open-source tool for building perceptually balanced, contrast-accessible color scales for interfaces and data visualization.
  • Radix ColorslibraryA system of 30-plus twelve-step color scales built by WorkOS with each step assigned a specific UI purpose, from backgrounds to borders to text.
  • Open ColorlibraryAn open-source, MIT-licensed UI color palette with thirteen color families in ten shades each, exported for every major design tool.
  • WebAIM Contrast CheckertoolThe standard tool for checking foreground and background color pairs against WCAG AA and AAA contrast thresholds.
  • ColorBoxtoolAn indie color scale generator that lets you tune hue, saturation, and lightness curves and export to Tailwind, OKLCH, or Swift.
  • Happy HuesgalleryMackenzie Child's collection of curated color palettes shown applied to full mock interfaces, illustrations, and type.

Gradient tools

  • CSS GradienttoolA linear and radial gradient builder with adjustable stops and angle, plus a library of gradient swatches pulled from brands like Stripe.
  • GrabienttoolA gradient generator and browsable palette gallery supporting linear, angular, and radial styles with CSS, SVG, and PNG export.

Grid & spacing references

  • Every LayoutbookpaidHeydon Pickering and Andy Bell's guide to algorithmic CSS layouts that adapt to content and viewport without media queries.
  • Laws of UXindividualfree+paidJon Yablonski's catalog of roughly thirty design and psychology principles, from Fitts's Law to the Gestalt laws, each explained in a short entry.

Icon sets

  • LucidelibraryA community-maintained fork of Feather Icons with more than 1,700 lightweight, consistent SVG icons.
  • Phosphor IconslibraryAn icon family of more than 7,700 icons available in six weights from thin to fill.
  • Tabler IconslibraryA free, MIT-licensed set of more than 6,100 SVG icons drawn on a consistent 24-by-24 grid.
  • HeroiconslibraryHand-crafted SVG icons from the Tailwind CSS team, in outline, solid, mini and micro styles.
  • IconoirindividualA high-quality, community-grown icon library available for React, Flutter and Figma as a free alternative to paid sets.

Illustration libraries

  • unDrawindividualOver 1,000 open-source illustrations in one consistent style, recolorable to match any brand before download.
  • Storysetcompanyfree+paidFreepik's illustration library offering five consistent character styles with an online editor for recoloring and animating scenes.

Product and app patterns23

Study what shipped, not what got likes. Production flows show which decisions survive users and metrics, and the teardowns attach a reason to every screenshot.

UI pattern & flow archives

  • MobbintoolfreemiumSearchable library of screenshots and flows pulled directly from shipped mobile and web apps.
  • Page FlowstoolpaidRecorded, step-by-step screen flows for onboarding, checkout, and signup captured from apps like Slack, Notion, and Shopify.
  • ReferotoolfreemiumTagged library of over 130,000 UI screens and 10,000 user flows with notes explaining the reasoning behind specific choices.

Screenshot & flow libraries

  • UXArchivegalleryfreemiumA library of mobile user flows kept current across roughly 150 top apps, browsable by flow type like onboarding, search, and tagging.
  • Banani ReferencestoolA free, no-signup library of mobile app UI screens and flows that also lets you edit any screen with AI, pitched as a cost-free alternative to Mobbin.
  • Shoot.DesigngalleryfreemiumA visual library of over 1.5 million mobile app screens and icons organized by category for fast UI reference.
  • AppShot.GallerygalleryA searchable gallery of App Store screenshots filterable by visual style, tone of voice, and color, built for app store optimization and icon design.
  • PttrnsgalleryA free library of several thousand curated mobile design patterns spanning iOS, Android, and watch interfaces, organized on a timeline.
  • CollectUIgalleryA daily feed of hand-picked interface shots pulled from top designers, organized by component and interaction type.

SaaS & growth pattern libraries

  • SaaSUI.designlibraryfreemiumA curated SaaS interface pattern library covering login, dashboards, onboarding, settings, and billing screens from shipped products.
  • SaaSFramelibraryfreemiumAn archive of more than five thousand SaaS website and product interface examples, including downloadable Figma files and email sequences.
  • SaaSInterfacegalleryfreemiumA large gallery of SaaS app UI and UX examples organized by page type, including a dedicated collection of empty state designs.

Onboarding & product teardowns

  • Growth.Design Case StudieslibraryfreemiumComic-book style teardowns of how companies like Spotify, TikTok, and Airbnb use behavioral psychology to shape onboarding, retention, and revenue flows.
  • GoodUX by AppcuesgalleryA curated collection of product-led onboarding flows and feature announcements paired with interviews and frameworks from the teams that built them.
  • Case Study ClubnewsletterA weekly newsletter and archive of design case studies from designers at Apple, Google, Spotify, and other product teams explaining their process.

Component & pattern references

  • Component GallerylibraryA reference library of individual UI components, such as accordions and empty states, pulled from nearly a hundred published design systems.
  • UI-Patterns.comlibraryfreemiumA long-running library of recurring interface solutions organized by the problem they solve, such as navigation, input, and persuasive design.
  • UX Patterns for DevelopersindividualA free, open-source documentation site by developer David Dias covering more than ninety UI patterns with implementation and accessibility guidance for any framework.
  • Checklist DesigntoolStructured UX checklists covering products, pages, components, and flows, meant to catch what a design review would otherwise miss.

Micro-interaction & detail galleries

  • Design SpellsgalleryA gallery of small interface details, such as micro-interactions, easter eggs, and motion touches, tagged by app and interaction type.

Research & evidence

  • Baymard InstitutecompanyfreemiumAn independent ecommerce usability research institute publishing benchmarks and guidelines from large-scale testing across hundreds of top-grossing sites.
  • GoodUIlibraryfreemiumA library of interface patterns backed by published A/B test results from companies including Amazon, Netflix, and Booking.com.

Ethics & dark patterns

  • Deceptive DesignlibraryA catalog of manipulative interface patterns, from fake scarcity to confirmshaming, alongside a hall of shame and tracked legal enforcement actions.

Presentations, documents, and data29

Judgment gets read outside the product too. Decks, charts, and READMEs are where most engineers are seen first, and where taste is rarest.

Deck galleries and teardowns

  • Deck.gallerygalleryA weekly-updated curated collection of beautifully designed presentation decks, keynotes, annual reports, and brand guidelines.
  • TechCrunch Sample Pitch DecksindividualTechCrunch's archive of funded startup pitch decks with slide-by-slide teardown commentary from journalists and investors.

Presentation tools

  • GammatoolfreemiumAn AI-native presentation and document builder that turns prompts or outlines into fully laid-out decks with strong default typography and spacing.
  • PitchtoolfreemiumA collaborative presentation workspace built around smart templates, brand libraries, and clean auto-aligned layouts.
  • Beautiful.aitoolfreemiumA presentation tool with over 300 auto-aligning smart slide layouts that automatically adjust spacing and alignment as content changes.
  • Figma SlidestoolfreemiumFigma's presentation maker that brings auto layout, shared design systems, and prototyping tools into slide creation.

Data viz galleries and chart guidance

  • Storytelling with Dataindividualfree+paidCole Nussbaumer Knaflic's blog, book, podcast, and community devoted to making graphs that communicate a clear point.
  • FT Visual VocabularyindividualThe Financial Times Visual Journalism Team's poster and guide categorizing 40+ chart types by the message they best communicate.
  • From Data to ViztoolAn interactive decision tree that leads from a data format to the most appropriate chart type, with R, Python, and D3 code for each.
  • Datawrapper AcademytoolfreemiumA library of over 100 tutorials on building and customizing every chart type inside the Datawrapper editor.
  • The PuddingcompanyA data journalism publication whose journalist-engineers build interactive visual essays that explain culture through data.
  • Observable D3 GallerygalleryMike Bostock's official D3.js gallery of forkable, interactive chart notebooks covering nearly every chart form.
  • Python Graph GallerygalleryYan Holtz's companion gallery of Python chart examples across Matplotlib, Seaborn, and Plotly with reproducible code.
  • R Graph GallerygalleryYan Holtz's collection of over 400 R chart examples, mostly ggplot2, each with reproducible code and customization notes.
  • Vega-Lite Example GallerygalleryThe official example gallery for Vega-Lite's declarative charting grammar, spanning single-view, layered, and interactive plots.
  • Junk ChartsindividualKaiser Fung's long-running blog critiquing published charts and graphics against a clear framework for what makes a graphic work.
  • FlowingDataindividualfree+paidNathan Yau's long-running data visualization blog, including an annual roundup of the year's best visualization work.
  • NightingalenewsletterThe journal of the Data Visualization Society, publishing essays on dataviz craft, ethics, and best practices from working practitioners.
  • Visualising Dataindividualfree+paidAndy Kirk's data visualization hub with a blog, curated tool catalogue, and the Explore Explain interview series.
  • PolicyVizindividualfree+paidJon Schwabish's blog, podcast, and consulting practice on turning data into clear charts and effective presentations.
  • The Data Visualisation CataloguegalleryA searchable catalogue of chart, table, diagram, and map types, each with an anatomy breakdown and suggested tools.
  • Data Viz ProjectgalleryA Creative Commons catalog of visualization types from design studio Ferdio, browsable by input data and visual shape.
  • XenographicsgalleryA growing gallery of unusual and experimental chart types curated by data journalist Maarten Lambrechts.
  • Visual Capitalistcompanyfree+paidA publisher of dense, highly designed infographics on markets, technology, and global trends, updated multiple times a day.
  • Storytelling with Data PodcastindividualCole Nussbaumer Knaflic's active podcast interviewing practitioners on data communication and presentation craft.
  • Awwwards Data VisualizationgalleryA curated, award-judged gallery of standout data visualization websites and interactive dashboards.

Document and README design

  • MintlifytoolfreemiumA documentation platform with clean, opinionated defaults used by companies like Anthropic, Vercel, and Coinbase for their public docs.
  • Awesome READMEgalleryA curated GitHub list of README files that exemplify strong structure, visuals, and clarity across working open-source projects.
  • readme.sotoolA free browser-based editor for assembling a README from standard sections with a live markdown preview.

Learning, practice, and critique29

Exposure without feedback plateaus. Courses supply the vocabulary, taste tests score your eye instantly, and critique from working practitioners closes the loop.

Books and courses

  • Refactoring UIbookpaidAdam Wathan and Steve Schoger's book and video course of concrete design tactics for developers, from spacing to color to typography.
  • Butterick's Practical TypographybookMatthew Butterick's free, ad-free online book covering character-level typography, page layout, and font selection.
  • Animations on the WebcoursepaidEmil Kowalski's course on crafting web animations that feel right, covering easing, timing, CSS, and Framer Motion.
  • Devouring DetailscoursepaidInteractive reference of interaction design principles with downloadable React components, built by Rauno Freiberg.
  • CSS for JavaScript DeveloperscoursepaidJosh Comeau's interactive course building CSS intuition for engineers working in React, Vue, and Angular.
  • Learn UI DesigncoursepaidErik Kennedy's 36-hour video course teaching color, typography, and layout through live design of worked examples.
  • Design for DeveloperscoursepaidSarah Drasner's Frontend Masters (now Master.dev) course teaching the design process end to end for engineers.
  • Josh W. Comeauindividualfree+paidA developer-educator's blog and course site covering CSS layout, animation, and interactive teaching demos.
  • PiccalillicoursefreemiumAndy Bell's independent front-end education platform teaching standards-based, accessible CSS through paid courses and a free newsletter.
  • IndexcoursepaidAn upcoming design education platform from Emil Kowalski and Glenn teaching practical design technique through focused tutorials.

Individuals

  • Rauno FreibergindividualPersonal site of a staff design engineer at Vercel, built around detailed craft notes and interaction essays.
  • Emil KowalskiindividualPersonal site of a design engineer at Linear, with writing on animation and taste alongside the open-source components he ships, like Sonner and Vaul.
  • Steve SchogerindividualPersonal site of the visual designer behind Refactoring UI, sharing practical UI tips and design work.
  • Brian LovinindividualPersonal site of a designer and engineer at Notion, with writing on product design craft and a self-built portfolio app.
  • Sean Voisen's Design Engineering ResourcesindividualA periodically updated reading list of articles, books, and talks on the practice of design engineering, curated by a former Adobe design engineering lead.

Newsletters

  • SidebarnewsletterA daily newsletter from Sacha Greif delivering the five best design links every weekday to over 35,000 subscribers.
  • HeyDesignernewsletterWeekly newsletter of hand-picked design and front-end links running since 2012, aimed at PMs, UXers, and design engineers.
  • The Smashing NewsletternewsletterA weekly newsletter from Smashing Magazine with practitioner-written tips on front-end, UX, accessibility, and modern CSS.
  • UX CollectivecommunityThe largest independent design publication on Medium, publishing critical, in-depth writing for designers and product makers.
  • Product Teardowns by Kristen BermannewsletterfreemiumA newsletter that takes apart consumer products to expose the behavioral science principles embedded in their design.
  • Design Decisions by Bear LiunewsletterfreemiumA weekly newsletter that picks one shipped product and walks through the specific choices behind its design after weeks of hands-on use.

Taste tests

  • Can't UnseetoolA quiz game that shows two near-identical UI variants and asks you to pick the better one across hierarchy, spacing, and typography.
  • It's Centred ThattoolA short game that tests whether you can tell if a dot is truly centered inside a shape.

AI critique tools

  • Attention InsighttoolpaidAn AI platform that generates predictive eye-tracking heatmaps for any design, trained on millions of recorded gaze fixations.
  • EyeQuanttoolpaidA machine-perception tool that predicts where attention goes on a design and what visual elements get missed, in seconds.
  • UX PilottoolfreemiumAn AI design platform that generates wireframes and full UI screens and can run automated critiques on uploaded designs.
  • Design Critique skilltoolAn open-source Claude skill that delivers structured design feedback on usability, hierarchy, consistency, and accessibility from a Figma link, screenshot, or description.
  • UICrittoolA Berkeley research dataset and benchmark of expert UI critiques used to evaluate and improve automated design-feedback systems.

Critique communities

  • ADPListcommunityA free global mentorship platform connecting engineers and designers with over 38,000 mentors for one-on-one feedback sessions.

Look with better company.

Membership is free. Masterclasses taught by industry leaders, hackathons where you ship the same day, and rooms that tell you the truth about your work.