Shortlist

Best for

• Recruitment agencies and labour hire providers. It's written to the job ad and pay secrecy rules, labour hire licensing, same job, same pay orders, and candidate consent (see "Recruitment: what we build in").
• Anyone who hires often and wants to be straight about it:
  • councils and public employers (City of Riverbend: pay bands and closing dates on every job)
  • hospitality and retail groups (Daily Grind: paid trial shifts and an application tracker)
  • trades, mining and seasonal labour hire (Fieldwork, the industry template)
• Audiences: job seekers comparing offers on their phone, people coming back to check an application, and hiring managers who want the cost before the call.

Less suited to: a single business with one job a year (a page on its own site is plenty), or a jobs marketplace with thousands of listings (it needs a search backend).

Personality and voice

Fair and clear, the recruiter who tells you the pay first and asks before sending your CV anywhere.

• Headlines: "Good people, good jobs, paid fairly." · "What does it really pay?" · "Hiring? See the cost first."
• Buttons: "Find a job" · "Save" · "Withdraw" · "Hire with us"
• Microcopy:
  • "$78,000 to $86,000 a year + super"
  • "Waiting on you: may we send your CV to the employer?"
  • "Casual: a 25% loading on $38.50 an hour, in place of paid leave."
• Words to avoid: "rockstar", "ninja", "competitive salary", "DOE" (depending on experience), "fast-paced environment", "work hard, play hard", and placement counts, success rates or testimonials you can't stand behind.

Colour

Measured contrast (WCAG).

• Office hours:
  • ink on paper 17.1:1
  • muted on paper 6.3:1 (5.7:1 on well)
  • green on paper 6.0:1 (5.4:1 on well and on its soft fill), white on green 6.4:1
  • ink on highlighter 14.2:1; highlighter ink 6.3:1 (6.2:1 on its soft fill)
  • ok 6.0:1, alert 6.0:1
• After hours:
  • ink 16.5:1
  • muted 7.2:1 (6.6:1 on card)
  • green 10.8:1 (9.8:1 on card), text on green 9.3:1, green on its soft fill 8.8:1
  • highlighter 14.4:1 (11.7:1 on its soft fill)
  • ok 10.8:1, alert 9.2:1
• Closing card: text 17.1:1, body 11.4:1, highlighter em 13.1:1, ink on its highlighter button 14.2:1.
• Example dials: Riverbend blue (white on blue 8.3:1, 9.3:1 at night), Daily Grind espresso (8.5:1, 9.7:1) and Fieldwork rust (7.3:1, 9.1:1) all meet AA, light and dark, and so does each closing card.

Typography

• Display: Funnel Display, 500–800. Headlines, job titles, the big figures. Wide, warm and plain-spoken.
• Body: Funnel Sans, 400–700. Reading, forms, buttons.
• Mono: Cascadia Code, 400–600. Pay, rosters, labels, dates.

The signature move: the lit words get a highlighter. Green words with a yellow marker swiped in underneath, slightly tilted, the way you'd mark the line on a CV that matters.

Layout

• Frame: a 1200px wrap with a max(20px, 4vw) gutter. An ink top line with a highlighter label; a sticky header with the ticked-box mark; a fanned stack of CVs behind the hero.
• Hero: copy on the left, which stays with you as you scroll down the board on wide screens; the job board on the right.
• Then: the pay calculator beside its heading; the tracker with two notices; the hiring brief with two notices; questions; and a dark closing card with a box that ticks itself.

Shape

• Friendly-crisp: --r-s 8px, --r-m 14px, --r-l 22px.
• Paper and ticks: the mark, the CV stack behind the hero, the sheet in each page head, the save boxes and the closing tick are drawn in CSS. No images needed.

Motion language

• Swipe: the highlighter swipes in under the lit words.
• Board and tools: jobs lift on hover, saved jobs get a green edge and a tick, the year figure and totals tick in when they change, and the current step's stripes move.
• Elsewhere: the CV stack settles behind the hero, the closing box draws its tick, the mark re-ticks on hover, and sections reveal with a rise.
• 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.
• After hours switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

Your own office, sites and team, with permission, and real workplaces you place people in when the employer agrees. The template draws its paper and ticks in CSS, so nothing is borrowed. No stock handshakes, no "diverse team high-fiving around a laptop", and no client logos without written permission.

Signature components

• Job board: .jobs[data-jobs] with script[data-jb-data] (key for the saved list), containing [data-jb-q], a [data-jb-type] segmented control, select[data-jb-loc], input[data-jb-min] with [data-jb-min-out], [data-jb-count], [data-jb-saved], .job cards (data-id, data-type, data-loc, data-min, data-max, data-unit hour or year) with button[data-save], and .jb-none. Hourly jobs are compared at 38 hours a week. Saved jobs are kept for the tab.
• Pay calculator: .paycalc[data-paycalc] with [data-pc-amount], a [data-pc-type] segmented control (hour or year), [data-pc-hours] with [data-pc-hours-out], [data-pc-casual], [data-pc-incl], outputs [data-pc-out] (hour, week, fortnight, year, super, package), [data-pc-unit] and [data-pc-note]. Super is 12%; casual loading 25%.
• Application tracker: .tracker[data-tracker] with .app cards (data-id, data-employer), each with .steps (li.done, li.now), .next, an optional .switch[role=switch][data-consent] and button[data-withdraw], plus [data-tk-msg].
• Hiring brief: .brief[data-brief] with script[data-br-data] (permFee, guarantee, margin, payrollTax, workcover, sameJob), a [data-br-kind] segmented control (perm or temp), .br-part[data-part], ranges input[data-br] (salary, rate, hours, weeks) with [data-br-out], input[data-br="people"], [data-br-lines], [data-br-total], [data-br-total-lab] and [data-br-sub]. Payroll tax and WorkCover default to Queensland's.
• Supporting pieces: .pay (a pay chip), .plan-pair, .facts (--n columns, or .stack), .notice, .side-box, .checks, .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 soft pill.
• Inner pages: .page-head (a sheet with a highlighted line), .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: jobs (shown, saved), paycalc (hour, year, super), tracker (consent or withdrawn), brief (kind, total).
• Helper: Shortlist.refresh(root), and Shortlist.last, the latest detail of each event, for scripts that load afterwards.

Recruitment: what we build in

We checked these for Australian agencies and employers in October 2026:

• Job ads: since 7 January 2023, ads can't show pay that would break the Fair Work Act or an award, and piece rates must say the minimum. So every job shows a range, super is stated as on top, and nothing goes up below the award.
• Pay secrecy: since 7 December 2022, employees can share or ask about their pay, and new contracts can't stop them.
• Labour hire licensing: Queensland, Victoria, South Australia and the ACT license labour hire providers. Hosts must use licensed providers, there's a public register, and Queensland licensees report every six months. The licence number sits in the footer.
• Same job, same pay: when the Fair Work Commission makes a regulated labour hire arrangement order, labour hire workers get at least the host's rate. Orders generally don't cover arrangements of three months or less, or small business hosts.
• Casuals: a 25% loading under most awards, and the employee choice pathway to become permanent after six months (twelve with a small business).
• Trials: trial shifts are paid, apart from a short, supervised demonstration of a skill.
• Privacy and consent: a candidate's details go to each employer only with their OK, and checks (references, medicals, police checks) only after telling them.
• Super: the guarantee is 12% of ordinary time earnings, from 1 July 2025.

These notes are design guidance, not legal advice.

• Pay secrecy, job ads and flexible work (Fair Work Ombudsman)
• Labour hire licensing laws (Labour Hire Licensing Queensland)
• Same job, same pay orders one year on (Lander & Rogers)
• Casual conversion: latest changes (HWL Ebsworth)
• Unpaid work (Fair Work Ombudsman)

Do and don't

• Do show pay on every job, as a real range.
• Do ask before a CV goes anywhere, every time.
• Do price the employer's side line by line before they sign.
• Don't write "competitive salary", or advertise below the award.
• Don't publish placement counts, success rates or testimonials you can't stand behind.
• Don't put text on the highlighter in anything but ink.

Accessibility

• AA contrast throughout (measured above), a skip link and a 3px focus ring.
• Board: a labelled search, a segmented control with aria-pressed, a labelled select and slider; the job count is announced; save buttons are toggle buttons that say "Saved".
• Calculator: labelled inputs; every figure is text; the note explains loading and super in words.
• Tracker: steps are text (on phones only the current one is shown, the rest still read out); the consent switch is a labelled role=switch; results are announced.
• Brief: labelled sliders with their values in text; the total is announced.
• Testing: responsive to 360px, and tested with motion on and off, in Office hours and After hours.

How to make it yours