Cue

Best for

• Video creators. Cooking, tech, travel, how-to, education and vlog channels with their own site. It's written to the advertising disclosure and caption expectations (see "Creators: what we build in").
• Anyone who publishes video and wants it findable:
  • tech reviews (Pixel Bench: reviews never sponsored, affiliate links marked)
  • travel and outdoors (Trailhead: gifted gear marked, safety notes)
  • course libraries, webinar archives, church and community media, podcasts with video
• Audiences: viewers who want to find the step they need, watch with the sound off, or know who paid.

Less suited to: a film or TV streaming catalogue (a streaming style), a news site (Masthead), or a single promo video on a business site (any style with an embed).

Personality and voice

Bold and friendly, like the creator talking to camera, and upfront about money.

• Headlines: "Cook it with me." · "Every word, searchable." · "How brand deals work here."
• Buttons: "Watch the latest" · "Become a member" · "Send enquiry"
• Microcopy:
  • "This video includes a paid partnership with Copperline."
  • "2 lines mention 'grams'"
  • "If I earn from a link, it says so next to the link."
• Words to avoid: "#sp" or "#collab" instead of a clear label, "honest review" on anything paid for, and "link in bio" for disclosures.

Colour

Measured contrast (WCAG).

• Studio:
  • ink on paper 17.7:1
  • muted on paper 6.3:1
  • hot on paper 6.4:1 (5.8:1 on well, 5.5:1 on its soft fill), white on hot 6.7:1
  • ink on sun 13.0:1
  • captions: white on near-black 18:1 or more
• Screening:
  • ink 17.0:1
  • muted 7.3:1 (6.8:1 on card)
  • hot 8.8:1, text on hot 8.5:1, hot on its soft fill 7.8:1
  • ink on sun 10.4:1
• Example dials on paper (light / dark): electric blue (Pixel Bench), forest green (Trailhead) and rust orange (Rust & Revival) all meet AA as text and behind white or dark button text.

Typography

• Display: Unbounded, 500–800. Headlines, video titles, thumbnail words, prices.
• Body: Manrope, 400–800. Reading, captions, buttons.
• Mono: JetBrains Mono, 500–600. Timecodes, durations, labels.

The signature move: the lit words turn hot pink with a playhead under them that plays through on load.

Layout

• Frame: a 1200px wrap with a max(20px, 4vw) gutter. An ink top line carries a sun pill for the newest video; the header is sticky with the play-button mark.
• Hero: copy on the left; the player on the right, with the title and its meta (views, date, partnership) under it.
• Then: the transcript beside chapters, the partnership note and the recipe or notes; the video wall; series; memberships; how brand deals work; an ink closing card with a scrubber playing along the bottom.
• Watch page: the player, title, partnership and description on the left; chapters, transcript and up next on the right.

Shape

• Rounded: --r-s 10px, --r-m 16px, --r-l 24px; buttons are pills.
• The player: a near-black frame with a rounded screen, a 6px scrubber with chapter gaps, and caption boxes with 4px corners.
• Thumbnails: drawn scenes in each video's hue with a big word, never stock photos or faces you don't have permission to use.
• The mark: a rounded play button with a progress bar under it.

Motion language

• Player: the big play button shrinks away; the scene pans and shifts hue by chapter as it plays; the partnership note fades after the first seconds.
• Transcript: the current line lights up; the box scrolls itself (never the page), and pauses following for a few seconds after you scroll or search.
• Wall: filtering and sorting slide cards to their new places (FLIP); thumbnails lift on hover.
• Elsewhere: the headline's playhead plays through on load, the closing card's scrubber loops, 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 slides, playhead and loops; the player still plays.
• Screening switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

In a real build the player holds your own videos (YouTube, Vimeo, Mux or your host). The template simulates playback with a drawn scene so it works without a video file. Use your own thumbnails; keep the badges.

Signature components

• Player: .player[data-player][data-duration] with script[type="application/json"][data-cues], which holds {cues, chapters, hue}, where cues are [start, end, text] and chapters are [start, title]. Inside:
  • .screen with .scene-title, .paid-note[data-paid-for], .caption and .bigplay
  • .controls with .scrub-wrap, input.scrub, .ticks, button.pp, .time, .chapter-now, button[data-cc], select[data-cap-size] and select[data-speed]
• Transcript: .transcript[data-transcript="#player"] with input[type=search], .count and .lines > button[data-t], where each line is a span timecode plus span.txt.
• Chapters: .chapters[data-chapters="#player"] > button[data-t].
• Video wall: .vgrid[data-vgrid], containing:
  • .seg > button[data-series] and .seg > button[data-vsort]
  • [data-vgrid-count] and .none
  • .vwall > a.vcard[data-series][data-age][data-views], each with .thumb[data-word] (.badge, .badge.paid, .dur and .bar) and b + small
• Supporting pieces: .partner, .tiers > .tier(.pick), .card, .person, .facts, .notice, .side-box, .watch with .watch-side, .vtitle with .vmeta, 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 hot-soft pill.
• Inner pages: .page-head (with a playhead 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: cue (t, chapter, line), play, pause, videos (series, sort, shown).
• Helpers: Cue.refresh(root), Cue.time(seconds), and on a player element cueSeek(t), cueNow() and cuePlay().

Creators: what we build in

We checked these for Australian creators in October 2026:

• Disclose brand arrangements clearly. Under the AANA Code of Ethics, advertising must be clearly distinguishable, and Ad Standards' guidance for influencers says any brand arrangement, including gifted products, should be disclosed. Hashtags mustn't be buried. For video it encourages written disclosure as well as spoken, since people watch with the sound off. The template says it at the start of the video, shows it on screen, marks the thumbnail, and repeats it under the video.
• Affiliate links marked. Every affiliate link is labelled next to the link, with a switch to hide them.
• Captions and transcripts. WCAG 2.2 requires captions for prerecorded video with sound (1.2.2, Level A). Every video has captions you can resize, and a full transcript as text.
• Memberships. Prices in AUD including GST, billing stated, and cancelling explained.

These notes are design guidance, not legal advice.

• Influencer marketing guide: disclosing ad content (Ad Standards)
• Distinguishable advertising (Ad Standards)

Do and don't

• Do caption every video, and publish the transcript as text.
• Do say "paid partnership" or "gifted" in the video, on the thumbnail and in the description.
• Do keep the transcript's scrolling inside its box.
• Don't use sun yellow for anything but partnerships and the current line.
• Don't autoplay with sound.
• Don't put captions on anything but near-black.

Accessibility

• AA contrast throughout (measured above), a skip link and a 3px focus ring (white inside the player).
• Player: every control is a labelled button or select; the scrubber says the time, total and chapter (aria-valuetext); k or Space plays and pauses; captions are visual (the transcript is the accessible text, so captions are aria-hidden); the caption and size choices are remembered.
• Transcript: each line is a button with its timecode; search results are announced; following pauses when you scroll.
• Wall: series and sort are toggle buttons, the count is announced, and badges are text.
• Testing: responsive to 360px, and tested with motion on and off, in Studio and Screening.

How to make it yours