/
00
/
Design system
One system. Every new page.
Every colour, text style and component this template is built from, on one page. Give it to the Agent as the reference and new pages come out looking like the rest of the site.
/design-system
Type this in the Agent panel with your prompt to build your first page from this system.
Recommended model: GPT 5.6 Sol or above.
/
01
/
Colours
22 tokens. Nothing hard-coded.
Every fill, border and text colour in the template points at one of these. Change a token and it changes everywhere it is used.
Base/Paper
rgb(240,240,240)
Base/Well
rgb(229,229,229)
Base/Ink
rgb(18,18,18)
Text/Muted
rgb(79,79,79)
Line/Default
rgba(0,0,0,0.15)
Accent/Orange
rgb(242,66,2)
Base/Night
rgb(8,8,8)
Line/On Dark
rgba(255,255,255,0.15)
Base/White
rgb(255,255,255)
Text/Faint
rgb(161,161,161)
Media/Glass
rgba(8,8,8,0.44)
Base/Graphite
rgb(42,42,42)
Line/Strong
rgba(0,0,0,0.2)
Media/Scrub
rgba(255,255,255,0.26)
State/Live
rgb(0,186,31)
State/Live Soft
rgba(0,186,31,0.18)
State/Red
rgb(255,34,68)
Media/Text Muted
rgba(255,255,255,0.74)
Media/Scrim Top
rgba(8,8,8,0.42)
Media/Scrim Bottom
rgba(8,8,8,0.84)
Media/Clear
rgba(8,8,8,0)
Base/Transparent
rgba(0,0,0,0)
/
02
/
Typography
20 styles, one type ramp.
Headings, titles, body sizes and labels in Host Grotesk and Geist Mono. Every text on the site uses one of these, so the scale never drifts.
Ag
Heading/H1
h1 · 72px · 1.1em
Ag
Heading/H2
h2 · 60px · 1.1em
Ag
Heading/H3
h3 · 24px · 1.1em
Ag
Heading/H4
h4 · 20.8px · 1.2em
Short-form editing
Heading/H5
h5 · 19.2px · 1.3em
Short-form editing
Heading/H6
h6 · 16px · 1.2em
Zenon
Logo
p · 24px · 1em
Send us your raw clips. We cut them into edits that keep people watching.
Body/L
p · 18px · 1.4em
EDITS THAT MOVE
Mono/L
p · 11.2px · 1.2em
81%
Figure
p · 48px · 1em
Short-form editing
Button
p · 15px · 1.2em
Send us your raw clips. We cut them into edits that keep people watching.
Body/M
p · 16px · 1.4em
EDITS THAT MOVE
Mono/S
p · 10px · 1.2em
Send us your raw clips. We cut them into edits that keep people watching.
Body/S
p · 14.4px · 1.3em
EDITS THAT MOVE
Label/L
p · 11.2px · 1.2em
EDITS THAT MOVE
Label/S
p · 10px · 1.2em
Send us your raw clips. We cut them into edits that keep people watching.
Body/S Medium
p · 14.4px · 1.3em
Short-form editing
Title/L
p · 20.8px · 1.2em
Short-form editing
Title/M
p · 19.2px · 1.3em
Short-form editing
Title/S
p · 16px · 1.2em
/
03
/
Components
Every component, one card each.
Each card shows the component in its main state. Point the Agent at the one you want and it reuses it instead of drawing something new.
Controls
buttons, badges, pills, icons
Button
Component
2 slots left for October
Availability Badge
Component
Avg
Chip
Component
Logo
Component
Menu Button
Component
All
08
Filter Pill
Component
MB
Avatar
Component
Billing Toggle
Component
Submit Button
Component
Cards
repeatable content blocks
Monitor Card
Component
Curve Card
Component
Retention Card
Component
Plan Card
Component
Help Card
Component
CTA Films
Component
Day 0 · 15 minutes
A 15-minute call to learn your brand, audience and goals. You leave with a plan for the first month.
Step Row
Component
Short-form for Reels, TikTok and YouTube Shorts. Send us long clips, vlogs or podcast recordings and we cut them into short-form.
FAQ Item
Component
“Same camera, same trips. The edits changed everything.”
MB
@blue.miles
·
Travel creator
Quote
Component
Metric
Component
View Stat
Component
Sections
full-width blocks, shown at page width
Section Head
Component
Navbar
Component
Footer
Component
Day 0 · 15 minutes
A 15-minute call to learn your brand, audience and goals. You leave with a plan for the first month.
Day 1 · One link
Record on your phone, camera or podcast setup. Upload everything to one shared link, no file wrangling.
Day 2 · 48h
Hooks, captions, sound and motion. You review, ask for changes or hit post. Revisions are unlimited.
Day 30 · Monthly
Every month we show you what performed, cut what didn’t, and double down on the hooks that win.
Steps
Component
Compare Table
Component
Compare Row
Component
Custom Plan
Component
Short-form for Reels, TikTok and YouTube Shorts. Send us long clips, vlogs or podcast recordings and we cut them into short-form.
Upload your files through one shared link. Phone footage is perfectly fine.
48 hours on average, depending on your plan. Scale clients get 24h delivery.
Request changes and we revise it. Growth and Scale plans include unlimited revisions.
Yes. Every edit is built around a strong hook, and Growth and Scale add monthly hook testing and content strategy.
Yes. Send your fonts, colors and references and every edit will follow them.
No. Plans are month to month and you can cancel anytime.
FAQ
Component
Contact Form
Component
/
04
/
Code components
7 coded pieces, 2 overrides.
These carry the interaction the canvas cannot. They follow the text styles and colour tokens above, and their content is edited on the instance like any other component.
Counter
Code
Video Card
Code
Retention Chart
Code
Applied to the footer year, so the copyright line always shows the current year. It has no visual of its own.
Current Year
Code override
Applied to the Nav Link label, so every link stays on one line whatever text the buyer types. It has no visual of its own.
No Wrap
Code override
Logo Slider
Code
Short-form editing
Scroll-stopping edits for Reels, TikTok and Shorts. Every cut is made to keep viewers watching past the first 3 seconds.
- Platform-native formatting
- Pacing built for retention
- 9:16, 1:1 and 16:9 exports
Services
Code
Before After
Code
“I send raw clips at night and wake up to edits that actually perform. My reach tripled in two months.”
Mila R.
+5.8K
Followers
23K
Avg views
6.8%
Conversion
“Every video has a hook now. Watch time went from 40% to over 80%.”
Kai O.
+4K
Followers
18K
Avg views
81%
Retention
“Finally consistent. Four videos a week without me touching an editor.”
Noa L.
+3K
Followers
16K
Avg views
4.9%
Conversion
“One vlog turned into 20 clips. That is a month of content from a single trip.”
Jo P.
+2.4K
Followers
22K
Avg views
20
Clips per vlog
“Same trips, better stories. Brands started reaching out after the first month.”
Ana R.
+7.1K
Followers
31K
Avg views
3
Brand deals
Reviews Carousel
Code