Humane Web Toolkit

A calm, self‑hosted reference for building kind, non‑hostile websites.

No tracking. No CAPTCHAs. No lockouts. Just people‑first design patterns.

●Principles

Humane web principles

A quick lens to check whether a page respects people’s time, attention, and dignity.

  • Respect privacy: no analytics, no hidden trackers, no fingerprinting.
  • Stay accessible: readable contrast, keyboard‑friendly, clear language.
  • Be forgiving: no lockouts, no hard rate limits, no hostile messages.
  • Minimize friction: avoid puzzles, CAPTCHAs, and unnecessary hurdles.
  • Explain gently: when something fails, say why in calm, human terms.
  • Be honest: no dark patterns, no trick buttons, no hidden consequences.
●Checklist

Accessibility & calm‑design checklist

Use this before shipping a page. It’s intentionally short so it’s actually used.

Access

  • Contrast: text passes WCAG AA where possible.
  • Keyboard: all interactive elements are reachable and usable via keyboard.
  • Labels: every form control has a visible label.
  • Headings: structure content with h1–h3 in order.

Calm

  • No flashing: no animations that distract or overwhelm.
  • No urgency theatre: avoid fake countdowns or “only 1 left!” tricks.
  • Soft language: errors are informative, not accusatory.
  • Predictable: links and buttons do what they say.
●Microcopy

Humane microcopy library

Drop‑in text snippets for errors, empty states, and gentle boundaries.

Soft 401 / 403 (no access yet)

“You don’t have access to this area yet. If you believe this is a mistake, you’re welcome to contact the maintainer so we can sort it out together.”

Soft 500 (server error)

“Something went wrong on our side. Your request wasn’t lost on purpose. Please try again in a moment, or reach out if this keeps happening.”

Honeypot triggered (bot detected)

“It looks like an automated script may have filled in a hidden field. Please submit the form again, leaving any invisible or ‘do not fill’ fields empty.”

Empty state (no data yet)

“There’s nothing here yet. That’s okay. When you add something, it will appear in this space.”

Rate‑limit‑free slowdown (if you ever need it)

“We’re processing a lot right now and might respond a little more slowly than usual. You’re still welcome here, and your request will be handled.”

●Template

Humane contact form (server‑side only)

Works with server‑side processing only. No JavaScript, no tracking, and a honeypot that never accuses humans.

You can leave this blank if you prefer to stay unnamed.

Only used to reply to you. No mailing lists, no tracking.

Share feedback, ideas, or concerns. Plain text is perfect.

Server‑side suggestion: if the honeypot field website is filled, respond with a gentle message like:
“Bot detected! Please fill the form again, leaving hidden fields empty.”

●Template

Low‑friction sign‑up form

A minimal, humane sign‑up pattern. No password rules theatre, no forced phone numbers.

This is how we’ll refer to you here. You can change it later.

Only used for important messages you explicitly agree to receive.

Choose a password you can remember. A long phrase is usually safer and easier than something complex.

Humane pattern: if sign‑up fails, explain clearly (e.g., “This handle is already taken”) instead of vague errors.

●Turnstile

Optional Cloudflare Turnstile notice

This section is text‑only. You can copy the wording next to your Turnstile widget when you integrate it server‑side.

Humane Turnstile notice (force‑interactive test key)

“This page uses Cloudflare Turnstile in interactive test mode. Some privacy‑focused browsers, such as DuckDuckGo, may have trouble displaying the verification widget. If it doesn’t appear, you’re welcome to try again or use a different browser.”

When you do integrate Turnstile, your HTML might look like this (example only): 

<div class="cf-turnstile"
     data-sitekey="3x00000000000000000000FF">
</div>

Keep the widget as invisible and non‑intrusive as possible. Use it as a quiet background check, not as a puzzle for humans to solve.

●Hosting

Self‑hosting & Cloudflare notes

This file is designed to live happily on a private server or a small, trusted‑audience site.

  • Self‑hosted: keep this file on a private server or behind auth for trusted people.
  • No indexing: the <meta name="robots" content="noindex, nofollow"> tag discourages search engines.
  • Cloudflare Pages: if you choose to make it public there, you can remove that meta tag to allow indexing.
  • No JavaScript required: all behavior is server‑side; this file stays HTML + CSS only.
  • No lockouts: if you ever add protections, prefer soft slowdowns and explanations over hard blocks.