The Web Design Resource Library
150+ Tools, Components and Libraries, Reviewed

Design resource lists age fast. Links die, licences change, prices move, and a project can stop being maintained while its website keeps loading. This guide keeps the list long and describes each tool mostly from its own pages, with the price and licence as they read in September 2026; where a fact comes from somewhere else, such as Wikipedia, the method section at the end names it.

How to read it: where a tool is free, it says so; where it is paid, the price is given in the currency the vendor showed, US dollars unless noted. Where a price only appears after you log in, or a site would not let us read it, the guide leaves the price out rather than printing an old number, and the last section lists those gaps. It also explains how everything was checked.

Start here — if you read nothing else

Six resources that give a beginner a lot of ground for little effort:

1. MDN Web Docs — “Resources for Developers, by Developers”, documenting CSS, HTML and JavaScript since 2005. Mozilla describes it as “a free, high-quality, and comprehensive platform”.
2. Refactoring UI — $99 (The Essentials) or $149 (The Complete Package), US dollars plus local taxes. A design book and video set “from the creators of Tailwind CSS”, with tactics “explained from a developer’s point-of-view”.
3. Realtime Colors — “100% free! Forever.” It “distributes the colors on a real website”, so you judge a palette and fonts on a page rather than as a row of swatches.
4. Baseline — gives “clear information about which web platform features are ready to use in your projects today”.
5. Astro hosted on Cloudflare — Astro is MIT-licensed and ships “zero JS, by default”; on Cloudflare Workers, “requests to static assets are free and unlimited”.
6. Utopia — calculators that “elegantly scale type and space without breakpoints”.

Design inspiration galleries

Awwwards gives out web design awards, and entering is paid: a standard submission costs $65 for one website, and a site has to be submitted to win a Site of the Day or its other awards.

Gallery	In its own words	Price, where the site states one
SiteInspire	“A showcase of the web’s finest design + talent”; new entries added through late September 2026	—
One Page Love	One-page websites and page sections, “hand-picked since 2008”	—
Lapa Ninja	“over 7,300 landing page designs since 2015, along with 15,000+ full-page website screenshots”	—
Minimal Gallery	“a curated source of website design inspiration for creatives. Since 2013.”	—
Land-book	“a curated website design gallery for creatives, updated daily”	A Pro plan removes ads
Mobbin	a “library of real mobile and web app screenshots”	Pro $10 a month, billed yearly
Are.na	“no ads, no personalized recommendations”	Free up to 200 blocks; Premium $7 a month or $70 a year
Savee	“a curated place for visual inspiration”, “without ads or clutter”	—
Cosmos	“a visual inspiration platform for creatives” in “a distraction-free, ad-free environment”	—
Httpster	Website design inspiration, filterable by style and type	—
Brutalist Websites	A collection of brutalist sites; its header describes brutalism as “a reaction by a younger generation to the lightness, optimism, and frivolity of today’s web design”	—
Best Website Gallery	“the most beautiful websites handpicked for you”; picks added through September 2026	—
Behance	A portfolio network “founded in 2006”, with “over 50 million members”	Behance Pro available

Changed name: godly.website now redirects to recent.design, a design inspiration site covering web, interface, branding, typography, motion and more.

Dribbble is a platform where designers show their work and find clients. Its paid plans start at $4 a month, billed yearly (Pro Lite), and add features such as receiving leads and sending proposals.

3D, WebGL and motion

GSAP is free, under its own licence

GSAP’s pricing page says it plainly: “GSAP is now 100% free for all users, thanks to Webflow’s support.” Its licence FAQ adds that “all of GSAP including the plugins that were formerly ‘members-only’ like SplitText and MorphSVG can be used in commercial projects at no charge”.

Two details are worth knowing before you build a product on it:

• It is Webflow’s own “no charge” licence (effective 30 April 2025), not an open-source licence. Without Webflow’s written consent, it does not allow GSAP in tools that let users build animations without code in a way that competes with Webflow’s visual animation building.
• The same licence page still shows an older plain-English summary saying that if end users are charged a fee, you should sign up for a “Business” Club GSAP membership. The FAQ below it says commercial use is covered at no charge. If your product charges its users, read the full licence text rather than either summary.

The stack

Tool	What it is	Cost and licence
Three.js	The JavaScript 3D library; its site showed revision r186	Free, MIT
ThreeUI	“copy-ready Three.js components, complete website templates, WebGL backgrounds, hero sections, UI effects”, by Meng To	Community library free under MIT (50 components, 111 routes, 141 free variants); Pro $199 a year or $299 lifetime
Motion	“Motion (prev Framer Motion)”, “a fast, production-grade animation library for React, JavaScript and Vue”	Free, MIT; paid Motion+ adds premium APIs and examples
Lenis	A smooth-scroll library for JavaScript, React, Vue and more, by darkroom.engineering	Free, MIT
Spline	A 3D design tool in the browser	Free plan with watermarked web exports; Hobby $12 and Pro $25 per seat a month, billed annually
Rive	“The interactive experience engine”: an editor for designing and animating interactive graphics, driven by state machines	“Free to create”, $9 a month per seat “to ship” (Cadet plan)
Lottie	Airbnb’s library that renders After Effects animations exported as JSON on the web, Android and iOS	Free, MIT
p5.js	“a friendly tool for learning to code and make art”	Free and open source (LGPL 2.1)

Three.js Journey by Bruno Simon is a paid course: $95 for the Three.js course, $45 for the WebGPU & TSL course, or $120 for both, VAT included, as a one-time payment with access for life. The site lists 116 hours of video across 87 lessons.

Check the release date before you install

Before installing an animation library, it is worth checking when it last shipped. The last version each of these published on npm, as the registry showed it:

Library	Last version published on npm
Velocity	2.0.6, April 2020
Popmotion	11.0.5, August 2022
Vanta.js	0.5.24, September 2022
Curtains.js	8.1.6, May 2024
Theatre.js	0.7.2, May 2024
Locomotive Scroll	5.0.1, January 2026

An old release date is not a verdict on its own: a small, finished library can keep working. It does mean no fix has been published to npm since, which matters most for anything touching scrolling, input or accessibility.

Visual styles, with their dates

Liquid Glass

Apple announced Liquid Glass on 9 June 2025, describing it as a translucent material that “reflects and refracts its surroundings”. A year later, announcing iOS 27 on 8 June 2026, Apple said the design “continues to evolve, with improvements to legibility, customizability, and consistency”, and added “a new transparency slider in Settings”. Its iOS page says the slider sets Liquid Glass anywhere “from ultraclear to fully tinted”.

If you want to borrow the look, Liquid Glass Design is a gallery of 170+ liquid-glass and glassmorphism examples, each with a copy-ready AI style prompt. It explains the difference from ordinary frosted glass: “rather than simply blurring what sits behind it, a Liquid Glass surface refracts that content like a real lens”. It also links Liqui UI, “Liquid Glass React components, free and open source”. It is maintained by seergb.design.

Other styles

• Glassmorphism — the Interaction Design Foundation credits the term to Michał Malewicz and says the style “became popular after Apple updated macOS Big Sur in 2020”.
• Neumorphism — named in 2019, but the sources disagree on by whom: the Interaction Design Foundation says Malewicz, Wikipedia says Jason Kelly. Wikipedia adds that, partly because of accessibility issues, take-up “had quickly declined by 2021”.
• Neubrutalism — neubrutalism.com calls itself “the definitive reference on neubrutalist web design”, and its guidance includes keeping body text at a 4.5:1 contrast ratio (WCAG AA), which loud palettes often miss.
• Textmode and ASCII — Textmode Overlay is a browser extension that turns canvas and video elements on a page into live ASCII art. It is “free and open source under the MIT license”, and its site says all media processing runs locally on your device.

Typography

• Fontsource — “Download & self-host open-source fonts”: free, open-source and variable fonts, which you can “self-host web fonts with npm packages and CSS”, with CDN links also available.
• Google Fonts — its FAQ says “all Google Fonts are open source and are without cost”, and that “you can use them commercially”, under each font’s licence (most often the SIL Open Font License). It also explains self-hosting: “When a font is loaded from the website operator’s servers, Google does not receive any kind of data related to the visits to the website.” The same FAQ lists drawbacks, starting with a bigger download, because you serve the whole font file rather than the pieces Google’s API would send.
• Fontshare — free fonts from the Indian Type Foundry. Fonts under its own ITF Free Font License may be used “for personal or commercial purposes, free of charge”, but “you may not create a Derivative Work from the Font Software without the prior written consent of the Licensor”. Some Fontshare fonts use the SIL Open Font License instead, so check which licence a font carries.
• Utopia — fluid type and space calculators that generate CSS clamp() values.
• Modern Font Stacks — “system font stack CSS organized by typeface classification for every modern OS”, so text renders with fonts already on the device. Released under CC0.
• Typewolf — a site on “what’s trending in type”, running since 2013. Its newest “site of the day” entry, when we read it, was dated 14 December 2025.
• v-fonts.com — a catalogue of variable fonts. The newest release dates listed on its home page are from April 2022.

One legal reason people self-host: in January 2022 a Munich regional court (case 3 O 17493/20) held that loading Google Fonts dynamically from Google’s servers without the visitor’s consent breached EU data-protection law, and awarded the visitor €100 in damages. That is one German ruling, described here as reported by a German law firm; it is not advice on what your site must do.

Colour

• Realtime Colors — “100% free! Forever.” It previews a palette and fonts on a realistic page, and says it has “300k+ users”.
• OKLCH Color Picker — picks and converts colours in OKLCH, with a fallback for ordinary sRGB screens. Made at Evil Martians by Andrey Sitnik and Roman Shamin; the code is MIT-licensed.
• Leonardo — Adobe’s open-source tool (Apache 2.0) that can “generate colors based on a desired contrast ratio”, for accessible colour systems.
• WebAIM Contrast Checker — enter two colours and it reports the contrast ratio against the WCAG AA and AAA levels for normal and large text.
• Coolors — a fast palette generator, with its own contrast checker and palette visualiser. The free tier shows ads and is limited (for example, 10 saved palettes); Pro removes ads and allows palettes of more than five colours. Its pop-up offered Pro at $3 a month.

A palette generator picks colours that look good together; it does not know which one will sit behind your body text. That is why a contrast check on the actual text-and-background pair is worth the extra minute, whichever tool picked the colours.

Icons and illustration

Icons

Lucide is a good default: “beautiful & consistent icon toolkit made by the community”, released under the ISC licence (the icons it inherited from Feather keep Feather’s MIT licence), and “a fork of Feather Icons”. Its site showed version 1.48.0.

Set	What it says about itself	Licence and cost
Tabler Icons	“6200+ free vector icons for web design”	Free, MIT; a compiled bundle (PNG, PDF, webfont) is $9
Phosphor	“a flexible icon family”, in six weights: thin, light, regular, bold, fill and duotone	Free, MIT
Iconoir	“an open-source library with 1600+ unique SVG icons, designed on a 24x24 pixels grid”	Free, MIT
Material Symbols	Google’s icon set, served from Google Fonts	Free, Apache 2.0
Iconify	“All popular icon sets, one framework”: “over 300,000 open source vector icons”	Free; each icon set keeps its own licence
Simple Icons	SVG icons for popular brands	The project is CC0, with the caveats below

Three licence details worth knowing

Feather Icons has gone quiet. Its GitHub repository was last pushed on 11 March 2025 and had 510 open issues when we read it. It is not archived, so it can look active at a glance. Lucide started as its fork.

Remix Icon changed its licence in January 2026. The repository’s licence file is now the “Remix Icon License v1.0”, dated January 2026. It forbids using the icons “to create, distribute, or sell a competing icon library or icon set”, and using them “as a logo, trademark, or brand identifier”. The npm package, however, still declares "license": "Apache-2.0" (version 4.9.1), so a licence scanner that reads package metadata will report the old licence.

Simple Icons’ CC0 does not cover the brands. Its disclaimer says the project “is released under CC0 - though that doesn’t mean to imply that all icons within the project are also CC0”, and asks users to “seek the correct permissions to use the icons relevant to their project” and to follow each brand’s guidelines.

Illustration

• unDraw — free for “noncommercial and commercial purposes”, and “you do not need to ask permission from or provide credit”. Its licence “explicitly prohibits the use of unDraw assets, vectors, and images for training, fine-tuning, or developing artificial intelligence”, and asks you not to “redistribute in packs the illustrations”.
• Humaaans and Open Peeps — mix-and-match illustrations of people by Pablo Stanley, “free for commercial and personal use under CC0 license”.
• DrawKit — free assets, then Pro at $79 a year or $295 for lifetime access. Its licence bars using the illustrations to train AI models and selling merchandise with them “on posters, prints, mugs”.
• Storyset — free customisable, animatable illustrations, on condition that use “is credited to the company/website”. Using them without credit needs a Flaticon Premium subscription, which Flaticon’s pricing page listed at €9.99 a month or €89.99 a year (US prices $11.99 and $99).
• Icons8 illustrations, including the Ouch! collection — free if “you set a link to icons8.com wherever you use them”; Icons8 also sells subscriptions under a separate paid licence.
• Absurd Design — “a singular, hand-drawn artistic universe for digital use”. Its free licence is for “personal, educational, and other non-commercial purposes only” and requires the credit “Illustration(s) from absurd.design” with a link. Commercial use comes with a paid membership (“Absurd at Core” is €19 a month or €190 a year), and that licence lasts only as long as the membership: when it ends, the illustrations have to come out of anything that uses them.

Gone:

• Glaze — glazestock.com now redirects to an unrelated gambling site.
• Popsy illustrations — popsy.co/illustrations redirects to an app page that returned a Cloudflare “origin DNS error”.

Free photography — and the licence risk

Source	Who runs it	What it offers
Unsplash	Owned by Getty Images since 2021	Free photos under the Unsplash License, which does not include the right “to compile images from Unsplash to replicate a similar or competing service”
Pexels	Owned by Canva	“All photos and videos on Pexels are free to use”, no attribution required
Pixabay	Acquired by Canva in November 2018	Free images, video and music under its Content License
Openverse	A WordPress project, successor to Creative Commons’ CC Search	Searches “more than 800 million images and audio tracks” that are openly licensed or public domain
Smithsonian Open Access	Smithsonian Institution	Millions of collection images released as CC0
Flickr Commons	Flickr Foundation	Historical photography from “over 100 cultural institutions in 24 countries”, launched in 2008 with the Library of Congress

A free licence covers the photographer’s rights, not everything in the picture. The sites say this themselves:

• Pixabay: “It is your responsibility to check whether you require the consent of a third party or a license to use Content.” Its licence also says that if an image contains recognisable trademarks, logos or brands, “you cannot use that Content for commercial purposes in relation to goods and services”.
• Pexels: “Don’t imply endorsement of your product by people or brands on the imagery”, and “Identifiable people may not appear in a bad light or in a way that is offensive”.
• The Smithsonian: even for CC0 content, “a third party may claim rights in the content such as trademark, privacy, or publicity rights”.

Licences change, too. Before June 2017 Unsplash photos were released under CC0; they now carry Unsplash’s own licence. Pixabay changed its terms on 17 April 2023, when the “Pixabay License” became the “Content License”. What a site says today is not proof of what it said on the day you downloaded, so it helps to keep a record of the source, the date and the licence wording for each image you use commercially.

On AI images: in Part 2 of its report on copyright and AI (29 January 2025), the US Copyright Office concluded that “the outputs of generative AI can be protected by copyright only where a human author has determined sufficient expressive elements”, and that this does not include “the mere provision of prompts”.

Frameworks and CSS

• Astro — free, MIT. “The web framework for building content-driven websites like blogs, marketing, and e-commerce.” It was at 7.3.5 on npm. Note the pace: Astro 6.0 came out on 10 March 2026 and Astro 7.0 on 22 June 2026, two major versions within four months, which means planning time for upgrades.
• Eleventy — free, MIT. “Eleventy is a simpler static site generator”; version 3.1.6 on npm.
• Hugo — free, Apache 2.0. “A static site generator written in Go, optimized for speed and designed for flexibility”.
• Next.js — free, MIT, made by Vercel; version 16.3.7 on npm. It runs server code, which brings server security updates with it: in March 2025 Vercel patched CVE-2025-29927, which it called “a critical severity vulnerability in Next.js”, and self-hosted apps using next start and output: 'standalone' were affected. A self-hosted Next.js site depends on keeping up with patches like this one.
• Jekyll — free, MIT. “Transform your plain text into static websites and blogs.” Its latest GitHub release was v4.4.1, published on 29 January 2025.

Who funds what: Vercel makes Next.js, hired Svelte’s creator Rich Harris in November 2021, and NuxtLabs (the company behind Nuxt) announced it “is joining Vercel”. If you are picking a framework partly to avoid depending on one company, that is worth knowing.

Tailwind — and its September 2026 news

Tailwind CSS is free and MIT-licensed, at version 4.3.3 on npm.

On 9 September 2026, Tailwind Labs announced it is joining Shopify. Its post says: “Nothing changes with Tailwind CSS or any of our other open-source projects. Everything will always be MIT-licensed.” On the paid side, existing customers keep access to Tailwind Plus and ui.sh, “but we’re closing sign ups for new customers”.

Alternatives worth knowing:

• Open Props — “supercharged CSS variables”: design tokens rather than utility classes. Free, MIT.
• Pico CSS — styles your HTML tags directly, “using fewer than 10 .classes overall”, with a class-less version. Free, MIT.
• Every Layout — a book and site on composable CSS layouts: “Buy Every Layout for $69”, with several chapters free to read.

Check the date before linking: Water.css, a classless stylesheet, last published a version on npm in August 2021.

Modern CSS you may not need a library for

These features are “Baseline Widely available” in the web-features data behind Baseline (version 3.40.0), meaning they have worked across the core browsers for at least 30 months. The date each crossed that line:

Feature	What it can replace	Widely available since
Cascade layers	Specificity hacks and !important fights	September 2024
<dialog>	Modal libraries	September 2024
Container queries	Element-query polyfills	August 2025
color-mix()	Sass colour functions	November 2025
subgrid	Nested-grid alignment hacks	March 2026
CSS nesting	A common reason to install Sass	June 2026
:has()	“Add a class with JavaScript” for parent styling	June 2026

Not Baseline yet: anchor positioning, scroll-driven animations and cross-document view transitions all have limited availability in the same data. For scroll-driven animations and cross-document view transitions, the browser missing from the support list is Firefox.

Components, templates and code you can copy

Newer tools built for AI coding agents (Cult UI, Componentry, Refero Styles, Taste Skill, Impeccable, Playwright CLI and Awesome DESIGN.md) are covered separately in AI design tools and component libraries, checked.

Three different things get called “component libraries”, and it helps to keep them apart:

• Registries copy source code into your project. You own it and edit it, and nothing updates it for you.
• Libraries are npm dependencies. They update, and you inherit both the fixes and the breaking changes.
• Templates are finished pages you start from and change.

Copy-paste registries

Registry	What you get	Cost and licence
shadcn/ui	Accessible components and “a code distribution platform”: its CLI adds each component’s source to your project	Free, MIT
Magic UI	“150+ free and open-source animated components and effects”, billed as a “perfect companion for shadcn/ui”	Free, MIT; a paid Magic UI Pro adds “50+ blocks and templates”
Aceternity UI	A “React & Tailwind CSS component library” of visual-effect components, blocks and templates	Free components; paid all-access $169 a year or $199 lifetime
React Bits	“200+ high quality, animated, interactive & fully customizable React components”	Free, under “MIT + Commons Clause” (see below)
21st.dev	“12,000+ hand-crafted React and Tailwind CSS components, templates, and shadcn themes” from many authors	Browsing is free with “2 free component copies every day”; membership unlocks more

(ThreeUI, the Three.js registry, is in the 3D section above.)

Two licence details in that table:

React Bits is “MIT + Commons Clause”, which is not the same as MIT. Its licence says “you may use this software, including for any commercial purpose, so long as you do not sell, sublicense, or redistribute the components themselves”. A dependency scanner that only reads the letters “MIT” can miss the restriction.

On 21st.dev, each component’s licence is its author’s. The site’s terms say the underlying component code “remains separately owned or licensed by that author”, and that the demos and previews belong to 21st Labs. So the licence that matters is each component’s, not the site’s.

Headless primitives — the behaviour layer

These ship no visual design: you bring the styling, and they handle behaviour and accessibility. Base UI’s own description is “unstyled UI components for building accessible user interfaces”.

Library	Notes	Licence
Base UI	“From the creators of Radix, Floating UI, and Material UI”. Version 1.0.0 shipped on 11 December 2025; v1.8.0 on 4 September 2026. shadcn/ui’s changelog lists “Base UI as the default” in July 2026.	Free, MIT
Radix Primitives	Made by WorkOS. Its GitHub repository was last pushed on 8 August 2026.	Free, MIT
React Aria	Adobe’s “over 50 components with built-in behavior, adaptive interactions, top-tier accessibility, and internationalization out of the box”	Free, Apache 2.0
Headless UI	Tailwind Labs’ “completely unstyled, fully accessible UI components”. Latest release: v2.2.10, 7 April 2026.	Free, MIT

Tailwind component and block libraries

Library	What it is	Licence
daisyUI	A “Tailwind CSS component library” with semantic class names; “pure CSS. No JS dependency”. Version 5.7.46.	Free, MIT
HeroUI	“Previously NextUI”: “accessible React UI components built on React Aria and Tailwind CSS v4”	Free, Apache 2.0 since v3.0.3 (April 2026; MIT before that). Its npm package still declares MIT
Preline UI	“An open-source Tailwind CSS UI component library”, with blocks, templates and plugins	Free for personal and commercial use under two licences, MIT and the “Preline UI Fair Use License”, which bars using it to build a product “that directly competes with Preline UI”
Flowbite	Tailwind CSS components, with a paid Pro version	Released code under MIT; the name and logos are trademarks of Bergside Inc.

Tailwind Plus (renamed from Tailwind UI in March 2025) is closed to new customers after Tailwind Labs’ move to Shopify; its page now opens a log-in screen for existing customers.

Full component systems

Library	Notes	Cost and licence
Mantine	“More than 120 customizable components and 70 hooks”; its Mantine UI collection of premade responsive components is “free forever for everyone”	Free, MIT
Chakra UI	“Accessible React components for building high-quality web apps and design systems”	Core free, MIT; Chakra UI Pro blocks $299 personal or $899 team, “one-time purchase - lifetime access”
Ant Design	A React design system made by Ant Group and the Ant Design community	Free, MIT

Templates and whole layouts

Source	What you get	Cost and licence
Cruip	“Tailwind CSS templates for your next project”: landing pages, sites and dashboards	A free-templates section, and paid templates such as $49, $79 and $129
HTML5 UP	Responsive HTML5 and CSS3 site templates	Free under Creative Commons Attribution 3.0: credit required
Astro Themes	Astro’s official directory of “free and premium Astro themes”	Both
Landingfolio	Landing-page inspiration plus Webflow, Figma and Tailwind components	—
Vercel Templates	Starter projects you can deploy to Vercel	—

The HTML5 UP licence asks for one thing in return. Its templates are “licensed under the Creative Commons Attribution 3.0 License”, which means you can use them for personal and commercial work and change them however you like; “in exchange, just give HTML5 UP credit for the design”. The Creative Commons legal code says that credit “may be implemented in any reasonable manner”, so it need not sit in any particular place on the page. (The author sells attribution-free versions through a separate site, Pixelarity.)

Learning by reading other people’s code

Resource	What it is
Codrops	Tutorials, demos and case studies; “fueling web creativity since 2009”
CodePen	“A social development environment for designers and developers”
Frontend Mentor	Real-world HTML, CSS and JavaScript challenges built from professional designs; “learn to code for free”
StackBlitz	“Instant dev environments” in the browser
CodeSandbox	“Instant cloud development environments”

How to choose between these

A rough rule, since the options overlap:

• You want to own the code and never fight an upgrade → a registry (shadcn/ui, ThreeUI, Magic UI), accepting that upstream fixes will not reach you automatically.
• You want accessibility handled and will do your own styling → headless primitives (Base UI, Radix, or React Aria if internationalisation matters).
• You want to ship fast and do not need a custom look → a full system (Mantine, daisyUI, HeroUI).
• You want a finished page to change → templates (Cruip, HTML5 UP, Astro Themes).
• You want 3D without writing shaders → ThreeUI, or Spline if you would rather not touch code.

Accessibility — what a million home pages show

The WebAIM Million tests the home pages of the top one million websites each year. Its 2026 report (data from February 2026) found:

• 95.9% of home pages had detected WCAG 2 failures, up from 94.8% in 2025, “reversing a trend of small improvements each of the previous 6 years”.
• An average of 56.1 errors per page, up 10.1% on 2025.
• 96% of all detected errors fell into six categories:

Failure	Share of home pages
Low-contrast text	83.9%
Missing alternative text for images	53.1%
Missing form input labels	51%
Empty links	46.3%
Empty buttons	30.6%
Missing document language	13.5%

WebAIM adds that “these most common errors have been the same for the last 7 years”. It also notes that “addressing just these few types of issues would significantly improve accessibility”, which makes the six a sensible first list.

Free tools: the axe DevTools browser extension (Deque describes its Chrome extension as free) · WAVE, WebAIM’s “suite of evaluation tools” · Accessibility Insights, Microsoft’s tools for Chrome, Edge and Windows, now open source · NVDA, “a free, high quality screen reader”.

Standards, as they stand:

• In the United States, the Justice Department’s 2024 rule makes WCAG 2.1 Level AA “the technical standard for state and local governments’ web content and mobile apps”.
• WCAG 2.2 is a W3C Recommendation; the current edition is dated 12 December 2024.
• WCAG 3.0 is still a W3C Working Draft (latest: 10 September 2026), and the draft itself says it “still has several years of work”.

Accessibility overlays

The Overlay Fact Sheet describes overlays as “technologies that aim to improve the accessibility of a website” by applying third-party code to it. Three things are on the record:

• The Overlay Fact Sheet asks site owners who use overlays to switch to “more robust, independent, and permanent strategies”; its signatories include contributors and editors of the WCAG, ARIA and HTML specifications.
• In WebAIM’s survey of accessibility practitioners (January 2021), 67% rated these tools “not at all or not very effective”, and respondents with disabilities were less favourable still, at 72%.
• On 3 January 2025 the US Federal Trade Commission announced that accessiBe would pay $1 million to settle allegations that it misrepresented its AI tool’s ability to make any website WCAG-compliant, and that it promoted the tool in articles on third-party websites “formatted to look like impartial and objective reviews”. The FTC approved the final order on 22 April 2025.

Performance

Core Web Vitals, as Google’s own pages state them:

Metric	Good
Largest Contentful Paint (LCP)	within 2.5 seconds
Interaction to Next Paint (INP)	200 milliseconds or less
Cumulative Layout Shift (CLS)	0.1 or less

Both web.dev and Google Search Central still give 2.5 seconds for LCP, so a claim that the threshold has been tightened should come with a Google link. INP replaced First Input Delay as a Core Web Vital on 12 March 2024, so a page that still talks about FID is out of date.

Tools:

• Lighthouse — built into Chrome DevTools; its report covers performance, accessibility, best practices and SEO.
• PageSpeed Insights — “provides both lab and field data about a page”: Lighthouse lab results plus real-user data from the Chrome UX Report.
• Unlighthouse — “a free, open-source CLI that runs Google Lighthouse on every page of your site in parallel”. MIT-licensed.
• WebPageTest — free tests from a choice of browsers, locations and devices. Created by Patrick Meenan in 2008, it is “now part of LogicMonitor through Catchpoint”.

One thing that catches small sites: the field data comes from the Chrome UX Report, which only includes pages and sites that are “sufficiently popular”, meaning they have “a minimum number of visitors”. A low-traffic site may have no field data at all, only lab results.

Hosting — and what a traffic spike costs

Platform	Free tier	First paid plan	When traffic spikes
Cloudflare Workers	100,000 requests a day; requests to static assets are free and unlimited	Workers Paid, from $5 a month	“No additional charges for data transfer (egress) or throughput (bandwidth)”
Vercel	Hobby: the first 100 GB of fast data transfer; non-commercial use only	Pro, $20 a month per developer seat, with $20 of usage credit included	Pro’s Flat Rate CDN: “a one-day traffic spike doesn’t change your bill”
Netlify	300 credits a month	Personal, $9 a month (1,000 credits)	A site that reaches its credit limit is paused until the next billing cycle
GitHub Pages	A soft bandwidth limit of 100 GB a month	—	Not for running an online business or e-commerce site (see below)
Amazon CloudFront	A $0/month Free plan	Flat-rate plans “with no overage charges”, or pay-as-you-go	Depends on the plan you pick

What changed recently: Vercel’s Pro plan now includes a “Flat Rate CDN”: “you pay for a capacity tier instead of per unit of usage, so a one-day traffic spike doesn’t change your bill”. If a whole billing cycle’s usage exceeds your tier, Vercel “moves you to a higher tier at the start of the next cycle”; the included tier is 1 million CDN requests and 1 TB of data transfer. Amazon CloudFront has also added flat-rate plans.

Two sets of terms worth reading before you choose:

• Vercel’s free Hobby plan is non-commercial. Its fair-use guidelines say “Hobby teams are restricted to non-commercial personal use only”, and list as commercial, among other things, sites where “affiliate linking is the primary purpose” and “the inclusion of advertisements, including but not limited to online advertising platforms like Google AdSense”. Asking for donations does not count as commercial.
• GitHub Pages “is not intended for or allowed to be used as a free web-hosting service to run your online business, e-commerce site, or any other website that is primarily directed at either facilitating commercial transactions or providing commercial software as a service (SaaS)”.

Netlify’s limit applies to the whole account: its pricing FAQ says that “if one project exceeds its limits, all projects on your account will be paused”.

Vercel vs Cloudflare

The two are good at different things, and the choice depends mostly on whether your site runs code on every request.

Where Vercel is strong

• Preview deployments by default. Vercel “creates a preview deployment” when you push a commit to a branch that is not your production branch, or open a pull request, so you can “deploy and test changes in a live setting, without affecting your production site”.
• Next.js. Vercel makes Next.js.
• Spend controls. On Pro, spend management can notify you, trigger a webhook, or “pause the production deployment of all your projects” at a set amount. Vercel notes that “setting a spend amount does not stop usage on its own”; pausing has to be switched on.
• Predictable CDN pricing on Pro, through the Flat Rate CDN tiers above.

Where Cloudflare is strong

• No bandwidth bill. Cloudflare’s pricing page says “there are no additional charges for data transfer (egress) or throughput (bandwidth)”, and “requests to static assets are free and unlimited”.
• Low entry price for code. Workers Paid has “a minimum charge of $5 USD per month”, including 10 million requests; after that, requests cost $0.30 per million, and CPU time beyond the 30 million milliseconds included costs $0.02 per million milliseconds.

The fine print on each side

• Vercel: Hobby is non-commercial; Pro is priced per developer seat; the Flat Rate CDN excludes some workloads, such as “bulk file distribution or download services”.
• Cloudflare: the free plan’s 100,000 requests are counted per day, not per month. And “when Workers caching is enabled, requests served from the Worker’s cache are billed at the same per-request rate as requests that invoke the Worker”, which the page says “includes requests to static assets”. Cloudflare Pages still works, but its own docs now say: “Start new projects with Workers.”

A rough rule, as we read it:

If your site is…	Worth a close look
Static pages, a blog or a content library	Cloudflare, where static asset requests are free and bandwidth is not billed
A Next.js application that uses its server features	Vercel, where the framework’s own maker runs the platform
Running ads or affiliate links on a free plan	Not Vercel Hobby, which its terms reserve for non-commercial use
A team that lives in preview deployments	Vercel, with spend management and production pausing set up on day one

SSL — shorter certificates, so automate renewal

Certificate lifetimes are shrinking on a published schedule. From the CA/Browser Forum’s Baseline Requirements:

Certificates issued from	Maximum validity
Before 15 March 2026	398 days
15 March 2026	200 days (current)
15 March 2027	100 days
15 March 2029	47 days

The period for reusing domain-validation data shrinks on the same dates, reaching 10 days from 15 March 2029, so from then on almost every renewal will need fresh proof that you control the domain.

At 47 days, a certificate has to be replaced roughly every six weeks. Meanwhile Let’s Encrypt stopped sending expiration notification emails on 4 June 2025, saying that “more and more of our subscribers have been able to put reliable automation into place for certificate renewal”. If your renewal breaks, nothing from them will warn you.

What this means in practice: renewal has to be automated, and it helps to have some separate expiry monitoring, because the automation is now the only thing between a site and a browser warning. Caddy, an open-source web server under the Apache 2.0 licence, was “the first web server to use HTTPS automatically and by default”: it provisions certificates for your sites “and keeps them renewed”.

No-code builders — can you take your site with you?

A visual builder is quick to start with. The question that matters later is what you can take with you if you leave. Here is what each builder’s own help pages or pricing pages say:

Builder	What its own pages say about leaving
Webflow	Code export is available “on paid Workspace plans” (not on Site plans). CMS content, user accounts, ecommerce, form processing and site search are not included in the exported code.
Framer	“Framer does not provide a way to export published sites as HTML files or static website bundles.”
Wix	“In order for your site to work properly, it needs to be hosted and operated on Wix’s servers.” You can connect your own domain.
Squarespace	Exports “certain content” to an XML file for WordPress; “not everything will export”.
Bubble	“Bubble apps can only be run on the Bubble platform; there’s no way of exporting your application as code.” Data can be exported as CSV.
Readymag	Lists “Code export” on its Advanced plan ($58.50 a month billed yearly).
Dorik	Lists code export on its Business plan, not its Personal plan.
Carrd	One-page sites. Pro Lite ($9 a year) removes branding; custom domains start with Pro Standard at $19 a year.

A plan name can hide the feature you need. On Webflow’s pricing page, Basic ($15 a month billed yearly) is “for simple sites that don’t need a CMS”. On Carrd, Pro Lite includes no custom domain.

When a builder is retired: Wix says Editor X “completed the transition to Wix Studio” in January 2025, with all Editor X sites moved to the Studio editor; editorx.com now goes to wix.com/studio.

AI app builders work differently. v0, Bolt, Lovable and Replit all generate real source code, and each documents a way to keep it in a GitHub repository:

• v0: “connect a v0 project to GitHub to keep its code in a repository”.
• Bolt: “connect a GitHub repository to back up your Bolt project, sync commits automatically”.
• Lovable: “export and two-way sync your Lovable project code with GitHub”.
• Replit: its Git pane can “initialize, connect, and manage Git repositories with GitHub integration”.

Their pricing works differently too. v0 and Lovable charge in credits, and Bolt in tokens, so what you pay depends on how much you use them.

Learning

• MDN — the reference for HTML, CSS and JavaScript (see the top of this guide).
• web.dev and Baseline — Google’s guides; Baseline “was originated by the Chrome team and is now defined by the WebDX Community Group”.
• Can I use — “support tables for HTML5, CSS3, etc.”, for checking one feature at a time.
• Smashing Magazine — “founded in September 2006 in Germany”, publishing “practical articles to web designers and developers”, and in its own words “independent”.
• CSS-Tricks — still publishing: its home page carried items dated 9 and 14 September 2026 when we read it.
• A List Apart — publishes a few long articles a year; the newest on its articles page was dated 30 June 2026, with others on 23 April and 28 January 2026.
• Josh W. Comeau — in-depth articles and tutorials on CSS and front-end work, such as a recent guide to anchor positioning.
• Kevin Powell — a YouTube channel “helping you learn how to make the web, and make it look good while you’re at it”, with weekly videos.

Things worth knowing

• Pagefind — “a fully static search library” that works “without hosting any infrastructure”. Free, MIT. (It powers the search on this site.)
• Plausible — “a lightweight and open-source Google Analytics alternative”, under the AGPL-3.0 licence; hosted plans start at $9 a month for 10,000 monthly pageviews.
• Umami — “privacy by default. No cookies, no personal data.” You can self-host the open-source version (MIT) or use Umami Cloud.
• Tally — “unlimited forms and submissions, completely free, as long as you stay within our fair usage guidelines”, including payments, signatures and file uploads.
• Excalidraw — “an open source virtual hand-drawn style whiteboard”, “collaborative and end-to-end encrypted”. MIT.
• Penpot — “the open-source design platform for teams”, free for individuals and small teams, under the Mozilla Public License 2.0.
• SVGOMG — “SVGO’s missing GUI for minifying SVGs”.
• Squoosh — Google Chrome Labs’ image compressor in the browser. Its repository had last been pushed on 23 September 2026 when we read it.
• Wakamai Fondue — “the tool that answers the question ‘what can my font do?’”

One licence to read before you ship: the tldraw SDK’s default licence “permits use only in development”. Production use needs a trial, commercial or hobby licence, and the hobby licence (for non-commercial projects) requires the “Made with tldraw” watermark on the canvas.

Putting this list to use

A handful of checks cover most of the surprises in this guide, and each takes a few minutes:

1. Read the licence file, not only the label. React Bits says “MIT” and adds the Commons Clause; Remix Icon’s npm package still says Apache-2.0 after the project moved to its own licence; GSAP is free under Webflow’s own terms. The licence file in the repository, or the vendor’s licence page, is what counts.
2. Look at the last release date. The npm registry and a project’s GitHub releases page show when something last shipped. A quiet project can be fine, but you are then the one who fixes it.
3. Keep a note of what you were granted. For every image, illustration or font you use commercially: where it came from, the date, and the licence wording on that day. Unsplash and Pixabay have both changed their licences before.
4. Give the credit a free licence asks for. HTML5 UP, Storyset, Icons8 and Absurd Design’s free tier all require a visible credit or link.
5. Before you build on a platform, find its export page. Webflow, Framer, Wix, Squarespace and Bubble each answer “can I take my site with me?” differently, in their own help centres.
6. Automate certificates, then watch the automation. With lifetimes heading to 47 days and Let’s Encrypt no longer emailing reminders, a silent renewal failure is the risk.
7. Start accessibility with the six common failures. Low contrast, missing alt text, missing form labels, empty links, empty buttons and a missing page language account for most errors in the WebAIM Million.

Method, and what is not verified here

How this was checked. Every tool, price, licence and date on this page was read from a source on 30 September 2026, in most cases the tool’s own pages: vendors’ pricing and licence pages, licence files in GitHub repositories, the npm registry, the GitHub API, standards documents (W3C, CA/Browser Forum) and official announcements. Pages were fetched by script; where a site blocked scripts with a bot check, we read it in an ordinary browser, and we did not get round any check that asked us to prove we were human. A few facts come from secondary sources: Wikipedia (who owns Unsplash, Pexels and Pixabay, their licence history, and neumorphism), the Interaction Design Foundation (glassmorphism) and a German law firm’s write-up of the Munich Google Fonts ruling. Each fact is recorded with its source and a verbatim excerpt in the site’s source ledger.

Prices are shown in the currency the vendor displayed: US dollars unless marked, with euros for Flaticon and Absurd Design. Prices on some sites change by region, by billing period, and with promotions; treat every figure as correct in September 2026 and check the vendor’s page before you pay.

What could not be verified, and so is not in this guide:

• Shadertoy and LottieFiles kept us on a security-check page, so they are not described here (Lottie is covered through Airbnb’s own lottie-web project).
• Unsplash’s licence page did not show its text to us, so its licence is quoted from Unsplash’s own Help Center.
• Paid tiers for several tools (Land-book Pro, Motion+, Flowbite Pro, Preline Pro, Magic UI Pro, 21st.dev membership) are mentioned without a price, because the price was not shown on the page we read.
• Pages that say “free” without a licence file (for example Realtime Colors) are described in their own words; we have not checked their terms of service.

If something here is wrong or out of date, tell us: hacksvitae@gmail.com

Sources

• Licences and terms: GSAP Standard License; React Bits, ThreeUI, Lucide, Three.js, Motion, Lenis, Magic UI, shadcn/ui, Base UI, HeroUI, Mantine, Chakra UI, Ant Design, Excalidraw, Pagefind, Umami, Caddy, Hugo, Jekyll, Next.js, Astro, Leonardo, Penpot, Modern Font Stacks and Plausible licence files on GitHub; Remix Icon License v1.0; Simple Icons disclaimer; unDraw, DrawKit, Storyset, Icons8, Absurd Design, HTML5 UP, Preline, Flowbite and tldraw licence pages; Fontshare ITF Free Font License; Google Fonts FAQ; Pixabay, Pexels and Smithsonian Open Access terms; Unsplash Help Center on the Unsplash License; Creative Commons Attribution 3.0 legal code; HeroUI v3.0.3 release notes; Vercel fair-use guidelines; GitHub Pages limits.
• Prices: each vendor’s own pricing page, read 30 September 2026 (Refactoring UI, Awwwards, Mobbin, Are.na, Dribbble, ThreeUI, Spline, Rive, Three.js Journey, Tabler, DrawKit, Flaticon, Absurd Design, Aceternity UI, Chakra UI Pro, Cruip, Every Layout, Cloudflare Workers, Vercel, Netlify, Amazon CloudFront, Carrd, Webflow, Readymag, v0, Bolt, Plausible, Coolors).
• Versions and dates: npm registry and GitHub API records for Astro, Eleventy, Next.js, Tailwind CSS, Velocity, Popmotion, Vanta.js, Curtains.js, Theatre.js, Locomotive Scroll, Water.css, Remix Icon, Feather, Radix, Headless UI, Jekyll and Squoosh; web-features 3.40.0 data for Baseline status.
• Standards and official records: W3C, WCAG 2.2 (Recommendation, 12 December 2024) and WCAG 3.0 (Working Draft, 10 September 2026); CA/Browser Forum TLS Baseline Requirements and ballot SC-081v3; US Department of Justice, ADA Title II web rule fact sheet (2024); US Federal Trade Commission press releases on accessiBe (3 January and 22 April 2025); US Copyright Office, NewsNet issue 1060 (29 January 2025); web.dev and Google Search Central on Core Web Vitals; Chrome UX Report methodology.
• Announcements: Apple Newsroom (9 June 2025; 8 June 2026); Tailwind CSS blog (9 September 2026; 4 March 2025); Vercel blog (11 November 2021; 25 March 2025); Let’s Encrypt blog (22 January 2025); NuxtLabs; Astro blog (Astro 6, Astro 7); Let’s Encrypt (26 June 2025); Wix Help Center on the Editor X transition.
• Research and reports: WebAIM Million 2026; WebAIM Survey of Web Accessibility Practitioners #3 (January 2021); Overlay Fact Sheet.
• Reference: Interaction Design Foundation (glassmorphism); Wikipedia (Neumorphism, Unsplash, Pexels, Pixabay); Kanzlei Plutte on LG München, 3 O 17493/20.

Checked September 2026.