Style guide · not in the menu
This page is linked from the footer and hidden from search engines. Keep it while you edit, then delete it or leave it hidden.
Setup
Six steps, about an hour.
1. Colours
Assets → Colors. Page, Surface, Ink and Accent set most of the site; Frame is the black border around every panel. Change a style once and every page follows.
2. Type
Every text uses a text style. Swap Geist in each style for your typeface, then set the same font name in the Raw take and Short stage controls.
3. Headlines
Page headlines are the Raw take component. Put filler words in [square brackets]; they’re cut, one by one, when the page loads. The second line is the grey half.
4. Shorts
CMS → Shorts. Tick Featured to put a short in the hero card, which plays the Featured shorts in turn. Photo focus moves the crop across the photo.
5. Services, team, journal, legal
Each is a CMS collection with its own page. The legal pages are placeholder copy: replace them before you publish.
6. The form
Select the form on Contact and on the home page, and add a destination in the right panel. It sends nothing until you do.
Colours
Sixteen colour styles.
These are the ones you’ll see.
Page
#EFEFEC
Soft grey fills: tags, form fields, the line grid’s ground.
Surface
#FFFFFF
White panels and the sheets inside cards.
Sunk
#E5E5E1
The grey behind a photo while it loads (used by the code components).
Ink
#161512
Headlines, main text, and text on the accent.
Body
#5B5A55
Long paragraphs and articles.
Muted
#6B6964
Secondary text and captions.
Tone
#878580
Quiet labels, and the filler words before they’re cut.
Line
#D9D8D3
Hairlines between rows, outline buttons.
Accent
#F0590E
Headline second lines, buttons, the dot. Use sparingly.
Accent text
#C2410C
Small orange text on white (passes contrast).
On ink
#FFFFFF
Text on an ink surface.
Frame
#0B0B0A
The black frame round every panel, and the nav band.
On frame
#FFFFFF
Text and the wordmark on the frame.
On frame soft
#A09F99
Nav links and footer text on the frame.
Card
#F5F5F3
The grey shell of every card.
Card edge
rgba(22, 21, 18, 0.07)
The hairline round cards and sheets.
Type
Geist, in thirteen text styles. Sizes for desktop, tablet and phone.
Display
56 · 44 · 34 px · h2
Section and page titles (h2; h1 on CMS pages).
Five shorts a week.
Heading
24 · 22 · 20 px · h3
Card and row titles (h3).
The one cue that fixed my squats
Lead
18 · 17 · 16 px · p
Intro paragraphs under a title.
Film one take on Friday. Five shorts go out on Monday.
Body
16 px · p
Paragraphs and descriptions.
Short-form editing for founders, coaches and local brands.
Small
14 px · p
Captions, meta, footer text.
412K views · 71% watched to the end
Label
14 px · p
Labels above titles, list values.
Recent shorts
Nav
15 px · p
Navigation and text links.
Work Services Studio Journal
Button
15 px · p
Button labels (inside the Button component).
Send a raw take
Figure
44 · 38 · 32 px · p
Big numbers: prices, counts.
$2,100
Wordmark
21 px · p
The Jumpcut name in the nav and footer.
Jumpcut
Quote
26 · 22 · 20 px · p
Review quotes.
I used to film something, hate it, and delete it.
Article
18 · 17 · 16 px · p
Rich text paragraphs on CMS pages.
Watch the start of any take you have filmed.
Article heading
24 · 22 · 20 px · h3
Rich text H3 on CMS pages.
What we cut
Other palettes
Three palettes to copy.
Paste the values into the colour styles.
Night shift
Frame #101114
Page #ECEDEF
Ink #15161A
Accent #3D5AFE
Clay
Frame #1A1411
Page #EFE9E3
Ink #1C1714
Accent #C4502E
Moss
Frame #0F1410
Page #EBEEE9
Ink #141813
Accent #3F7D4E
Components
What each piece does,
and where to edit it.
Raw take
The headline on every page. Filler words in [brackets] are cut on load. Edit the take, the second line and the sizes in its controls.
Short stage
The short in the hero. Plays the Featured shorts in turn, with the blade on hover. Edit what it plays in CMS → Shorts.
Edit grid
The hero’s line grid and crosshair. Square size, line colours and the timeline length are controls.
Short
The 9:16 card in the Work grid and the home rail. Its photo, client and length come from the CMS.
Take race
The raw take beside the posted short on the home page. Its parts list sets what gets cut.
Count
Numbers that count up once in view, on the Brisa case.
Closing
The card before the footer on inner pages. Edit it once; every page follows.
Navigation, Button, Plans, Submit
Canvas components with variants for desktop, phone and states. Plans has a tab per plan.
Live components
Every component,
in every variant.
Navigation
In the Site layout template on every page. Desktop shows the links; Phone shows the menu button; Phone open is the menu. Edit the links here once.
Button
Ink and Small on white panels (orange, dark text). Light and Light small only on the black frame. Each has a hover state. Set the label and link in its controls.
Small
Button on the frame
Light and Light small, for buttons on the black frame (the nav uses Light small).
Light
Light small
Submit
The form’s send button. The form switches it to Sending, then Sent or Try again. Used on Home (Start) and Contact.
Default
Sending
Sent
Try again
Plans
The plans card with tabs. Weekly, Starter and Daily are its variants; the tabs switch between them. Edit prices and lines in each variant.
3 a week
5 a week
7 a week
Weekly
Five shorts a week from one Friday take, posted for you at your best hours.
$2,100
a month
Cancel or pause
any month
Edited from one Friday take
Captions in your type, and a cover frame
Two rounds of changes per short
A filming guide and a shared folder
Posted at your best hours
First replies to comments
A shoot day every month
Weekly (tabs switch to Starter and Daily)
Closing
The card before the footer on inner pages. Desktop, Tablet and Phone variants: set Tablet and Phone on those breakpoints.
Desktop
Example sections
Real sections from Home,
ready to copy onto new pages.
Copy a section to another page and keep its layer names, so its overrides keep working. Each one below comes from the Home page.
From Home
Services
The service rows from the CMS, each with its photo following the pointer. Use for any list of offers.
What we do
Five jobs, one editor.
Most start with the first.
Short-form editing
One take in, five posts out. Cut, captioned and sized for every feed.
Podcast and long-form clips
Your episode, cut into the twelve moments worth posting.
Captions and covers
Captions in your type, and a cover frame that still reads at thumbnail size.
Posting and first replies
We post at the hour your people are on their phones and answer the first comments.
Shoot days
Once a month we come to you with a phone, a light and a list of twenty shots.
From Home
Plans
The Plans component with its tabs. Use on a pricing page.
Plans
Pick a pace.
Change it any month.
3 a week
5 a week
7 a week
Weekly
Five shorts a week from one Friday take, posted for you at your best hours.
$2,100
a month
Cancel or pause
any month
Edited from one Friday take
Captions in your type, and a cover frame
Two rounds of changes per short
A filming guide and a shared folder
Posted at your best hours
First replies to comments
A shoot day every month
Prices in US dollars, month to month. Podcast clipping and shoot days can be added to any plan.
From Home
Reviews
Client quotes from the Reviews collection. Use wherever proof helps.
Founders on the record
In their own words.
Three of the thirty-one.
I used to film something, hate it, and delete it. Now I film it once on Friday and stop thinking about it.
Lena Ortiz
Founder, Brisa Skin
Half my new clients say they found me through the squat cue short. I recorded that between two sessions.
Dani Reyes
Coach, Reyes Strength
They cut forty minutes of kitchen footage into twenty seconds that sold out the Friday special.
Marisol Vega
Chef and owner, Casa Brava
From Home
Questions
Questions and answers from the Questions collection. Use before a form.
Questions
Asked on every first call.
Answered here, before the call.
Do I need a camera?
A phone from the last four years is enough. We send a one-page guide on light, sound and framing before your first take.
How do I send the footage?
Upload it to the shared folder we set up for you, straight from your phone. Anything in it by Friday at 6 pm goes into Monday's posts.
Who writes the hooks?
We do, from what you said. You see every first line before it goes out and can change any of them.
What if I don't like an edit?
Tell us what's off and we recut it the same day. Two rounds per short are included.
Do you post for us?
On the Weekly and Daily plans, yes. We schedule each short for the hour your followers are online and answer the first comments.
Can we stop or pause?
Plans run month to month. Pause for up to two months a year without losing your editor.
Collections
Eight collections.
What each one feeds.
Shorts
The hero card (Featured), Recent shorts, the Work grid and each short’s page.
Services
The services list on the home page, the Services page and each service page.
Team
The team grid on Studio.
Journal
The Journal page and each note’s page.
Reviews and Questions
The reviews and the questions on the home page.
Brisa weeks
The profile grid in the Brisa Skin case.
Legal
Privacy and Terms, linked from the footer. Placeholder copy.