Style guide.
How to make Rewound yours.
Everything on the site reads from colour styles, text styles and seven CMS collections. Change those and the pages follow. This page is hidden from search; delete it when you launch.
Setup.
Six things to change first.
1. The featured video
In the Videos collection, turn Featured on for one item. The hero player, its chapters, the three Most replayed moments, the frames and the results under the headline all read from it.
2. The rewind word
The hero headline is plain text. The Rewind bar finds the word set in its Word control and turns it into a progress bar; keep that word in Line 1 of the headline.
3. Colour
Change Accent (fills: progress bars, playheads) and Accent text (links, timestamps). Every code component reads these styles.
4. Type
Text styles use Roboto Flex. Code components name the font once in Rw.tsx and ReplayPlayer.tsx (FONT); change it there to match.
5. Forms
Select the contact form and the notifications forms and add an email or webhook destination. Until then they send nothing.
6. Upload day
The premiere countdown counts to a weekday, hour and time zone set on the Countdown component. The Upload schedule month and time are controls on the Schedule component.
Colour.
Twelve styles, one accent.
Page
#FFFFFF
Surface
#F5F5F7
Surface 2
#EDEDF0
Line
#E5E5EA
Ink
#1D1D1F
Soft
#6E6E73
Display soft
#86868B
Muted
#AEAEB2
Accent
#E5402D
Accent text
#D2352A
Player
#0C0C0D
Menu glass
22 22 24 / 88%
Other accents to paste into Accent and Accent text: Signal blue #2F66F5 and #2558D9 · Moss #3E8E5A and #2F7448 · Plum #8E44AD and #7A3A96 · Ink only #1D1D1F for both.
Type.
Roboto Flex, two weights.
Hero
68 / 52 / 40 px
People rewind the parts we cut.
Page title
64 / 50 / 40 px
Services.
Display
54 / 42 / 34 px
Every setting, already set.
Case title
44 / 38 / 32 px
Building a tool chest from one sheet of plywood
Figure
48 / 42 / 36 px
9:48
Heading
26 / 24 / 22 px
Cut and pace
Title
20 / 19 / 18 px
How fast do edits come back?
Lead
18 / 17 / 16 px
We edit long-form YouTube for creators who post every week.
Prose
17 px
Average view duration went from 5:44 to 9:48 over the next ten uploads.
Body
16 px
Upload to the folder we set up for your channel.
Small
14.5 / 14 px
Edited in Chicago, for channels anywhere.
Label
13.5 / 13 px
6 min read
Components.
What each one does, and where to edit it.
Replay player
The hero player. Chapters, three Most replayed moments and their frames come from the featured Videos item. Drive: Hero scroll in the hero, On view on case pages. Details shows the title row under it; Moments list adds the three moments as rows.
Rewind bar
Turns one headline word into a progress bar that slides back to the top moment. Word and Headline layer are controls.
Subscriber counter
Rolls from Subscribers before to Subscribers now (Videos collection).
First thirty
The opening of one video, shot by shot. Set up to five photos, each with its start time (m:ss) and one line; clear a photo and its line to drop a shot. On Desktop the section pins (260vh, sticky Inner) and the playhead follows the scroll; on Tablet it plays once in view; on Phone each row lands as it scrolls in. Result and Before are typed.
Preview thumbnail
Work rows. Still plus three frames; plays a preview when the row is hovered.
Settings player and Setting row
The settings menu section. Rows come from the Services collection (Kind decides what changes in the picture).
Upload dialog
The process section: the video on the left and four steps that tick off once it is in view. Element and check names, date and time are text controls.
Realtime
The 48-hour card: view count, ticking rate and the video it shows. Bars sets the bar colour; the latest hour uses Accent.
Preloader
The cut: a clip on a timeline, the playhead cuts it and the page opens through the cut. In the Site layout template, above everything. Under a second, once per visit, skipped for reduced motion. Time, Once a visit and Clip frame are controls.
Plan chip and Upload schedule
Plans collection chips fill the month on the schedule with that many uploads.
Comment
Reviews as comments. Times like 4:12 in the text turn into coloured timestamps.
Premiere countdown
Counts to the next upload slot: weekday, hour, minute and time zone.
Share bar, Question, Button, Submit button, Navigation
Canvas and code pieces used across the pages. Button and Submit button copy the navigation button.
Collections.
Seven of them, ten allowed.
Videos
Channels and case studies: hero (Featured), Channels, Work rows, case pages, Where it worked.
Services
The settings menu, the Services page, service pages.
Plans
Plan chips and the Upload schedule.
Reviews
Comments on the home page.
Questions
Questions on the home and Services pages.
Journal
The playlist, the Journal page and note pages.
Team
The editors on the Studio page.