Red, near-black, yellow. Bebas Neue. Big numbers, short words, a countdown that means it.
FITNESS
& WELLNESS!
The January programme needs a story ad, a timetable, a sign-up page and a poster for the window. Make all four in one afternoon, in one set of colours, and still teach the 6:30.
The running app story ad template, its four 9:16 scenes in view. From ⋯, Brand kit… opens; the Gym & fitness example kit (Ironline, red, black and yellow) is applied, and every scene changes colour and type at once.
PUMP!
THE BRIEF
Ironline wants January to be full
Ironline is a gym on West Lake Street with a slogan, Strong starts here, and a problem every gym has: everyone joins in January and nobody knows what to do on day two. So the coaches built a six-week beginner programme called Strong Starts. Now they have to sell it.
Ironline is not real. It is the Gym & fitness example brand kit that ships in PopCraft, so you can open what we used. The head coach has the usual kit: a Canva account somebody's ex set up, a printer behind the desk that only does A4, and about forty minutes between classes.
4
scenes in the fitness story ad
A3
class timetable, a component per class
1
landing page with a real form
2
example kits: gym and wellness
STEP 1
The brand, once
Open ⋯ › Brand kit…, pick Gym & fitness from the examples, change what is wrong and click Apply to document. Ironline is red, near-black and yellow on stone, with Bebas Neue headings and Rubik for everything else. The kit also keeps the name, website, email, phone and address.
The clip shows the same kit on a whole shop template, to make the point: one click and every screen is the gym's. If Ironline ever sells hoodies, the sell online use case starts right there.
The Fieldwork workwear storefront template, zoomed on its Home screen. From ⋯, Brand kit… opens; the Gym & fitness example kit is applied, and Home, then every other screen, takes its red and yellow, its Bebas Neue headings and its shop name at once.
STEP 2
A story ad that does the selling
The Running app story ad is four 9:16 scenes, about nine seconds: the promise with its weeks counting in, how it works, a quote, and the offer. Slide, dissolve and a zoom-through carry you between them. It was written for a running app (5K from the sofa in 9 weeks), and that is a fine skeleton for a gym: Your first pull-up in 6 weeks, three classes a week, a member's quote, first week free.
Apply the kit and all four scenes change at once. Replace the words, drop in a photo from the gym floor, and export an MP4. The motion studio page is there if you want the counter to count to something else.
The running app story ad template, its four 9:16 scenes in view. From ⋯, Brand kit… opens; the Gym & fitness example kit (Ironline, red, black and yellow) is applied, and every scene changes colour and type at once.
STEP 3
The timetable by the front desk
The Studio class timetable poster is the week on A3: seven day columns of classes, coloured by kind, with a key and the things a newcomer asks (prices, how to book, what to bring). Every class is an instance of one Class component with its time, name and teacher, so Strong Starts 6:30 is typed into Monday, duplicated to Wednesday and Friday, and next week is retyped rather than redrawn. It prints with bleed. Its twin, the Studio class timetable post, is the same week as a 4:5 post, and as a 9:16 story where each day is a row, because seven columns are too thin to read on a phone.
Here is the January grid Ironline pinned up, drawn for this page:
IRONLINE · JANUARY CLASSES
MONTUEWEDTHUFRISAT
6:30Strong StartsRow & RideStrong StartsRow & RideStrong Starts
12:15Lunch LiftLunch LiftLunch Lift
18:00KettlebellsStrong StartsMobilityStrong Starts
9:00Open Gym
An example gym. Each coloured cell is one component instance: change the class once, every cell that uses it follows.
The Studio class timetable poster template in Design: the A3 week of seven day columns, coloured by kind of class. The camera moves to Monday, and one class is selected, showing its Class component with its time, name and teacher.
The bold business card template. The Preflight tab opens in the right panel and Run checks both sides: image resolution, safe margins, bleed, hairlines, overflowing text, fonts and transparency, each issue listed with where it is.
STEP 4
A studio page with a sign-up form
The Landing page template is a nav, a hero and three feature cards, laid out with auto layout so it reflows at each breakpoint. Apply the kit and it is Ironline's. The hero says Strong starts here; the three cards become the three weeks that matter: learn the lifts, build the habit, test yourself.
Then the part that does the work: draw a name field, an email field and a button, and make them real form controls in the Design panel's Web section. Publish, and the form works. To keep what it sends, connect a Neon or Supabase database in a click. The publishing page explains addresses and versions.
The landing page template, its Desktop frame in view. The same Gym & fitness example kit is applied, and the nav, hero and feature cards take its colours, fonts and name.
STEP 4, CONTINUED
Publish it, keep the sign-ups
The website template in the editor, signed in. The Publish button in the top bar opens the Publish dialog. An address is typed, Publish is clicked, the files upload, and the dialog shows the site's link with Version 1 marked Live. The published site is then opened on its own: the landing page shows, and clicking Pricing in its navigation goes to the pricing page.
The coming-soon page, published, with its email sign-up marked as a form and a Neon account connected. In the Publish dialog, under Database, New Neon database is clicked: a project named after the site is made in the Neon account and its database attached, and it is listed. Three visitors then sign up on the site (sent by the recording, as the site sends them). Submissions is clicked and a table shows the three, newest first, with when each was sent and its email.
The page goes out at its own address. Each publish is a version; if January's copy was better than February's, make January live again. Using your own domain means sending the site to a Vercel project, which the integrations page covers.
STEP 5
The window and the feed
The Event poster goes in the window: Strong Starts, six weeks, from 5 January and the landing page's address, in the gym's red. The feed gets the Sale post for the first-week-free offer, the animated Sale post for the stories, and the Reel / TikTok cover so the deadlift video does not open on a frame of someone's chin.
All of them take the same kit, so the window and the feed match without anyone checking hex codes. For every size of every network, see the social media use case.
The Kinetic headline template in Animate, zoomed on its frame. Space plays it: the headline’s words punch in one after another and the highlight pill slides under the key word, all from ordinary keys and curves on the timeline below.
A logo reveal in Animate. The download button in the transport bar opens Export animation. MP4 shows frame rate, range, resolution and quality with a summary of the size; GIF switches to palette, dither and loop settings; Lottie lists what the file can carry. The frame rate is set to 120 fps for MP4.
THE CALM SIDE
And if it is yoga, not deadlifts
A wellness studio needs the same things in a different voice. Start from the Wellness & spa example kit instead: Sage Hollow, sage and forest with a clay accent, Breathe. Restore. Return. Apply it to the same story ad, the same timetable and the same landing page, and none of it shouts any more. The templates do not care whether you lift or stretch.
SAGE HOLLOW
AHH...Sage, forest, clay on warm paper. Softer type. The same templates, slower words, more white space.
WHAT YOU SKIP
A gym's January, before and after
| THE USUAL JANUARY | IN POPCRAFT |
|---|---|
| A story ad from an agency, in December prices | The fitness story ad, re-skinned and rewritten |
| A timetable typed in a spreadsheet, printed in grey | The A3 timetable, a component per class, in the gym's colours |
| A website builder for one sign-up page | A landing page with a real form, published |
| A form tool, a spreadsheet, a copy-paste | A database that keeps what the form sends |
| The poster in one app, the posts in another | One brand kit across all of it |
FROM ZERO
Six moves to a full January
- 1
Apply the kit
⋯ › Brand kit… › Gym & fitness, or your own colours and fonts. Every file that binds to brand roles follows. - 2
Cut the story ad
The four-scene running story ad: promise, how it works, a quote, the trial. Rewrite it for the programme. - 3
Fill the timetable
The class timetable: seven day columns, every class a component. Type the week, print the A3 poster, post the 4:5 and the story. - 4
Make the landing page
The Landing page template, a sign-up form and a database to keep what it sends. - 5
Posters and posts
The event poster for the window; sale, reel cover and story sizes for the feed. - 6
Publish and post
The site at its own address, the ad as an MP4, the poster as a PDF.
BEING HONEST
It designs the gym. It does not run it.
There is no class-booking system and no membership billing: the timetable says when, your booking app takes the names. The fitness story ad was written for a running app and needs your words. What you get is the brand, the ad, the timetable, the page and the poster, made in an afternoon and matching each other.
ASKED & ANSWERED
Questions, answered
Is the fitness story ad made for gyms?
It is written for a beginner running app called Stride: 5K from the sofa in nine weeks, a runner's quote and a 14-day trial. The structure (promise, how it works, proof, offer) suits any programme, so you change the words and the pictures. The scenes, timing and transitions stay.
Is there a class schedule template?
Yes, two that match: the Studio class timetable poster, an A3 week of seven day columns with a key, prices and first-visit notes, and the Studio class timetable post, the same week as a 4:5 post and a 9:16 story with a row per day. Every class is a component with its time, name and teacher, coloured by kind, so next week is typed in, not redrawn. For a month at a glance, the A3 Wall calendar still works.
Can people book classes from the site?
PopCraft can publish a page with a working form, and a Neon or Supabase database keeps what the form sends, which is fine for "register your interest". Real bookings, memberships and payments need your booking system. Link to it from the page.
What is in the Gym & fitness brand kit?
A red, near-black and yellow palette on a stone background, Bebas Neue for headings and Rubik for text, and example fields for a gym called Ironline. It is an example: change any of it, or start a kit from scratch.
We are a yoga studio, not a gym.
Then start from the Wellness & spa example kit: sage, forest and clay, calmer type. Same templates, same steps. The kit is the only thing that changes.
What do I export the story ad as?
MP4 for Instagram and TikTok stories, at the frame rate and size you pick. GIF if it is going in an email. The export runs in the app and saves a file.
THE MANUAL, FOR THE DETAILS
PUMP! YOUR TURN.
Story ads, a timetable and a studio brand that sweats the details. Free to start, in your browser or on your Mac.