Reel

Best for

• TV and film streaming services. It's written to classification and subscription expectations (see "Screen: what we build in").
• Anyone who shows films or series to an audience they need to protect:
  • online film festivals (Short Fuse: a programme with ratings and festival passes that don't renew)
  • film archives (The Archive Room: restorations with cultural advice and a classroom profile)
  • broadcasters' catch-up sites, education video libraries, cinemas with on-demand
• Audiences: households sharing one account, parents setting limits, and viewers who need captions or audio description.

Less suited to: a single creator's channel (Cue), music (Needle), or a cinema's session times (Marquee).

Personality and voice

Cinematic, but plain-spoken about who should watch what.

• Headlines: "Something good, tonight." · "Who's watching?" · "Ratings, with reasons."
• Buttons: "Play" · "More info" · "Start watching" · "Save the PIN"
• Microcopy:
  • "MA15+ · Strong violence and coarse language"
  • "Riley sees titles up to M. 6 titles ask for the PIN."
  • "About 4 minutes of ads an hour. Renews monthly."
• Words to avoid: a rating without the advice, "suitable for all" on anything above G, and "free" for a trial without the date it ends.

Colour

Measured contrast (WCAG).

• Matinee:
  • ink on paper 17:1 or more
  • muted on paper 6.3:1
  • crimson on paper 7.2:1 (6.6:1 on well, 6.3:1 on its soft fill), white on crimson 7.8:1
• Late show:
  • ink 16:1 or more
  • muted 7.8:1 (7.2:1 on card)
  • crimson 7.9:1, text on crimson 7.2:1, crimson on its soft fill 6.7:1
• Badges: white on G 5.1:1, ink on PG 11.1:1, white on M 5.8:1, white on MA15+ 5.6:1, white on R18+ 18.7:1.
• Example dials: festival gold (Short Fuse), sepia (The Archive Room) and deep teal (Boxset) all meet AA.

Typography

• Display: Archivo, 500–900, widths 100–125. Headlines, titles on billboards and posters (uppercase, wide), prices.
• Body: Instrument Sans, 400–700. Reading, advice, buttons.
• Mono: DM Mono, 400–500. Kickers, run times, labels.

The signature move: the lit words turn crimson and a spotlight sweeps across them on load.

Layout

• Frame: a 1200px wrap with a max(20px, 4vw) gutter. An ink top line with a crimson pill; a sticky header with the film-reel mark.
• Hero: the headline, then the billboard full width.
• Then: "Who's watching?" (profiles and the level) beside its intro, then the shelves; ratings explained; access; plans; and an ink closing card with a strip of film running across the top.

Shape

• Rounded: --r-s 8px, --r-m 12px, --r-l 18px.
• Posters: drawn, 2:3 (or 16:9 for continue watching), with the rating in the corner and a progress line. Never use real key art without the rights.
• Profiles: rounded squares with an initial; the active one gets a crimson ring.
• The mark: a film reel.

Motion language

• Billboard: the scene drifts slowly; nothing plays with sound.
• Shelves: arrows scroll a page at a time; posters lift on hover and focus.
• Maturity: titles lock (greyed, with a padlock) or disappear as you change profile or level.
• Sheet and PIN: rise in as native dialogs.
• Elsewhere: the headline's spotlight sweeps, the closing card's film runs, 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 drift, sweep, lifts and film.
• Late show switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

Key art and stills belong to the studios: use them only with the rights. The template draws posters and scenes so nothing is borrowed, and never shows real actors.

Signature components

• Classification: .rate[data-r] with a b badge (G, PG, M, MA15+ or R18+) and the advice text; .ax > i for CC and AD.
• Billboard: .billboard, containing .scene[style=--h] and .billboard-copy, which holds .kicker, h2, .meta-row (.rate.on-screen and .ax), p, .btn-play[data-open-title] and .btn-line[data-open-title].
• Shelves: .shelf[data-shelf](.wide), containing:
  • .shelf-head with h3 and .shelf-arrows > button[data-dir]
  • .shelf-track, which holds button.tile[data-id][data-r][data-name], each with a .poster
  • .none
• Posters: .poster[data-word][style=--h] (.wide), containing .rate, .lock and .seen > i.
• Maturity: .maturity[data-maturity][data-scope], containing:
  • .profiles > button[data-profile][data-name][data-level][data-max], with data-kids on kids' profiles
  • .levels > button[data-level]
  • [data-maturity-out]
• PIN: dialog[data-pin][data-demo], containing [data-pin-title], .pin-boxes > input ×4, .err and [data-pin-cancel].
• Sheet: dialog.sheet[data-sheet], containing .sheet-hero (.scene, .sheet-close, [data-sheet-name]) and [data-sheet-body]. It's filled from script[type="application/json"][data-titles], keyed by id, with name, year, r, advice, blurb, hue, kind, ax and seasons.
• Supporting pieces: .advice, .eps with .ep, .ratings-key, .plans > .plan(.pick) with .renew, .card, .facts, .notice, .side-box, and .close-card (--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 crimson-soft pill.
• Inner pages: .page-head (a film strip along the bottom), .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: title (id, name), maturity (profile, level, locked, hidden).
• Helpers: Reel.refresh(root), Reel.open(id).

Screen: what we build in

We checked these for Australian streaming in October 2026:

• Classification with consumer advice. Every title shows its Australian classification (G, PG, M, MA15+, R18+) and the consumer advice in words, on the billboard, the poster and the sheet, before Play. The government's 2025 proposals to modernise the guidelines float changes such as a PG13-style category and MA15+ becoming MA16+; the badges are data, so new categories can be added when the rules change.
• Protecting children. Kids' profiles only ever show G and PG and never show ads; adult profiles can lock titles above a level behind a PIN, and leaving a kids' profile needs it too.
• Captions and audio description, marked before you press play, with caption styles you can choose (Boxset).
• Subscriptions. Prices including GST, ads per hour stated, the trial end date reminded, 30 days' notice of price changes, and online cancelling (the 2026 subscription-trap reforms; check the final law and start date).

These notes are design guidance, not legal advice.

• Update to modernise and harmonise the classification guidelines (Department of Infrastructure, 2025)
• Government targets hidden fees and subscription traps (Treasury ministers, February 2026)

Do and don't

• Do show the rating and the advice together, everywhere a title appears.
• Do hide, not just lock, anything above a kids' profile's level.
• Do mark captions and audio description before Play.
• Don't autoplay with sound.
• Don't change the classification badge colours to match a brand.
• Don't use studio key art without the rights.

Accessibility

• AA contrast throughout (measured above), a skip link and a 3px focus ring (white on the billboard).
• Tiles: real buttons whose label says the title and rating, and "locked: needs the PIN" when it does.
• Shelves: labelled lists; arrows say which row they move and disable at the ends.
• Profiles and levels: toggle buttons; the result is announced politely.
• PIN: a native dialog with four labelled digit fields that advance as you type, errors announced, three tries, and focus returned on close.
• Sheet: a native dialog labelled by the title; Escape closes it and focus returns.
• Testing: responsive to 360px, and tested with motion on and off, in Matinee and Late show.

How to make it yours