Tribute

Best for

• Funeral directors. It's written to the price-display rules in New South Wales and Victoria and the ACCC's guidance on funerals (see "Funerals: what we build in").
• Anyone who looks after people at the end of a life:
  • pet cremation services (Gentle Paws: every price itemised, and a gentle first-days guide)
  • celebrants (Hannah Lee: a notice to start from, and planning together)
  • cemeteries, memorial parks and bereavement services
• Audiences: families in their first hours, people comparing prices quietly at night, and people planning their own funeral.

Less suited to: anything that needs urgency or energy. Tribute is deliberately slow.

Personality and voice

Calm and plain-spoken, the funeral director who tells you there's no rush and shows you every price before you ask.

• Headlines: "A farewell, in your own way." · "Every price, up front." · "What happens now."
• Buttons: "Call (02) 4200 0000" · "See our prices"
• Microcopy:
  • "Nothing is chosen for you. Pick only what you want."
  • "Still to choose: the service."
  • "Take our written quote home and think it over."
• Words to avoid: "packages from", "premium", "deluxe", "the right thing to do", "what they would have wanted", "limited time", "loved one" over and over, and anything that sells.

Colour

Measured contrast (WCAG).

• Day:
  • ink on paper 14.7:1
  • muted on paper 6.0:1 (5.4:1 on well)
  • dusk on paper 7.6:1 (6.9:1 on well, 6.8:1 on its soft fill), white on dusk 8.4:1
  • ink on candle 10.2:1; candle ink 6.8:1 (6.5:1 on its soft fill)
  • ok 6.2:1, alert 6.0:1
• Evening:
  • ink 16.0:1
  • muted 7.0:1 (6.5:1 on card)
  • dusk 9.8:1 (9.0:1 on card), text on dusk 9.0:1, dusk on its soft fill 8.2:1
  • candle 11.6:1 (9.6:1 on its soft fill)
  • ok 10.3:1, alert 9.1:1
• Example dials: Gentle Paws sage, Hannah Lee rose and Kinsman slate-green all meet AA, light and dark, and so does each closing card.

Typography

• Display: EB Garamond, 400–700 with italics. Headlines, names, prices and totals. Set like a printed order of service.
• Body: Open Sans, 400–700. Plain and very readable, for reading under stress.
• Mono: Xanh Mono, 400 with italics. Times, counts and small labels, used sparingly.

The signature move: the lit words are candlelit. They're set in dusk italics, with a soft glow of candlelight behind them that breathes very slowly.

Layout

• Frame: a 1200px wrap with a max(20px, 4vw) gutter. An ink top line with a candle-gold label pointing to the prices; a sticky header with the candle mark; a low pool of candlelight under the hero copy.
• Hero: copy on the left; the arrangement estimate on the right.
• Then: the price list full width, the first-days guide beside its heading, the notice writer, questions, and a dark closing card lit by a single candle.

Shape

• Soft: --r-s 8px, --r-m 14px, --r-l 22px.
• Drawn in CSS: the candle, the eucalyptus sprig in each page head and the closing candle. No images needed, and no stock grief.

Motion language

Slow and quiet, nothing that bounces.

• Glow: the candlelight gathers behind the lit words, then breathes.
• Elsewhere:
  • The page-head sprig settles.
  • Totals fade up when they change.
  • The guide's bar fills.
  • The closing candle's light breathes.
  • The mark's flame flickers on hover.
  • Sections reveal.
• Motion switch in the footer ([data-motion-toggle], html.calm, remembered as site-motion, with the default from prefers-reduced-motion). Calm stops all of it.
• Evening switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

If you use photos, use your own chapel, grounds, cars and staff, in daylight. Avoid stock photos of grieving people, doves, sunsets and lilies, and never show anyone's funeral without the family's written permission.

Signature components

• Price list: .prices[data-prices] with .cheapest (the least expensive option) and .price-table. The table has tr.grp group headings, prices or ranges in td.r, and details for what's included. It needs no script.

• Arrangement estimate: .arrange[data-arrange] (.hero-card in a hero) with script[data-ar-data] (disb as {kind: [[label, $]]}, fixed as [[label, $]], always included once a kind is chosen). It contains:

  • a [data-ar-kind] segmented control
  • .ar-step fieldsets (data-req) of radios (data-price, data-label), with .choice[data-only] for kind-specific options
  • [data-ar-lines], [data-ar-ours], [data-ar-disb], [data-ar-total] and [data-ar-note]

  Nothing is preselected, and optional steps include a "no" choice.

• First-days guide: .guide[data-guide] with script[data-gd-data] (key), input[data-gd] items in .gd-phase sections, [data-gd-count] and [data-gd-fill]. The ticks are kept for the tab only.

• Notice writer: .notice-maker[data-notice] with [data-nm] fields, a .nm-card preview with [data-nm-out], and [data-nm-count].

• Supporting pieces: .plan-pair, .card, .facts (--n columns, or .stack), .notice, .side-box, .checks, .faq, .table, .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 soft pill.
• Inner pages: .page-head (a eucalyptus sprig), .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:
  • arrange (kind, ours, disbursements, total, missing)
  • guide (done, of)
  • notice (words)
• Helper: Tribute.refresh(root), and Tribute.last, the latest detail of each event, for scripts that load afterwards.

Funerals: what we build in

We checked these for Australian funeral directors in October 2026:

• New South Wales (the Funeral Goods and Services Information Standard):
  • Where prices go: itemised prices at each place of business and on the website, either on the home page or with a home-page notice saying where to find them.
  • The least expensive option: the least expensive burial or cremation package is shown alongside the itemised list, never instead of it. Coffins can be listed one by one, as top sellers, or as a range.
  • Before an agreement: the professional service fee is disclosed, and information is given within 48 hours of a request.
  • Disclosures: the mortuary's location and owner, and how the body is transported.
• Victoria (Funerals Regulations 2025):
  • The price list: on the website and at the premises. It shows each service, how the body is transported, caskets (a range is fine), the mortuary and crematorium and who runs them, and a reasonable estimate of disbursements.
  • The least expensive package: the list says which package that is, and prices are the most that will be charged.
• The ACCC:
  • Quotes: families should get an itemised written quote.
  • Pressure: businesses must not act unconscionably or take advantage of grief.
  • Pre-paid funerals: these must be honoured without surprise extra charges.

These notes are design guidance, not legal advice.

• FAQ for funeral directors (NSW Government)
• Price list requirements (Consumer Affairs Victoria)
• Funeral services (ACCC)

Do and don't

• Do put every price on the website, with the least expensive option first.
• Do let people build an estimate without anything chosen for them.
• Do say there's no rush, and mean it: no signing at the first meeting.
• Don't hide prices behind a call or a form.
• Don't use packages to obscure item prices, or lead with the dearest coffin.
• Don't put text on the candle gold in anything but ink.

Accessibility

• AA contrast throughout (measured above), a skip link and a 3px focus ring. Body text is 17px.
• Price list: a captioned table with row headers, group headings and prices in text. "What is included" is a native disclosure.
• Estimate: labelled fieldsets of radios. Options for the other kind are hidden, not just greyed out. The total and what's still to choose are announced.
• Guide: real checkboxes with labels; the count is announced.
• Notice writer: labelled fields; the preview is text, and the count is announced.
• Motion: slow by design, and fully off with the Motion switch.
• Testing: responsive to 360px, and tested with motion on and off, in Day and Evening.

How to make it yours