START HERE
Setting up Refrain
Fifteen minutes and the site is yours. Work top to bottom.
Delete this page before you publish.
01 POINT THE FORM AT YOUR ADDRESS · DO NOT SKIP
Every enquiry currently goes to the template author, not to you. Nothing else matters until this is done.
On /get-started select the Get Started Form layer. In the Form panel on the right, set Send To and replace the recipient with your own address.
Then test it: publish, submit the form on the live site, and check that it arrives. One more wire while you are here: the Sign in link in the nav points at /get-started as a placeholder. Point it at your real login page, or delete it.
02 SWAP THE TWO FONTS
Refrain uses two families and nothing else. General Sans for everything, JetBrains Mono for versions, timestamps, paths and code.
Open the font manager and replace them. Keep it to two. Sizes are set on the layers, so the scale holds on its own.
03 CHANGE THE FOURTEEN COLOURS
Every colour is a style, so you edit the styles and the whole site follows. Never type a raw hex onto a layer.
void is the page ground. panel and panel-2 are opaque surfaces, and panel-glass is the translucent card surface that lets the backdrop show through. line and line-bright are borders. text, text-2 and text-3 step from primary to meta. signal is the one accent.
The four taxonomy colours carry meaning: tax-feature, tax-fix, tax-breaking and tax-improve map to changelog entry types and docs sections. Keep them at chip scale and never use them as a section background.
04 FILL THE CMS COLLECTIONS · DO NOT SKIP
Two collections ship with content: Changelog and Posts. Open the CMS tab and replace the entries with your own. The changelog cards, the filter chips, the rail, the blog cards and the post pages all read from them, so an entry you add appears everywhere when you publish.
The Changelog Type field is an enum with four cases. It drives the colour of the chip, so keep the four and rename them only if you also update the colour styles.
05 THE COMPARISON TABLE
Each row on /pricing is a horizontal stack, not a grid. Duplicate a row to add a feature and the columns stay aligned.
To add a fourth plan, duplicate a Plan card and add one cell to every table row.
06 THE MOTION AND THE BACKDROP
The sticky rails on the home page and /changelog are native sticky positioning. The active highlight comes from one code file, RefrainFX.
It exposes eight overrides: withRain draws the falling telemetry backdrop, withScrollRail lights the active rail item, withDocsNav keeps the docs sidebar on the section you are reading, withReveal staggers sections in, withSheen is the cursor glow, withFilter makes the changelog chips filter, withNavChrome runs the phone menu and the skip link, and withSkipLink is the earlier skip-link-only version, kept so you can go back to it.
Delete the file and every section keeps its content, order and position. The backdrop goes still, the chips stop filtering and the phone menu stops opening, so keep withNavChrome on the nav if you remove the rest.
07 BREAKPOINTS
Three: desktop from 1200, tablet from 810, phone below 810. Edit desktop first, then check the other two.
Structure is shared across all three, so adding a layer adds it everywhere. Only size, spacing and visibility differ per breakpoint.
08 BEFORE YOU PUBLISH
Set the site title, description and social image in Site Settings, and replace the favicon.
On every page, delete the layer named "CTA — Buy this template". It links to where this template is sold. Then delete this page.
BEFORE YOU PUBLISH
Form recipient changed and tested
Fonts and the fourteen colour styles swapped
CMS collections filled with your own entries
Title, description, social image and favicon set
This page deleted
Buy this template