ToneLAB Style Card

The idea

The studio shouldn't need to shout to be taken seriously.

The current site treats Reformer, Performance and Training like three small businesses fighting for attention: three full palettes, repeated marquee text, a mid-size gym feel. The member experience is closer to a premium boutique. So the brief from the proposal was simple: one black and white system, the three division colours kept (they're too established to drop), but pulled right back to accents. Everything on the mockup follows from that.

Monochrome does the work

Black, white and a warm off-white carry every section. All photography and video is graded to black and white, so the studios read as one place rather than nine lighting setups.

Colour means a division

Purple, sage and yellow appear only as a dot, a hairline, a tag or a hover. If you see colour, it's telling you which discipline you're looking at. Nothing else is coloured.

Type sets the tone

A light, wide grotesk for structure and a sharp italic serif for the one word that matters. The pairing is the brand's voice: direct, with a flash of personality.

Colour

Six colours. Three of them rarely.

Ink#111111

White#FFFFFF

Paper#F6F5F2

Reformer#9A72A6

Performance#9DAC87

Training#EFBD3D

Roughly how the page is weighted. Ink, white and paper alternate as full-bleed section backgrounds. The three division colours together take up well under five percent of any screen, and never share a surface with each other at full strength.

Use a division colour as an 8px dot beside a label, a 2 to 3px line under a card or link, a tag border, or the colour a photo returns to on hover.

Keep the three colours at their existing values. They're already established across signage, socials and the app.

Don't

Fill a section, a button, a heading or a background with a division colour. If it needs a surface, it's black, white or paper.

Don't

Introduce a fourth accent, a gradient, or colour photography. All imagery is graded to black and white before it goes near the site.

Typography

One voice, one emphasis.

Archivo

HeadingsBodyLabelsUI

A wide grotesk used Light (300) for headlines at very large sizes with tight tracking, Regular for body and Semibold for small tracked-out caps labels. It replaces the mixed treatment on the current site with one family doing every structural job. Free via Google Fonts, so no licensing cost for the build.

purpose.

Italic onlyOne word per headlinePull quotes

Instrument Serif, italic, is the only other face on the site. It's used for one word inside a headline ("Move with purpose.") and for member quotes. The rule is restraint: if every heading had an italic, none of them would. Also free via Google Fonts.

DisplayNine studios. One near you.

HeadingPick your location

Quote“Built for people who keep showing up.”

BodyReformer Pilates, strength and conditioning, and HIIT studios across Newcastle, Lake Macquarie and Port Stephens.

LabelFind your location

Components

How the system behaves.

The same handful of parts repeat across the homepage, and will carry through every page of the site. Each one shows where colour is allowed to appear.

Buttons

Book a classFind your studio

Pill shape, tracked caps. Filled is the primary action, outlined is secondary. Always monochrome. Hover shifts to light grey, never to a division colour.

Division tags

ReformerPerformanceTraining

An 8px dot plus a tracked label. This is the main way colour enters the page: in the nav dropdowns, the studio list, the reviews filter, the footer.

Class chips

ToneSTRONGToneFLOWToneCOREHIIT

Outlined pills for class types. No fill, no colour. They sit on the division cards and will carry into timetables.

Photography

Everything graded mono, darkened slightly for text. A hairline in the division colour anchors the bottom edge. On hover the photo returns to colour for a moment.

Accent line

A 2px, 28px-wide line in the division colour sits before "Explore" links on cards. It's the smallest unit of colour on the site and the one used most often.

Motion

Quiet and purposeful.

Sections fade up once. Stats tally on arrival. Photos drift to colour on hover. The app splash dissolves into the booking screen on scroll. Nothing loops, bounces or flashes.

Perception

It looks like the studio feels.

People decide whether a business is worth their money in the first few seconds on its website, long before they read a word. The current site looks like a busy mid-size gym. The new direction looks like what ToneLAB actually is: a premium, well-run studio collective with coaches who care. That shift matters to two audiences: the people choosing where to train, and the brands and partners choosing who to work with.

Premium

It earns the price

Black and white, generous space and editorial type are the visual language of premium boutiques and fashion, not discount gyms. When the site looks considered, a membership price reads as fair rather than steep, and ToneLAB can hold its pricing instead of competing on it.

Trust

It feels established

Real addresses, real coaches, real member reviews, consistent design across all nine studios and an app that matches the site. Consistency is what makes a business feel stable. A first-timer can tell this is a brand that will still be here in a year.

Clean

It's easy to read

One accent per division instead of three competing palettes, one clear action per section, nothing flashing or shouting. Clean design lowers the effort it takes to say yes, which is exactly what a nervous first-timer needs.

For everyone

It speaks to men and women equally

Reformer tends to read as a women's space and strength training as a men's space, and the current colours lean into that. A neutral black and white system with real members of both sexes in every image makes all three disciplines feel open to anyone. A man can picture himself on a reformer, a woman can picture herself under a barbell, and couples can see one membership that works for both of them.

For members

Somewhere worth paying to train.

The site now sets the expectation of a premium experience before someone walks in, and the studio delivers on it. That alignment is what turns an intro offer into a long-term member.

Feels like a boutique, priced like it's worth it
Answers first-timer nerves with clarity, not hype
Makes booking feel effortless, which feels premium in itself
Feels equally welcoming to men and women across every discipline

For partners

Someone worth collaborating with.

Activewear labels, supplement and recovery brands, event organisers, local businesses and creators all check the website before they say yes to a partnership. A polished, confident brand tells them ToneLAB will make them look good too, and that it's worth their budget, product or audience.

Positions ToneLAB as a premium partner for apparel, nutrition and recovery brands
Strengthens pitches for events, sponsorships and corporate wellness deals
Gives collaborators a site they're proud to link to and share with their own audience

Conversion

Built to book, not just to look good.

The current homepage is a brochure: it describes the three divisions and lists the studios, but the two things a visitor actually wants to do (find the closest studio, book a class) take several taps and a hunt. The new homepage is organised around those two actions and removes every step between landing and booking.

MomentCurrent siteNew homepage

First screenColour video, no headline, no call to action. "Intro Offer" sits in the nav only.Headline, a keyword-rich line, then "Find your studio" and "Book a class" above the fold, plus a "member? open the app" shortcut so returning members skip the marketing.

Finding a studioNine cards in a fixed list. No filtering, no distance, "Studio Info" links out.A finder filterable by area and discipline, a "Nearest to me" button that sorts by distance, and a Timetable button on every studio. Three studios shown first on mobile so it doesn't become a scroll.

Choosing a disciplineThree text blocks with stock-style graphics, each styled differently.Three photographic cards with the real class names, two-studio and four-studio counts, and a single "Explore" path each. On mobile they swipe.

BookingApp badges buried at the bottom of a long page. No explanation of how booking works.A three-step "How it works", a live-looking app preview with real class names, store badges that glow, and a sticky mobile bar with Book and Find that follows the visitor down the page.

TrustA static testimonial carousel, no filtering, no stats.Reviews filterable by division with studio attribution, a stats strip (disciplines, studios, classes per week), and an FAQ answering the objections a first-timer actually has.

Offers"Intro Offers" is a nav dropdown. The homepage never mentions them.Intro offers are a full section with the All Access membership featured, reachable from the nav, the mobile menu, "How it works" and the FAQ.

MobileDesktop layout stacked. Long scroll, small tap targets, no persistent action.Designed at phone width first: full-width buttons, swipe carousels for long sections, a compact footer, and the sticky action bar. Roughly 8 screens of scroll instead of 13.

Found in nine suburbs at once.

The current homepage's main heading is a repeating "REFORMER. TRAINING. PERFORMANCE." marquee, which tells Google nothing about where ToneLAB is or what someone would search to find it. The new homepage is written for the searches that matter ("reformer pilates Newcastle", "HIIT Lake Macquarie", "gym Warners Bay") without reading like it was.

9Studios marked up as places

3Suburb clusters in the H1 line

0Keyword stuffing

On-page

A heading that says what and where

"Move with purpose" stays as the brand line, with a secondary heading underneath that names the three disciplines and the three regions. Section headings use the real terms people search (studios, locations, intro offer, timetable) instead of marketing labels.

Structured data

Nine LocalBusiness entries

Every studio is marked up as an ExerciseGym with its street address, so Google understands ToneLAB as nine real places rather than one page pretending to be nine. The FAQ is marked up too, which makes it eligible for expanded results.

Intent

Every search has a landing spot

Someone searching a suburb lands on the finder with that studio one tap away. Someone searching a discipline lands on a division card. Someone searching "ToneLAB app" lands on the app section. The page answers the query it was found for.

Technical

Fast, clean, crawlable

One HTML file, two web fonts, compressed media, no page builder bloat. Meta title and description written for the click, Open Graph tags so shared links show the right image, and a skip link and focus states for accessibility, which search engines also reward.

AI search

Clear entities, clear answers

Consistent naming, real addresses, plain-language FAQ answers and structured data give AI assistants and answer engines something unambiguous to cite when someone asks "where can I do reformer pilates in Newcastle".

The full build compounds it

Nine studio pages, three division pages and a timetable give each search its own URL. Paired with nine Google Business Profiles, that is the local SEO lever most multi-studio operators leave on the table.

An honest note: nobody can guarantee rankings or placement in AI answers. What the new build does is remove every reason Google currently has to overlook the site, and give it nine reasons to show it.

How we got here

The process behind the direction.

Diagnosed the real problem

The brief said "modern facelift". The audit of tonelabs.com.au showed the actual issue: three divisions styled as three competing brands, with a template-gym feel that undersold a premium boutique experience. That reframed the job as a system, not a repaint.

Kept what's established

Jordan was clear the three division colours were too embedded to drop. So instead of choosing one accent, the system keeps all three and changes how much they're allowed to do: from whole palettes down to dots and lines.

Benchmarked the category

Reviewed KX Pilates, Strong Pilates and Bodyfit. They're polished but single-discipline or generic. A black and white system with a three-colour code is something none of them can do, which makes it ownable for ToneLAB.

Chose type that does two jobs

One grotesk for everything structural, one italic serif for a single word of warmth. It gives the site a clear voice without needing colour to create personality.

Built it mobile-first on the real content

The mockup uses ToneLAB's own recent training footage, studio photography, class names, studio addresses, reviews and app screens, all graded into the system. Every section was tested at phone width before desktop.

Black and white. Three small marks of colour.

The new homepage.