Primer

Best for

• Course providers, tutors and online schools. Short courses, bootcamps, cohort courses and self-paced ones. It's written to the recognition, refund and accessibility expectations (see "Courses: what we build in").
• Anyone who teaches in sessions and takes enrolments:
  • music schools (Keys & Co: a term lesson by lesson, groups of four, a keyboard to borrow)
  • driving schools (Clearway: a ten-lesson package, start weeks by instructor, the learner-hours reality)
  • swim schools, language schools, coaching, workshops, community education
• Audiences: adults deciding whether a course is worth their time and money, and people who need to know it'll work for them before they pay.

Less suited to: a school's whole website (newsletters, uniforms and the canteen), a university, or a creator's video library (Cue).

Personality and voice

Clear and encouraging, like a good teacher on the first day, and straight about what the course is and isn't.

• Headlines: "Do your own books, without the dread." · "Dates and fees, all of them." · "An honest answer."
• Buttons: "See dates and fees" · "Is it for me?" · "Enrol for 9 November, $690"
• Microcopy:
  • "At 2 hours a week, about 4 weeks: starting Monday 9 November, finishing around 7 December."
  • "Full refund until Monday 23 November (14 days after you start)."
  • "Not yet. Here's what would help first."
• Words to avoid: "accredited" or "certified" for a course that isn't, job or salary guarantees, "only 2 places left!" when it isn't true, and hidden instalment fees.

Colour

Measured contrast (WCAG).

• Day:
  • ink on paper 17.0:1
  • muted on paper 6.0:1 (5.6:1 on well)
  • cobalt on paper 8.7:1 (8.0:1 on well, 7.4:1 on its soft fill), white on cobalt 9.0:1
  • ink on highlighter 13.6:1; highlighter text 5.9:1
  • alert on paper 6.3:1
• Night study:
  • ink 16.1:1
  • muted 7.4:1 (6.7:1 on card)
  • cobalt 9.0:1, text on cobalt 8.4:1, cobalt on its soft fill 7.5:1
  • highlighter 14.8:1, alert 9.0:1
• Example dials: plum (Keys & Co), road green (Clearway) and tomato (Northside) all meet AA, and so does each closing card.

Typography

• Display: Literata, 500–800 with italics. Made for long reading on screens; headlines, module names, fees.
• Body: Inclusive Sans, 300–700. Designed for legibility, with distinct letterforms.
• Mono: Roboto Mono, 400–600. Minutes, dates, places left.

The signature move: the lit words in the headline get a highlighter stroke swept across them, as if someone marked the bit that matters.

Layout

• Frame: a 1200px wrap with a max(20px, 4vw) gutter. An ink top line with a highlighter label for the next intake; a sticky header with the book mark; faint ruled lines, like an exercise book, in the hero.
• Hero: copy on the left; the course outline on the right.
• Then: intakes beside the fee planner; the fit check; support; straight answers; and a deep closing card ruled like a page, with a highlighter stroke sweeping across.

Shape

• Friendly: --r-s 8px, --r-m 12px, --r-l 20px.
• Intakes: a little calendar leaf with the month in red and the day in Literata.
• The mark: an open book with a highlighter bookmark.

Motion language

• Outline: modules open in place; the plus turns to a cross.
• Fee planner: the schedule's rows step in when the plan or intake changes.
• Fit check: the score fills like a highlighter.
• Elsewhere: the highlighter sweeps across the headline, the closing card's stroke sweeps, 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 sweeps, steps and fills.
• Night study switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

Real photos of real classes and real student work, with permission. The template uses the outline itself as the picture. No invented testimonials, completion rates or job outcomes.

Signature components

• Outline: .outline[data-outline][data-for="<intakes id>"][data-max-useful], containing:
  • [data-outline-total], and either .pace with input[data-pace] and [data-pace-result], or a plain .pace paragraph for cohort courses
  • .modules > .module, each with button.mod-head[aria-controls] and .mod-body (.can, then .lessons > li[data-mins][data-count] with .kind.video|reading|practice|live|quiz)
• Intakes: .intakes[data-intakes] (with an id) holding button.intake with data-date, data-name, data-mode, data-cap and data-places.
• Fee planner: .fees[data-fees][data-for] with data-total, data-instalments, data-every, data-refund-days, data-refund-pct and optional data-refund-text, containing [data-fees-for], [data-plan="full"|"split"], [data-schedule], [data-fee-total], [data-refund], .recog (.yes when nationally recognised) and [data-fees-go].
• Fit check: form.fit[data-fit] (optional data-yes, data-maybe, data-no) with fieldset[data-q][data-tip] radios valued 0, 1 or 2, and [data-fit-out].
• Supporting pieces: .enrol-grid, .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 cobalt-soft pill.
• Inner pages: .page-head (ruled lines on the right), .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: intake (date, mode), pace (hours, weeks, finish), fees (plan, total, today), fit (answered, score).
• Helper: Primer.refresh(root).

Courses: what we build in

We checked these for Australian course providers in October 2026:

• Recognised or not, said plainly. Registered training organisations must show their RTO code and the code and title of nationally recognised courses, and everyone must clearly distinguish nationally recognised training from other training (ASQA, Standards for RTOs 2025). A provider that isn't an RTO says its courses aren't nationally recognised, on the fees and at enrolment, and the fit check sends people who want a qualification to an RTO.
• Refunds and consumer law. Refund terms are given as dates for the student's own intake, and consumer guarantees apply whatever the policy says. Cancelling is online, and instalments stop straight away (the ACCC has acted against providers that made cancelling hard).
• No pressure, no false outcomes. Places left are real; no job or salary guarantees; marketing email is optional and unticked.
• Accessible learning. Captions edited by people, transcripts, keyboard and screen reader support, no timed quizzes, and adjustments on request.

These notes are design guidance, not legal advice.

• Practice guide: information and transparency (ASQA)
• Shaw Academy to refund students over difficulty cancelling (iTWire)

Do and don't

• Do show every lesson's time, and the totals from them.
• Do say whether a course is nationally recognised, every time fees are shown.
• Do tell people when a course isn't right for them yet.
• Don't charge more for instalments without saying so up front.
• Don't invent completion rates, testimonials or job outcomes.
• Don't use the highlighter for anything but emphasis and fills.

Accessibility

• AA contrast throughout (measured above), a skip link and a 3px focus ring.
• Outline: modules are disclosure buttons; the pace slider is labelled and its result announced.
• Intakes: toggle buttons whose text says the date, the group and the mode; full intakes are disabled with the reason in words.
• Fee planner: the schedule and refund date are announced politely; the button names the date and the amount.
• Fit check: real radio groups with legends; the verdict is announced.
• Forms: labelled fields, errors listed in an alert, linked to and marked on each field.
• Testing: responsive to 360px, and tested with motion on and off, in Day and Night study.

How to make it yours