Last modified: September 21, 2026

This article is written in: 🇺🇸

Additional Resources

How to choose a resource without copying a polished mistake

This chapter is a directory, not a certification program. The sites below may offer free and paid assets, incompatible versions, or changing terms. When a resource looks useful, open its source and license, run the demo where possible, then test how it behaves in your own layout. Do not treat a beautiful screenshot as evidence of accessibility, performance or permission to redistribute its assets.

Question	Check in practice	Document for future maintainers
Is reuse allowed?	Read the exact asset/template license and attribution conditions.	License URL and version/date.
Will it work in our stack?	Check peer dependencies, build output and supported framework version.	Package and version.
Can all users operate it?	Keyboard, focus, contrast, zoom, labels and errors.	Reproducible test notes.
Can it be modified?	Examine source, export format and component boundaries.	Local customization and owner.
Is it lightweight enough?	Inspect real transferred size and third-party requests.	Performance budget and tradeoffs.
Will it remain supported?	Review maintenance and update process.	Upgrade and replacement plan.

Mini case study: choose a card design from an inspiration site. Rebuild its content with semantic <article>, a heading and real link. First inspect the unstyled browser rendering, then apply its spacing and typography in the live demo. Verify keyboard focus and mobile width. You may copy ideas while still needing permission to copy icons, photos, source code or trade dress.

Suggested asset log: asset, source URL, author, license, attribution location, date checked, local filename, reason used. This makes later audits and replacement feasible. Do not record “free” as a license: free price and reuse rights are different questions.

This directory collects tools for templates, components, typography, images, and design inspiration. A link is a starting point, not an endorsement or a license grant. Before adding an asset to a project, check its current price, license, attribution requirements, maintenance, accessibility, and compatibility with your stack. A free-to-view design is not necessarily free to copy or redistribute.

📄 Templates

Evaluate a template: inspect the HTML landmarks, heading order, keyboard navigation, small-screen behavior, bundled dependencies, and terms for commercial reuse. Run its build yourself instead of judging only the marketing preview.

🧩 Ready Components

These are different kinds of resources, not interchangeable component libraries. Collect UI is inspiration; a production component needs working interaction, focus management, semantics, documentation, and version compatibility. Check whether copied snippets require a framework, build step, icon package, or CSS reset.

🎨 CSS Generators

Inspect generated output and make it responsive

A generator may produce attractive declarations that behave poorly under different widths or color schemes. Rather than pasting a preset and stopping, rewrite the smallest reproducible test:

<div class="generated-card">
  <h2>News</h2>
  <p>A very long translated description belongs here.</p>
  <a href="/news">Read the news</a>
</div>

.generated-card {
  box-sizing: border-box;
  width: min(100%, 28rem);
  padding: clamp(1rem, 2vw, 1.5rem);
  border-radius: 1rem;
  background: #fff;
  color: #0f172a;
}
.generated-card a:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 3px;
}

Compare the actual styled-card capture. A generated blur or shadow may have contrast and performance costs; a CSS-only animation should respect reduced-motion preferences when motion is nonessential. Neumorphic controls sometimes lack clear boundaries, so check affordances and focus instead of selecting them purely by appearance. Test at 320px, zoom to 200%, add long text, and inspect computed styles. Keep the generated source and its original license where the tool provides one.

Try this: generate a two-column grid, then resize the viewport and increase text size to 200%. Inspect the generated CSS; generators can produce fixed widths, overflow, low contrast, or motion that needs a reduced-motion alternative.

🎨 Graphical Elements

Images, icons and illustrations: use the right alternative text

The correct alternative depends on the purpose in context:

<!-- Content image: describe information not otherwise present. -->
<img src="chart.png" alt="Revenue increased from January to March"
     width="640" height="360">

<!-- Decorative flourish: empty alternative, not the filename. -->
<img src="divider.svg" alt="" width="120" height="16">

<!-- An icon-only action still needs a name. -->
<button type="button" aria-label="Close dialog">
  <svg aria-hidden="true" viewBox="0 0 24 24" width="24" height="24">
    <path d="M5 5 19 19M19 5 5 19" stroke="currentColor"/>
  </svg>
</button>

Meaningful chart content often deserves an adjacent table or longer text explanation, not a 150-word alt attribute. Give content images dimensions or an aspect ratio to reserve layout space, and choose loading="lazy" for suitable below-the-fold images rather than applying it blindly to the hero image. An image's source URL, screenshot appearance and file extension do not establish its license.

Try it: take the semantic browser screenshot; write alternative text describing the difference it teaches, not every color or decorative rectangle. Compare this with an icon-only button's accessible name. Reference: W3C image tutorial.

UI Designs

Inspiration is useful for exploring layout ideas; do not copy someone else's brand, assets, or interface without permission. Evaluate whether a design still works with long translated labels, validation errors, and keyboard focus.

🖼️ Icons

Decorative icons should be hidden from assistive technology; an icon-only button needs an accessible name describing its action. Confirm the icon-set license and avoid mixing incompatible visual styles without intent.

📷 Stock Photos

Check the specific image's permitted uses, identifiable-person releases when relevant, and attribution terms. Compress images, give meaningful content images appropriate alt text, and use empty alt="" for decorative images.

Transparent Images

Transparency does not mean an image is public domain. Verify licensing and whether a file actually has a transparent alpha channel.

🛡️ Logos

Logos can involve trademarks as well as copyright. Inspiration or a download link is not permission to use another organization's mark as your own.

🎡 Vectors

3D Elements

For animated 3D, check performance on modest devices, provide a static fallback when appropriate, and respect reduced-motion preferences.

🌈 Gradients

🌊 Animated Backgrounds

📊 Flow Charts

🎨 Mockups

🎵 Font resources

Download only fonts with appropriate web-embedding rights, inspect weights and language coverage, and consider font-loading performance and fallbacks.

🔧 Utility

Check the privacy policy before uploading private customer photos, unreleased brand materials, or proprietary designs to online utilities.

🎨 Color palettes

Test a palette on real interface states

A hex value must contain three, four, six or eight hexadecimal digits as supported by CSS; characters such as K, S, G or % are invalid in a hex color. The malformed codes in the older palette list were corrected in the earlier revision; do not assume that makes every remaining combination readable. A palette with five attractive swatches may fail when applied to small text, form errors, focus outlines and disabled controls.

:root {
  --surface: #fff;
  --ink: #0f172a;
  --link: #1d4ed8;
  --focus: #0f172a;
}
body { background: var(--surface); color: var(--ink); }
a { color: var(--link); }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

These are example roles, not a guarantee for every background or text size. Check actual foreground/background combinations against the applicable WCAG contrast criteria (commonly at least 4.5:1 for ordinary text and 3:1 for large text under WCAG 2.x AA), with separate evaluation for non-text UI boundaries and focus indicators. Test both light/dark variants, forced colors and invalid/disabled states. Color must not be the only way to identify a form error.

Exercise: choose one palette above, assign a surface, text, link, error and focus role, and test the form and button browser screenshots and button states. If a combination fails contrast, adjust the role value and document what changed. Reference: WCAG contrast minimum.

A CSS hexadecimal color uses #RGB, #RGBA, #RRGGBB, or #RRGGBBAA with hexadecimal digits only (0–9, A–F). Several palette codes in the previous version of this section contained invalid characters such as K, O, S, and %. Rather than silently guess the intended colors, those invalid entries are explicitly marked for replacement below. Valid samples are retained:

AI Takeover: #FD76CB #FFAC30 #000000 #FFFEFD
Spaceship: #6B9FED #24F9F9 #A1A7C8 #FFFFFF
Humanoid: #5AC994 #C0F7B7 #123143 #141B29
Singularity: second and subsequent recorded colors #15265C #2EE09A #FFFFFF; original first code #EF84F% is invalid and needs a designer-approved replacement.
Lake: #284445 #216A7E; original repeated the second code four times. Choose additional intentional accents rather than treating the duplicates as distinct colors.
Rio: original values #298CK #DEBSA2 #597678 #24322E #BESA2E include invalid codes; recover intended colors from the source design before using.
Tokyo: original values #DG0B3F #ODA6B5 #DOA4A4 #18CCCE #175F78 include invalid codes; keep only valid #18CCCE #175F78 until the rest are verified.
Montreal: #1A9FAC #755822 #282422 #9F8668 #DDDEDD
Berlin: #7B1B1E #AE7F31 #241B18 #F2EFE9 #807F6E
New York: #E0372E #6B3620 #5D5765 #D7BFB4 #8696CF

Before choosing a palette, test combinations for text contrast (typically 4.5:1 for normal text under WCAG AA), distinguish hover/focus/error states without relying on color alone, and preview light/dark modes. A palette is a starting point, not proof of accessibility.

🖋️ Font examples

Ambit
Helvetica Now
Avenir Next Pro
Plantin
Futura PT
TT Norms
Brandon Grotesque
Inter
Manrope
Space Grotesk

These are font names, not necessarily free or redistributable fonts. Check the exact family and license before embedding.

📚 Glossaries & Guides

Some older sites may have moved or disappeared. Before recommending an external link, confirm it loads, is maintained, and still covers the intended subject.

A practical resource-selection checklist

Purpose: Does the tool solve a real requirement or merely add a dependency?
License and cost: Can you use, modify, redistribute, and deploy it under current terms?
Accessibility: Can the demo be operated by keyboard and at increased zoom? Are controls labeled?
Maintenance: When was it last updated, and what browsers/framework versions does it support?
Performance and privacy: What code, images, fonts, and third-party requests will ship to users?
Reproducibility: Can a teammate run the example from a documented dependency version?

References: MDN: CSS hex colors, WCAG 2.2, MDN: alternative text.