One brand, three operations: a commerce + LMS + foundation architecture for Brother Sylvester

Sylvester Leader has taught African and Caribbean history with love and sensitivity for 45+ years, across the UK, Uganda, Kenya, Ghana, and the Caribbean. The craft was never in question. The brief was to give it a home online that could do three very different jobs at once: sell, teach, and raise funds, all under one identity, all live, all serving audiences that do not overlap. That is not one website. It is three operations that have to look and feel like one brand.

The challenge: three businesses, three audiences, one identity

A children-and-families learning brand, a multivendor marketplace, and a scholarship charity are three different products with three different regulatory shapes and three different visitors. A family looking for a course has nothing in common with a vendor checking their payout, or a donor reading a transparency report. Bolt them into a single flat site and every audience wades through the others to reach what they came for.

The temptation in that situation is to split into three separate brands. That was the wrong call here: the equity is in one name, Brother Sylvester, and fragmenting it would dilute the very thing that gives the work its weight. So the task was to keep one brand while giving each operation its own focused surface, and to do it without three disconnected codebases drifting apart over time.

The approach: a subdomain hub-and-spoke, not three sites

The architecture that answers the brief is a hub-and-spoke split across three subdomains, one codebase, one design system:

• brothersylvester.com, the Ltd company hub. Editorial home, the store, and the public-facing programmes: courses, donate, in-memoriam, for-schools, for-churches, for-organisations, safeguarding, methodology, framework, styleguide.
• academy.brothersylvester.com, the LMS. Course delivery, progress tracking, and certification. Migrated in June 2026 from the legacy brothersylvesteracademy.com domain via a clean 308-redirect chain, so old links and search equity carry forward instead of breaking.
• foundation.brothersylvester.com, the scholarship CIO arm. Donation infrastructure, beneficiary stories, transparency reporting. Migrated the same way from brothersylvesteracademy.org.

One brand, three operations, three audiences. The subdomain split keeps each surface focused without forcing a multi-brand information architecture, and because it is one codebase, the design system and the shared components stay in lockstep across all three. The domain migration ran in PR mode only: pushing straight to the default branch is hard-blocked on this project, so every change lands as a pull request and merges through review rather than a lone git push.

What we built

A multivendor store with real payout plumbing

The store at /store is a genuine marketplace, not a single-seller catalogue. It runs on Stripe Connect: on each order the platform fee is taken at a fixed PLATFORM_FEE_RATE of 10%, and the remainder is staged per line item as vendor_payout_pence for payout to each vendor’s connected Stripe account. Order totals, the fee split, and the per-vendor payout are all calculated server-side in one place, so the money math is not scattered across the checkout UI.

Multivendor commerce lives or dies on data isolation, and that is enforced at the database, not in application code. Supabase row-level security is tightened so that even server-rendered queries respect tenant boundaries: one vendor can never see another vendor’s orders, because the row-level policy refuses the read, regardless of how the query is written. That is the safe default for a marketplace, where a leak is not a bug, it is an incident.

An LMS that issues real documents

The Academy is a freemium LMS: articles and intro modules on the free tier, full courses, paths, and certificates above it. Certification is not a badge graphic, it is a real PDF generated server-side with @react-pdf/renderer. The same PDF pipeline does more than certificates: it also produces donation receipts and the foundation’s trustees report, so the document-generation approach is one shared capability serving all three surfaces rather than three separate hacks.

Behind the learning experience sits durable job orchestration. Onboarding sequences, reminder cadences, and scheduled work run through Inngest and Vercel Workflow, so a multi-step process survives a restart mid-flight instead of silently dropping a learner halfway through a sequence.

Editorial governance baked into the codebase

The rarest thing in this build is not the payments or the PDFs, it is the governance. The rules that protect Sylvester’s voice are enforced in the codebase and in review, not left to memory:

• The Academy is never described as “free forever”. It is freemium, and language that overstates the free tier is caught before it ships.
• Precise training prices are never published in landing copy. Numbers go stale; the brand does not want stale figures floating around, so training is quoted, not price-listed.
• The founder bio has one canonical form, and variations are caught in review.

This kind of discipline is normal in regulated software and rare in education brands. Importing it into a content-heavy site means a contributor can update messaging without accidentally publishing something off-voice or off-model.

A design system that survived a mid-build rebrand

Tailwind 4.2 is configured CSS-first, with tokens declared in one stylesheet. When the brand pivoted mid-build to a Pan-African green-gold-red palette, we did not find-and-replace colours across every route. We aliased the legacy token names to the new values, so --coral-* now resolves to red and --navy-* to green, and every existing component kept rendering correctly through a rolling visual update instead of a risky big-bang swap. The typography is a self-hosted Nunito and Nunito Sans pairing, rounded and friendly for the children-and-families audience, with no Google font CDN in the critical path.

The heavier interactive dependencies earn their place. Three.js with React Three Fiber drives the immersive landing scenes; Framer Motion, GSAP, and Lenis drive the scroll-led typography reveals; view transitions keep inter-route navigation continuous. The App Router defaults to server rendering and the bundle analyzer is wired in, so that JavaScript only ships to the routes that actually use it.

The outcome, and what we are not claiming

The three surfaces are live, the marketplace payout plumbing and the server-side document pipeline are real and working, and the editorial governance is enforced rather than hoped for. We will not dress that up with traffic or revenue figures we do not have; the point of the case study is the architecture, not an invented chart.

We are also clear about what this is. This is not a small-business retainer build. It is bespoke work at the top of the ladder, quoted to the business rather than sold from a standard tier. We surface it because it shows the disciplines we bring to every project, UK and EU-based sub-processors, schema-rich content, a subdomain hub-and-spoke, and governance baked into the code, at a scale that matters when a client asks “could you build the bigger thing too?”

If you are a UK educational institution, a multivendor brand, or a values-led organisation that needs commerce, an LMS, and a foundation under one identity, this pattern is a starting point. The way in is the same as for every client: a free audit at /audit, then a Marketing and Automation Deep-Dive that ends in a written audit and a fixed quote, with that fee credited against any build, then a bespoke build with no lock-in. Get in touch. We build and run it for you, with one accountable point of contact, for the small local sites and the bigger bespoke builds alike.