Earth
Holohan Martial Arts
Deep #1F4D3A
Light #BFCA91
On the matBarlow Condensed 700
The mat, the ground game, being grounded. Direct, candid, a coach’s voice.
Visual system, version one
Four houses.
One roof.
How Holohan Martial Arts, Fire Flow Yoga, Float Therapy and Still Sauna each keep their own character and still read as one family under Four Wellness.
Each house keeps its name, logo, colour and voice. The family shows in five shared things: the mark, the four elements, one text face, the collective bar at the top of every site and the collective footer at the bottom.
The mark
A square cut by its diagonals into four faces with a clear gap between them. Seen from above it is a hipped roof: four faces meeting at one point. Each house owns one face. The collective lights all four. A house lights its own face and outlines the other three.
The collective: all four faces lit
40 unit square, 4 unit gap at each corner, stroke 2.4
Holohan Martial ArtsEarth · bottom face
Fire Flow YogaFire · left face
Float TherapyWater · right face
Still SaunaAir · top face
Four elements
Every house belongs to an element. Each element has one deep colour that is safe for text on light grounds and one light colour that is safe on dark grounds. A house never borrows another house’s element colour. They only appear together in the family chrome and on the Four Wellness site.
Fire
Fire Flow Yoga
Deep #A8401A
Light #F6A26B
In the heatBricolage Grotesque 700
A heated room and a warm crowd. Playful, encouraging, never precious.
Water
Float Therapy
Deep #14666F
Light #8BD3DB
In the waterUrbanist 300, tracked
Warm salt water, no weight at all. Quiet, reassuring, fewer words.
Air
Still Sauna
Deep #57623F
Light #C4CDA9
Slow down.Nothing You Could Do
Steam and breath. Löyly, the Finnish word for sauna steam, also means spirit. Slow, hand-written, kind.
One text face
Manrope sets every paragraph, label, timetable and button across the family. Each house adds exactly one display face for its voice, so a page never carries more than two families. Logos are artwork, not fonts.
All faces are open-source (SIL Open Font Licence) and self-hosted. No Google Fonts calls, no tracking.
DisplayHouse display face
Lede 20Martial arts, hot yoga, float therapy and a sauna, side by side.
Body 17Most people find one of us first. Whichever door you walk through, the other three are just down the hall.
Label 11Four Wellness · the collective
Times18:30 · 19:45 · 20:00
The shared chrome
The same collective bar sits above every house’s own navigation, and the same four-doors footer closes every page. The current house is marked in its element colour. Here is Still Sauna’s copy of the bar.
- Real booking, alwaysYoga and float times are read live from ATND. Every Book button opens ATND or Glofox. The sites never pretend to take a booking.
- Real photography firstHouse media leads. Anything generated is labelled in the handoff and replaced by a real shoot.
- One accent per houseA house uses only its own element colour. Neon, violet gradients and glows are retired.
- Different pages, same familyEach house site is built in its own structure. The family lives in the system, not in a shared page template.
- Readable everywhereBody text at 4.5:1 contrast or better on the actual render. Focus is always visible. Reduced motion keeps every word and every link.
- No invented numbersPrices, class names and instructors come from the houses’ own pages and live booking data.
How it flows down
One family layer feeds every house. Change an element colour or the bar once and all five sites follow. Each house then sets its own six page tokens and one display face on top.
Files: family.css, family.js and the bar and footer snippets, plus /api/slots for live times.
/* family.css: shared by all five sites */
--fw-fire: #a8401a; --fw-fire-light: #f6a26b;
--fw-water: #14666f; --fw-water-light: #8bd3db;
--fw-text: "Manrope";
/* fire-flow.css: the house on top */
--sc-accent: var(--fw-fire);
--sc-font-display: "Bricolage Grotesque";
/* live times, same call on every house */
FW.slots('yoga', 7) // ATND tenant 7, branch 7
FW.slots('float', 7) // ATND tenant 7, branch 5