Fitness · Strength gyms, barbell clubs and small-group studios
Topset
A premium website for a strength gym that trains in blocks. The home page opens on a photograph of today's lift with the lift as a headline fitted to the page, and the type gets heavier with the week of the block. Two home pages, 25 page types, light and dark.
- Pages
- 10
- Modes
- Light and dark
- Responsive
- Desktop, tablet, phone
- Versions
- Framer, Code, XOXI
About this template
What Topset is
Topset is a complete website for a strength gym, barbell club or small-group studio. It is built on one idea: strength training is a little more weight each week, so the type carries the weight. The display typeface is a variable font, and the per cent on the bar sets how heavy it is. In the deload week the whole site is set light; in week five it is at its heaviest.
The site knows the date. The home page opens on a full-bleed photograph of today's lift, one for each day of the week, with the lift as a headline fitted to the width of the page. Below it the six weeks of a block are told on one pinned stage: the numeral counts up and thickens while the week's photograph wipes in behind. There is a calculator that turns a best single into six weeks of loadable weights, the week as seven day panels, a timetable of 44 sessions with places left, and a price ledger that switches between the month and the session.
It has 25 page types, two of them home pages, and nine collections of complete demo content. Every page is designed in light and in dark, in a palette of iron, chalk and oak with no colour fields, and everything that moves has a reduced-motion version. The gym, its people and its prices are invented, and the photographs are for demonstration only, so replace them with your own before you publish.
Last updated
What's included
10 pages, ready to fill in
- 01HomeSixteen sections: today's lift, a statement that takes on weight as you read, the pinned block, the week by day, today's sessions, programs, the bar calculator, first week, coaches, the floor, prices, the bell, journal, events and questions
- 02Home 2The block as six numerals, each at the weight of its load, then the week as seven day panels and programs as large photographs
- 03The block and timetableThe six weeks as spreads with this block's dates and the next four starts; the week as day panels and every session with a program filter
- 04Programs and programEight programs; each page shows the session minute by minute, who it is for, this week's times, its coaches and its questions
- 05Coaches and coachSix coaches; profiles with their story, the three things they say, their sessions this week, their programs and their journal notes
- 06Membership, first visit, free first weekA price ledger with a comparison and the rules in plain words; the first hour as it happens; a two-step form with a confirmation
- 07The floor, events and eventThe hall area by area with the kit counted and house rules; six events with a page each
- 08Journal and articleEight complete articles with a subject filter, pull quotes and the writer
- 09About, visit, questions, contact, careersThe club's story and timeline, hours and directions, fourteen questions in four groups, a contact form and four open roles
- 10Style guide, licence, legal, 404Every colour, weight and component on one page; licence and changelog; terms, privacy and a 404
Features
- Block, week and next start date worked out from one anchor date
- Today, hours and session states in the gym's own time zone
- Headings set at the weight of this week's bar, from one variable
- Light and dark palettes designed separately, with a stored choice
- Reduced-motion versions of every animation
- Responsive from phone to wide desktop
- Programs, coaches, journal, events and sessions as collections
- Text, colours, weeks, timetable and photographs are yours to change
Code version
- React 19
- Vite
- Tailwind CSS 4
- TypeScript
- Motion
- React Router
- Content in typed files
Screens
A closer look
Taken from the live demo, in light and in dark, on desktop and on a phone.
Where to get it
Three versions, one design
Pick the one that matches how you build. The pages and the design are the same in each.
- Framer templateRemix it into your Framer account and edit on the canvas. Projects and journal posts run on the Framer CMS.
Free on FramerFramer Marketplace
- Code on Digital Silk RouteThe full source: React 19, Vite, Tailwind CSS 4, TypeScript. Host it anywhere and change anything.
$5one payment
Buy theme · $5 - XOXI themeA theme for your XOXI profile. Live on the XOXI website now; the iOS and Android app gets it with the next app update.
Includedfor Pro and Business+ members
Get it with Pro plan on XOXI
Want to see it first? View demo
More templates
Others you may like
Pagina
A multi-page portfolio template for independent designers and small studios, with light and dark mode.
Free on Framer · $5 code
Stint
A multi-page resume and CV website with a career timeline, a printable resume page, and light and dark mode.
Free on Framer · $5 code
Sidelit
A multi-page photography portfolio where the photograph in view lights the page, with every frame shown whole and light and dark mode.
Free on Framer · $5 code
Want one made for you?
Start with a free 30-minute call. You get a written plan and a fixed quote before any work begins.
Fixed quote. You own everything we make.
