Style guide,
for whoever edits next.
Every colour and text on the site comes from the styles on this page. Change a style and the site follows.
Start here
Seven steps, in this order.
1
Rename the studio
The name is typed in the Navigation component (the wordmark), in the footer of the Site layout template (copyright, email and credit), and in each page’s title under page settings.
2
Set the accent
Assets, Styles: give Accent and Rule node your colour, and Accent tint a pale version of it. Three ready palettes are further down this page.
3
Change the type
Headings use Inter Display and text uses Inter. Open a text style to change its font. Tablet and phone sizes are stored inside each style, so check all three.
4
Replace the work
CMS, Work: each item is a film or a short. Give it a Cover, a Wide picture if it is a film, and a Clip if you have one. Turn Featured on for the shorts in the home wheel. The wheel needs at least thirteen.
5
Fill the other collections
Services, Plans, Reviews, Questions, Journal, Team, Month and Legal. The table at the foot of this page says where each one shows.
6
Connect the form
On the Contact page, select the form and choose where it sends under Send to. Until you do, it sends nowhere.
7
Before you publish
Add the site title, description, favicon and social image in Site settings. Then take the Style guide link out of the footer and delete this page, or keep both.
Colours
One accent, used sparingly.
Page
#FFFFFF
Page background
Surface
#F4F5F7
Bands behind Reviews and Plans, form fields
Panel
#E8EBEF
Behind pictures while they load
Card
#FFFFFF
Card fill
Ink
#101317
Headings, the footer card
Body
#4A525E
Paragraphs
Quiet
#5F6875
Meta lines and labels
Soft
#858E9B
Second line of a two-tone heading
Accent
#DA3718
Buttons, tags, the featured plan
Accent tint
#FBE7E2
Tag pills, the box behind the featured plan
Rule node
#DA3718
Rings at the ends of section rules
Line
Ink at 12%
Hairlines and page rules
Card edge
Ink at 7%
Card outline
On ink
#FFFFFF
Text on Ink and on Accent
On ink soft
White at 72%
Quieter text on Ink
Line on ink
White at 14%
Hairlines on the footer card
Nav glass
White at 58%
Navigation chips, over a background blur
Glass edge
White at 72%
Light edge on the navigation chips
Unlit
#C6CBD3
Words not yet lit in the Home paragraph
Other palettes
Values to copy into the accent styles.
Cobalt
Accent and Rule node: #2447E0
Accent tint: #E4E9FC
White button text on it: 6.9 to 1
Evergreen
Accent and Rule node: #14784F
Accent tint: #DFF1E8
White button text on it: 5.5 to 1
Graphite
Accent and Rule node: #23272E
Accent tint: #E8EBEF
White button text on it: 15.0 to 1
Type
Inter Display and Inter.
Display
Inter Display 500. 92, 72, 46px. The home title only.
Video people watch twice.
Page title
Inter Display 500. 60, 48, 34px. The title of every other page.
Films and shorts.
Display 2
Inter Display 500. 60, 48, 34px. Section headings, second line in Soft.
Got something worth a rerun?
Big line
Inter Display 500. 92, 64, 38px. The Next line that ends a detail page.
Next
Figure
Inter Display 500. 52, 46, 42px. One number at a time.
1.2M views
Menu link
Inter Display 500. 34, 34, 30px. The phone menu.
Services
Heading
Inter Display 500. 30, 28, 24px. Card titles.
Six weeks at Lowtide
Article heading
Inter Display 500, 30px. Headings inside journal posts and legal pages.
What we check before a shoot
Article subheading
Inter 600, 20px. Subheadings inside journal posts and legal pages.
On the day
Title
Inter 600. 20, 19, 18px. Rows and questions.
How fast is the first batch?
Price
Inter 600. 20, 19, 18px. Prices on plans and services.
$6,900
Lead
Inter 400. 20, 19, 18px. Intros.
Brand films, ads and forty shorts a month for consumer brands.
Body
Inter 400. 17, 17, 16px.
Ten shorts land the Thursday after your shoot day.
Small
Inter 400, 15px. Dates and side notes.
4 November 2026
Wordmark
Inter Display 600, 18px. The name in the navigation.
Rerun
Nav
Inter 500, 15px. Navigation and text links.
Journal
Button
Inter 500, 15px, On ink. Inside buttons only.
Start a project
Card title
Inter 600, 15px. Names on cards and form labels.
Morning Pour
Card meta
Inter 500, 13px. The line under a card title.
0:24, watched 3.1 times
Tag
Inter 500, 13px, Accent. Tag pills.
Most booked
Label
Inter 500, 13px. Footer and small labels.
© 2026 Rerun Studio
Caption strong
Inter 600, 13px. Times and counts on pictures.
0:07
Caption
Inter 400, 13px. Picture captions.
From a shoot day at Lowtide Strength.
Components
The same on every page.
Button
Variants Default and Small
Label and Link are set on each instance. One filled button per screen; everything else that links is a text link, or a card or line that fades on hover.
Send button
Variants Default, Sending, Sent and Error
The Contact form’s own button. Framer switches the variant while the form sends. Edit the wording inside the component.
Navigation
Variants Desktop, Phone and Phone open
It sits in the Site layout template, so it is on every page. Edit the wordmark and the links inside the component, in every variant.
Card
White, soft shadow, hairline edge
Radius 20 to 28. Pictures sit inside with a 10px margin and their own radius of 18. A table is one card with hairlines between its rows.
Line
A ruled row with a picture chip
For rows that link: the home Results, and the Next line that ends a work, service or journal page. The chip opens on hover on desktop. A results row keeps Chip and Client in a group named Lead; a Next line keeps a Spacer after its title. Both hold the row’s height.
Form field
Surface fill, 12px radius
Card edge outline, Ink outline on focus, labels in Card title. Used on the Contact page for text fields, the select and the message box.
Code
Eleven files. Change their controls, not the code.
Hero.tsx
Home, hero
Three overrides. withWheel lays the featured shorts out as a fan and turns it with the scroll. withHeroScreen keeps the hero one window tall and draws the editing marks; the cursor’s name is the EDITOR line at the top of the file. withHeroTrack sets the scroll length.
Clip.tsx
Shorts in the home wheel and on Work
Plays a Work item’s Clip. Controls: Clip, Play in front, Play on hover, Play in view, Radius.
Photo.tsx
Pictures across the site
A picture on a soft ground while it loads. Controls: Image, Alt text, Radius, Focus X, Focus Y, Ground, First screen.
Pitch.tsx
Home, under the hero
The paragraph that lights up word by word. Controls: Text, Chips, Font family, Largest size, Smallest size, Lit, Unlit, Chip ground.
Rail.tsx
Films and Reviews rails
withRail makes a list drag and snap; withRailNext and withRailPrev go on its arrow buttons. withUnpinOnPhone releases a pinned side heading on phones.
PlayShort.tsx
Home, after the films
One short, scrubbed by the scroll. Controls: Clip, First frame, Client, Title, Length, Beats, Heading, Scroll length, then fonts and colours.
Accordion.tsx
Questions lists
withAccordion keeps one answer open at a time, the first on load. The item needs layers named Ask and Answer.
FlyThrough.tsx
Home, last scene
Shorts fly past and land on the closing line. Controls: Shorts, Heading, Button label, Link, Scroll length, then fonts and colours.
Replay.tsx
Footer
The ring fills as the page scrolls; a click runs back to the top. Controls: Label, Ring, Rail, Arrow, Weight, Run time.
Chapters.tsx
Footer
The page as a time bar, with one mark per Scroll Section on the current page. Controls: First mark, Font family, Accent, Rail, Ink, Soft, Mark gap.
NextLine.tsx
Home Results, Next lines
withRowLine and withNextLine open the picture chip and move the arrow on hover or keyboard focus.
Collections
Nine, and where each one shows.
Work
19 items
Films and shorts. Home: the wheel (shorts with Featured on), Selected films and Results. The Work page, and a page for each item.
Services
5 items
The service rows on Home and Services, and a page for each service.
Plans
3 items
The price cards on Home and Services. The plan with a Tag is the featured one; its Note shows under the card.
Reviews
4 items
The reviews rail on Home and Studio.
Questions
6 items
The accordion on Home, Services and Contact.
Journal
6 items
The three latest notes on Home, the Journal page, and a page for each post.
Team
6 items
Who you’ll meet on set, on Studio.
Month
4 items
How a month runs, on Studio.
Legal
2 items
Privacy and Terms, linked from the footer.
Example sections
Three from Home, to copy when you add a page.
Plans is a row of cards, Results is a list of lines and Questions is an accordion. All three read from the CMS, so they fill themselves wherever you paste them.
Three ways
to book us.
Prices in US dollars. No contracts longer than three months.
Shorts
For brands that need to post most days.
$3,600
a month
One shoot day a month
Forty shorts, captioned
Three sizes for each app
Two rounds of notes
A folder every Thursday
Film and shorts
Most booked
A new film each quarter and shorts in between.
$6,900
a month
Everything in Shorts
A brand film or ad set each quarter
Two shoot days a month
A numbers call every month
Raw footage on a drive
Booked about six weeks ahead
Launch
For a product or a shop that opens on a date.
$14,500
once
One brand film
Three ads in three lengths
Sixty shorts over six weeks
A posting plan for launch day
Raw footage on a drive
Questions
we get every week.
How fast is the first batch?
Ten shorts land the Thursday after your shoot day. The other thirty follow over the next three weeks.
Do we need to be on camera?
No. About half our clients never appear. Hands, product and place carry most shorts.
Who owns the footage?
You do. Every project ends with a drive of the raw files and the finished cuts.
Can you work with footage we already have?
Yes. Cut-downs start from your existing film or a phone folder, and we tell you honestly what is usable.
Where do you shoot?
San Diego and Los Angeles without travel costs. Anywhere else in the US with two weeks of notice.
What if a short flops?
Some will. We read the numbers each month, drop what is not working and make more of what is.