Kindred

Best for

• Charities and not-for-profits. Food relief, environment, community services, animal welfare, any cause that asks for gifts and volunteers. It's written to the tax receipt, fundraising and contact rules (see "Charity: what we build in").
• Anyone who asks members of the public for money and time:
  • community radio (Bellbird FM: subscriptions and donations told apart, radiothon shifts)
  • surf clubs and sports clubs (Tidewater SLSC: raffles marked as not gifts, patrols that need a Bronze Medallion)
  • school P&Fs, community gardens, men's sheds, arts organisations with a donations fund
• Audiences: donors who want to know where the money goes, monthly givers who want control, and volunteers checking what a shift involves.

Less suited to: a business selling services (Signal), a membership gym (Marquee), or a political campaign.

Personality and voice

Warm and plain, and straight about money. The ask is clear; so is the way out.

• Headlines: "Bring the creeks back to life." · "Every dollar, accounted for." · "Your gift, your call."
• Buttons: "Give $30 a month" · "Join" · "Pause my gift" · "Yes, stop my gift" · "Keep it going"
• Microcopy:
  • "Gifts of $2 or more go to our deductible gift fund."
  • "Dinner tickets buy you a meal, so they aren't a gift and can't be claimed."
  • "Monthly until you stop. Change, pause or stop it online whenever you like."
  • "Stopped. We've sent a confirmation email, and we won't ask you to reconsider."
• Words to avoid: "only 3% admin" without the accounts behind it, "100% of your donation" when fees come out of it, guilt ("Will you really walk away?") on the stop button, and countdowns that aren't real.

Colour

Measured contrast (WCAG).

• Daylight:
  • ink on paper 16.7:1
  • muted on paper 6.0:1 (5.5:1 on well)
  • teal on paper 7.3:1 (6.7:1 on well, 6.6:1 on its soft fill), white on teal 7.8:1
  • ink on marigold 9.5:1; marigold text 6.4:1
  • alert on paper 6.3:1
• Evening:
  • ink 16.0:1
  • muted 7.1:1 (6.5:1 on card)
  • teal 10.6:1, text on teal 8.8:1, teal on its soft fill 7.9:1
  • marigold 11.4:1, alert 9.2:1
• Example dials: Bellbird pink, lifesaving red (Tidewater) and olive (Second Helping) all meet AA, and so does the closing card in each.

Typography

• Display: Besley, 500–800 with italics. Headlines, amounts, titles. The lit words are Besley italic.
• Body: Atkinson Hyperlegible Next, 400–700. Made by the Braille Institute for low vision: donors skew older, so reading comes first.
• Mono: Azeret Mono, 400–600. Receipts, dates, amounts in tables, spots left.

The signature move: the lit words turn teal italic, and a marigold brush stroke draws itself in underneath.

Layout

• Frame: a 1200px wrap with a max(20px, 4vw) gutter. An ink top line with a marigold pill for the current appeal or season; a sticky header with the two-circle mark.
• Hero: the headline and facts on the left with the live receipt under them; the gift picker on the right. On a phone: headline, picker, then receipt.
• Then: the impact ledger and the register entry; volunteer shifts; the gift manager; other ways to give with straight answers; and a deep closing card with two circles drifting together.

Shape

• Rounded and soft: --r-s 10px, --r-m 16px, --r-l 26px.
• The receipt: square-cornered, dashed rules, and a torn edge along the bottom.
• The mark: two overlapping circles, teal and marigold; where they meet goes dark.

Motion language

• Gift picker: the chosen amount pops; what it does and the receipt slide in when they change.
• Ledger: bars grow to the new year's shares when you switch.
• Roster: spot bars fill as you join; a clash is announced, not just coloured.
• Elsewhere: the brush stroke draws under the headline, the closing card's circles drift, sections reveal with a 14px rise over 650ms, and the phone menu drops in.
• Motion switch in the footer ([data-motion-toggle], html.calm, remembered as site-motion, with the default from prefers-reduced-motion). Calm stops the stroke, pops, slides, bars and drift.
• Evening switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

Real photos of the work, with consent from everyone in them, and never pictures of people at their lowest to make the ask. The template uses shapes instead of stock photos, and no invented beneficiary stories or donor testimonials.

Signature components

• Gift picker: form.give[data-give] with data-org, data-abn, data-dgr-min, data-fee-pct and data-fee-fixed, containing:
  • .freq > button[data-freq="monthly"|"once"]
  • .amounts > .amt[data-amount][data-does-once][data-does-monthly] and .amt-other > input[data-amount-other]
  • [data-does], select[data-fund] > option[data-dgr][data-note], input[data-cover] with [data-fee]
  • [data-give-out], button[data-give-go], [data-give-done]
• Receipt: .receipt[data-receipt-for="<form id>"] with .r-org, [data-r-kind], dl[data-r-lines] and [data-r-note].
• Ledger: .ledger[data-ledger] with script[data-ledger-data] (years, each with out and in rows of label, amount, note and the "of every dollar" phrase), button[data-year], [data-cents], .lbar[data-lbar], tbody[data-ltable] and [data-ledger-note].
• Gift manager: .mygift[data-mygift][data-amount][data-day], containing [data-mg-amount], [data-mg-state], [data-mg-next], buttons [data-mg-open], panels [data-mg-panel] with [data-mg-save] and [data-mg-close], [data-mg-resume], [data-mg-msg] and .receipts.
• Roster: .roster[data-roster] (with data-need-<key> labels), containing:
  • .seg[data-filter]
  • .shifts > .shift with data-id, data-date, data-start, data-end, data-cap, data-spots and data-needs, each holding [data-spots-out] and button[data-join]
  • .mine with [data-mine-list], [data-clash] and [data-needs-out]
• Supporting pieces: .regbox (the register entry and where the Charity Tick goes), .card, .facts, .notice, .side-box, .faq, .close-card (--close-bg, --close-em).

Multi-page kit

• Phone menu: .menu-btn[aria-controls] opens .site-menu. Escape, an outside click or choosing a link closes it, and Tab stays inside while it's open.
• Current page: aria-current="page", shown as a teal-soft pill.
• Inner pages: .page-head (a marigold glow and the two circles), .crumbs, a .tag and a smaller .h1.
• Fields: .field, .fields, .field-wide, fieldset.field-set, .check, .form-card, [aria-invalid="true"]; form[data-template].
• Tiles, segmented control, gate, slider, switch, tables: .choices, .seg, [data-gate], input.range, .switch[role=switch], .table.
• Events: gift (amount, total, frequency, fund, deductible), gave, ledger (year), mygift (amount, day, state, pause), roster (shifts).
• Helper: Kindred.refresh(root).

Charity: what we build in

We checked these for Australian charities in October 2026:

• Tax receipts. A deductible gift recipient doesn't have to issue receipts, but if it does, the receipt must show the organisation's name, its ABN, and that it's for a gift; receipts for fundraising events and auctions also show the market value of what the donor got. The live receipt shows exactly this, and turns into a "payment confirmation (not a tax receipt)" for a dinner, raffle or membership.
• Only gifts are deductible. Gifts of $2 or more to a DGR can be claimed; things the donor gets something back for can't. Each fund says so before payment.
• The national fundraising principles. Say what the money is for (the ledger and "what it does"), state whether a donation is one-off or ongoing and how to end it (the picker and the gift manager), respect requests to stop or limit contact (contact preferences, "Don't ask me for money again"), no undue pressure, and handle information under the Privacy Act.
• The ACNC register. Link to the charity's Charity Register entry and Annual Information Statements. Registered charities may use the ACNC Registered Charity Tick under the ACNC's terms; the template leaves a place for it rather than drawing it.
• Email. Registered charities are partly exempt from the Spam Act's consent rules for some messages, but the templates still ask, unticked, and include an unsubscribe.
• Volunteers. Working with Children Checks for work with children, and checks said before someone signs up.

These notes are design guidance, not legal or tax advice.

• Receipts for tax-deductible gifts (ATO)
• National Fundraising Principles (Consumer Affairs Victoria)
• Registered Charity Tick (ACNC)

Do and don't

• Do say what a gift does, in money you can picture.
• Do mark what isn't deductible before payment, not after.
• Do make stopping a monthly gift as easy as starting one.
• Do publish where the money went, including fundraising costs.
• Don't pre-tick the card fee or marketing boxes.
• Don't guilt people at the stop button.
• Don't draw the ACNC Charity Tick unless the charity is registered and follows the ACNC's terms.

Accessibility

• AA contrast throughout (measured above), a skip link and a 3px focus ring. The body face is designed for low vision, at 17px.
• Gift picker: a real form; frequency and amounts are toggle buttons whose labels include "a month"; what it does, the tax note and the receipt are announced politely; the submit button names the amount.
• Ledger: bars are decorative; the numbers are a real table with a caption, and "of every dollar" is text.
• Gift manager: each change opens a panel and moves focus to its heading; results are announced; nothing happens without a confirming press.
• Roster: join buttons say the shift and time; a clash is an alert in words.
• Testing: responsive to 360px, and tested with motion on and off, in Daylight and Evening.

How to make it yours