Cadence

Best for

• Podcasts. It's written to the advertising code's rule that ads be clearly distinguishable, WCAG's transcript requirement for recorded audio, music licensing for podcasts and the Spam Act for the newsletter (see "Podcasting: what we build in").
• Anyone publishing recorded talk:
  • museums and galleries with audio tours (Salt & Timber: a stop for each exhibit, and every word written out)
  • libraries, councils and universities with recorded talks (Tuesday Talks: a talk for the time you've got)
  • churches, radio stations, audiobook narrators, course creators
• Audiences: commuters with a set number of minutes, people who'd rather read than listen, and sponsors who want to know exactly what they're buying.

Less suited to: a music label (Needle), a video creator (Cue), or TV and film streaming (Reel).

Personality and voice

Warm and candid, the host who tells you when something is an ad.

• Headlines: "Long conversations, worth the time." · "Got twenty minutes? Here's one." · "Sponsor an episode, out loud."
• Buttons: "Play the latest" · "Play here" · "Find an episode"
• Microcopy:
  • "3 episodes fit in 30 minutes"
  • "1 line mentions “money”. Pick a time to play from there."
  • "In the chapters and transcript: Ad · Your brand"
• Words to avoid: "number one podcast", "millions of listeners", invented chart positions or reviews, "native content", and anything that blurs an ad into a recommendation.

Colour

Measured contrast (WCAG).

• Studio:
  • ink on paper 16.5:1
  • muted on paper 6.2:1 (5.5:1 on well)
  • cobalt on paper 7.1:1 (6.4:1 on well, 6.5:1 on its soft fill), white on cobalt 7.9:1
  • ink on lime 14.7:1; cobalt on lime 6.3:1 (the lit words over the meter); lime ink 6.8:1 (6.9:1 on its soft fill)
  • ok 6.5:1, alert 6.5:1
• Late night:
  • ink 16.6:1
  • muted 7.3:1 (6.6:1 on card)
  • cobalt 9.5:1 (8.7:1 on card), text on cobalt 8.9:1, cobalt on its soft fill 7.9:1
  • lime 15.2:1 (11.7:1 on its soft fill)
  • ok 9.8:1, alert 8.4:1
• Closing card: text 16.3:1, body 11.9:1, lime em 14.7:1, ink on its lime button 14.7:1.
• Example dials: ochre (Salt & Timber, white on ochre 7.1:1), berry (Tuesday Talks, 8.8:1) and paddock green with wheat (Paddock Talk, 8.1:1; green on wheat 5.1:1) all meet AA, light and dark, and so does each closing card.

Typography

• Display: Darker Grotesque, 800. Headlines, episode titles, the big total. Tall, tight and loud, like a show name on a mic flag.
• Body: Mona Sans, 400–800. Reading, transcripts, forms, buttons.
• Mono: Ubuntu Sans Mono, 400–600. Timestamps, chapters, rates.

The signature move: the lit words stand on a level meter. Lime bars rise in under them and keep moving, like a voice on the line.

Layout

• Frame: a 1200px wrap with a max(20px, 4vw) gutter. An ink top line with a lime "New" label; a sticky header with the level-bar mark; a band of waveform behind the hero that swells and settles.
• Hero: copy on the left; the player on the right.
• Then: the transcript beside its heading; the episode finder full width; the sponsor card beside how ads are labelled; questions; and a dark closing card with a strip of waveform that keeps playing.

Shape

• Rounded: --r-s 10px, --r-m 16px, --r-l 26px, round play button.
• Bars: level bars drawn in CSS for the mark, the tag, the cover art, the hero band, the page heads and the closing card, and an on-air light in each page head. No images needed.

Motion language

• Meter: the lit words' bars rise in and keep moving.
• Player: the play button morphs from a triangle to two bars, the played waveform fills with cobalt, and a lime ring glows while it plays.
• Elsewhere: the hero band swells, the page-head on-air light pulses, the closing card's waveform plays, episodes lift on hover, the sponsor total slides in when it changes, 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 the meter, the band, the light, the waveform and the slides; the player still plays.
• Late night switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

Your own cover art, and photos of your hosts and studio. The template draws its cover art and waveforms in CSS, so nothing is borrowed. No stock microphones on a pink backdrop, no guest photos without permission, and no review screenshots or chart badges you can't stand behind.

Signature components

• Player: .player[data-player] with an id and script[data-player-data] (title, show, duration in seconds, chapters as [seconds, title, isAd], seed for the waveform, optional start), containing [data-wave] (a slider), [data-play], [data-skip] buttons, a [data-speed] segmented control, [data-pl-now], [data-pl-left], [data-pl-chap], [data-pl-title], [data-pl-show] and ol[data-chapters]. It runs on a timer in a demo; connect it to an <audio> element from your podcast host in production.
• Transcript: .transcript[data-transcript] with data-for (the player's id) and data-title (its episode), containing input[data-tr-q], [data-tr-count], input[data-tr-follow], [data-tr-other] and [data-tr-body] with .tr-line[data-t] lines (.tr-t button, speaker in b, words in .tr-say; add .tr-ad for sponsor lines).
• Episode finder: .episodes[data-episodes] with optional data-for (a player's id) and data-noun ("talk|talks"), containing input[data-ep-mins] with [data-ep-mins-out], [data-ep-topic] and [data-ep-sort] segmented controls, [data-ep-count], .ep-none, and .ep cards (data-no, data-mins, data-topic, and data-ep JSON for "Play here") with [data-fits] and [data-ep-play].
• Sponsor card: .sponsor[data-sponsor] with script[data-sponsor-data] (downloads, hostRead multiplier, host, show), containing input[data-sp-slot] radios (data-cpm, data-name), a [data-sp-kind] segmented control, input[data-sp-eps], input[data-sp-brand], [data-sp-lines], [data-sp-total], [data-sp-read] and [data-sp-label].
• Supporting pieces: .ad (the label), .plan-pair, .card, .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 waveform band and an on-air light), .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: player (id, title, t, playing, chapter, duration, ad), seek (for, t, play), episode (for, title, duration, chapters), episodes (shown, minutes, topic), sponsor (total, perEpisode, episodes, host).
• Helper: Cadence.refresh(root), and Cadence.last, the latest detail of each event, for scripts that load afterwards.

Podcasting: what we build in

We checked these for Australian podcasts in October 2026:

• Ads you can tell are ads. The AANA Code of Ethics says advertising must be clearly distinguishable as such, for every kind of advertising, and Ad Standards has found undisclosed sponsored content in breach. A host read sounds like a recommendation, so every sponsorship is said to be an ad, hatched in the waveform, labelled in the chapters and transcript, and named in the show notes; the sponsor card shows the label before anyone pays.
• Transcripts. WCAG 1.2.1 (Level A) asks for a text alternative to prerecorded audio. Every episode has a full, timestamped, searchable transcript, checked by a person.
• Music. The APRA AMCOS online mini licence covers musical works in podcasts that are no more than 80% music, from about $275 a year; commercial recordings need separate permission, and PPCA has no podcast licence. Show notes credit the music used and its licence.
• Sign-ups. The Spam Act needs consent, a clear sender and a working unsubscribe, so the newsletter box is unticked by default and says how to stop. Reading a listener's question on air is opt-in too, first name only.
• Numbers. Download figures are measured by the podcast host and shown as an example until the show's own number goes in. No invented audience sizes, chart positions or reviews.
• Corrections. Mistakes are corrected on the episode page with a note, and mentioned in the next episode, rather than quietly edited out.

These notes are design guidance, not legal advice.

• Distinguishable advertising (Ad Standards)
• AANA Code of Ethics
• Understanding WCAG 1.2.1: audio-only and video-only (W3C)
• Is the APRA mini-licence a way for podcasters to licence music? (Podnews)
• Podcasts (APRA AMCOS)

Do and don't

• Do label every sponsorship, out loud and on the page.
• Do publish a transcript with every episode.
• Do show what a sponsorship costs, and how it will sound, before anyone asks.
• Don't invent listener numbers, chart positions or reviews.
• Don't tick the newsletter box for people.
• Don't put text on lime in anything but ink, or cobalt at headline size.

Accessibility

• AA contrast throughout (measured above), a skip link and a 3px focus ring.
• Player: every control is a labelled button; the waveform is a slider that announces the time and chapter in words and moves with the arrow keys, Page Up and Down, Home and End; chapters are buttons and the current one is marked with aria-current.
• Transcript: timestamps are buttons labelled "Play from 1:15"; the search result count is announced; following along scrolls only the transcript, never the page, and can be switched off.
• Finder: filters are buttons with aria-pressed, and the count is announced; lengths are text, with the bar as decoration.
• Sponsor card: labelled radios, slider and field; the total is announced; ads are labelled in words, not only by hatching.
• 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 Studio and Late night.

How to make it yours