Three-business architecture under one brand

Brother Sylvester teaches African and Caribbean history with love and sensitivity. Sylvester Leader has done it for 45+ years across the UK, Uganda, Kenya, Ghana, and the Caribbean. The brief was to turn that craft into a brand, a marketplace, an LMS, and a scholarship foundation — all under one identity, all live, all serving distinct audiences.

The three-domain architecture

The structural decision that defines this build:

• brothersylvester.com — the Ltd company hub. Editorial home, store, public-facing programmes (courses, donate, in-memoriam, for-schools, for-churches, for-organisations, safeguarding, methodology, framework, styleguide).
• academy.brothersylvester.com — the LMS. Migrated June 2026 from the legacy brothersylvesteracademy.com domain via a clean 308-redirect chain. Course delivery, progress tracking, certification (PDFs generated server-side via @react-pdf/renderer).
• foundation.brothersylvester.com — the scholarship CIO arm. Migrated from brothersylvesteracademy.org. Donation infrastructure, beneficiary stories, transparency reporting.

One brand, three operations, three audiences (students, congregations and schools, donors). Subdomain split keeps each surface focused without forcing a multi-brand IA. The migration was done in PR mode only — git push origin main is hard-blocked on this project (memory: classifier refuses default-branch pushes); every change lands via PR and merges through the GitHub UI.

The stack

Next.js 16 with React 19.2. App Router with server components by default. JavaScript, not TypeScript — a deliberate call that keeps the contributor pool wider for a project that may want non-tech editorial input later.

Tailwind 4.2 (CSS-first config). Tokens declared in app/styles/globals.css. The brand pivot mid-build (kente / Pan-African green-gold-red replacing an earlier coral / navy palette) was done by aliasing the legacy token names rather than replacing them across 27 routes — --coral-* now maps to red, --navy-* to green, so existing components keep rendering during the rolling visual update.

Fraunces (display) + Inter (body). Brand-approved by Sylvester directly on 2026-06-01 in PR #24. The typography decision is locked; the kente vocabulary in the design system is locked; the brand guide is the source of truth.

Supabase (SSR with RLS). Row-level security tightened so that even server-rendered queries respect tenant boundaries — important for the multivendor store, where each vendor’s order data has to stay invisible to peers.

Stripe Connect at /store. Multivendor marketplace plumbing. PLATFORM_FEE_RATE = 0.10 — Brother Sylvester takes 10% of each transaction; the rest stages to order_items.vendor_payout_pence for scheduled payout to the vendor’s connected Stripe account.

Resend EU + Inngest + Sentry + Cloudflare Turnstile + Plausible. Email delivery on EU infrastructure, durable workflows for onboarding sequences and reminder cadence, error monitoring, anti-bot on signup forms, privacy-first analytics.

Heavy interactive deps for the right reasons. @react-three/fiber + drei + three for the immersive landing-page 3D scenes. framer-motion + gsap + lenis for the scroll-driven typography reveals. next-view-transitions for inter-route continuity. Bundle is heavier than a static site would be, but the bundle analyzer (npm run analyze) is wired in and the App Router defaults to server rendering, so the JS payload only hits where the interaction does.

Content-as-code governance

The codebase enforces editorial rules at the linting layer:

• Never use the phrase “free forever”. The Academy has a freemium tier, but the language around it is governed; “free forever” is misleading vs the actual pricing model.
• Never publish precise training prices outside the dedicated pricing surfaces. Numbers go stale; the brand doesn’t want stale numbers floating around in landing copy.
• The canonical founder bio is one specific sentence — variations are caught in review.

This kind of governance is rare in education brands. It’s normal in regulated software. Importing the discipline into a content-heavy site means a contributor can update messaging without accidentally publishing something misaligned with Sylvester’s voice.

The Pan-African design tokens

Green-gold-red, anchored to specific named hex values rather than vague “Pan-African colours” labels. The token names map to function not origin — --brand, --accent, --ink, --paper — but the values are the kente palette Sylvester signed off on. Anyone forking the design system later sees a normal token set; only the values carry the cultural choice.

What this case study isn’t claiming

It isn’t claiming Brother Sylvester is a UK Web Marketing tier client — this is bespoke work, not a Foundation £45/mo site. It’s surfaced as a case study because it shows the same architectural disciplines (EU-sovereign sub-processors, schema-rich content, subdomain hub-and-spoke, governance baked into the codebase) at a scale that’s relevant when a client asks “could you build the bigger thing too?”

If you’re a UK educational institution, a multivendor brand, or a values-led organisation that needs three operating surfaces (commerce + LMS + foundation) under one identity, the architecture pattern above is a starting point. WhatsApp me — same developer for both the £45/mo tier and the bespoke builds.