Studio + University Sites

Problem

Evolve Studio (cinematic real estate media) and Evolve University (professional education) started as #studio and #university anchor sections on the main brokerage site and outgrew that container — each needed its own domain, its own multi-page site (Studio scaffolded at 16-17 English pages, University at 17 plus 18 course-detail pages), and its own lead-capture backend, without duplicating the engineering effort of building two unrelated codebases or diverging from the parent brand's visual language and voice rules. The build brief was explicit that visual fidelity to the anchor sections was non-negotiable at scaffold time — extract the live palette, typography, spacing rhythm, and component patterns directly from the existing #studio/#university CSS rather than reinventing them — while still leaving room for each site to diverge on accent color and tone once it had its own domain. The stack decision was inherited rather than re-litigated: match evolve-agentic-repo's pattern (static HTML, Cloudflare Pages, D1 + Pages Functions, Resend, Turnstile) rather than reach for Astro or a CMS, on the explicit operator preference against over-engineering and unused subscriptions.

What was built

One monorepo containing two independently deployed sites that share an architectural pattern but not a visual identity. Evolve Studio (evolvestudio.us) is a dark editorial site with a lime accent spanning 16 English pages — a homepage, five service disciplines, a five-step process page, a filterable work/portfolio page mixing YouTube embeds with TikTok link-out thumbnails, published per-package and subscription pricing ($250/wk Basic up to $2,200/mo Elite), three audience-landing pages (teams, builders, brokerages), a manual slot-pick booking flow, an 18-item affiliate gear page, and a "coming soon" placeholder for a Phase 2 stock-footage marketplace. Evolve University (evolveuniversity.ai) is a light editorial site with a gold accent covering an 18-course catalog (3 free forever, 15 paid under one $99/mo subscription that some courses additionally require a separate paid third-party tool for, like Claude Pro or paid Higgsfield), application-gated enrollment through a /join form that a human reviews before issuing credentials, instructor bios, and per-audience landing pages for solo agents, team leaders, and brokerages. Both sites are fully mirrored in Spanish and Portuguese via an automated translation pipeline, and both funnel leads through Cloudflare Pages Functions into per-site D1 databases, with lead-magnet PDFs auto-emailed via Resend on capture. Both also share a homepage funnel pattern — an avatar selector routing to audience pages, a lead-magnet email capture, and a "How Evolve fits together" ecosystem module that marks the current site "you are here" among the four Evolve properties.

Technical approach

Each app (apps/studio, apps/university) is its own static-HTML, no-build-step Cloudflare Pages project with its own wrangler.toml, D1 database, and GitHub Actions deploy workflow, triggered by path-filtered pushes to main so editing one app never redeploys the other. CI runs a voice-guard grep for em/en dashes before every deploy — a real incident (documented in HANDOFF.md) had this fail silently and 404 16 of 18 University course pages for 24 hours, which led to a versioned pre-push git hook (.githooks/pre-push, wired via core.hooksPath through a setup-hooks.sh that must be re-run after every clone) as a local backstop in addition to the CI check. Translation is not a SaaS integration — each app runs its own Python script (tools/translate.py) that does longest-first string substitution from per-page translation modules, rewrites internal links to /es/ and /pt/ prefixes, updates head metadata, and flips a language-toggle pill's active class; University's variant auto-discovers course slugs from public/courses/*.html so adding an 18th and 19th course didn't require touching the translation harness. Palettes are per-app CSS custom properties in each app's own site.css rather than the shared shared/tokens.css file, which the team explicitly noted was scaffolded but never wired in — University later needed a two-gold system (#c9a84c bright gold for large fills, #8a6a1d deep gold for small text) after the first single-gold pass failed a WCAG AA contrast check on cream. Studio's homepage carries several bespoke interactive modules: a before/after color-grade slider driven by a CSS custom property, an audio-comparison module that seek-gates a swap between two soundtracks on the same video frame, and a YouTube-facade converter that defers real iframe injection until click (TikTok embeds don't work at all, so those are link-out thumbnails instead). Backend endpoints diverge by product need: Studio has a Studio-only /api/inquiry for service inquiries against an enum of five media disciplines; University's /api/lead instead carries a course_interest column and a platform_application lead type for its approval-gated /join flow, and has no inquiry endpoint at all. A nightly D1 backup workflow needed max-parallel: 1 after a race condition where parallel matrix jobs pushing to a shared backups branch collided.

Creative approach

Craft

The two sites deliberately share a component grammar while inverting on tone: Studio is near-black with a lime accent chosen specifically to match the Evolve logo's actual wordmark color (recolored from a stock emerald after a direct visual comparison), University is warm cream with gold. Both use the same headline pattern borrowed from the anchor brokerage site — an eyebrow label, an editorial headline ending in an italic-emphasized closing phrase (rendered in Instrument Serif italic), a subhead, and paired primary/secondary CTAs — so a visitor moving between the three Evolve properties recognizes the family without the sites looking identical. Homepage stat strips, footer structure, and card patterns are the same component reused with different content, deliberately, to avoid re-solving layout problems per site.

Reframe

The insight was refusing to let 'sister sites' mean 'shared design system' in the literal sense. Instead of building one token file both sites import, each site owns its palette in its own CSS, and the shared token file exists in the repo but was consciously left unwired — because Studio and University sell to different buyer psychologies (production service vs. education subscription) and forcing a shared color contract would have fought that. The other reframe is enrollment: University's /join is explicitly an application form, not an instant-signup button, and every 'Start free' CTA on the site routes to it — turning what could read as a paywall into a curated-cohort narrative ('graduated off Skool' rather than 'built on Skool'), which is a product-positioning decision baked into the routing, not just copy.

Process and what failed

A voice-guard deploy check (grep for em/en dashes before push) initially existed only as a manual step, and it failed silently in a way that took 16 of 18 University course detail pages down to 404 for a full day before anyone noticed — the fix wasn't just patching the immediate break but institutionalizing it as a versioned pre-push git hook that survives being forgotten, backed up by the same check still running in CI. University's palette flipped entirely from dark to light on 2026-06-09 after initial build, and Studio's accent color was corrected from a stock emerald to a lime that actually matches the brand logo on 2026-06-21 — both are documented as deliberate late-stage reversals, not initial-spec choices. A post-launch accessibility pass found and fixed real WCAG AA contrast failures on University's footer and language switcher, and heading-level skips across both sites' process, booking, catalog, and instructor pages, tracked as discrete commits rather than absorbed into a single generic cleanup.

Outcome

Both sites are live on their own domains, deployed independently via path-filtered GitHub Actions on every push to main, with 101 commits from the initial scaffold on 2026-05-18 through late July 2026 showing continued iteration after initial launch — new courses added, a swapped-course-art bug fixed (Brand Authority OS and Inbox to Closings had each other's images), accessibility fixes, contrast corrections, and homepage modules (before/after slider, audio comparison) shipped weeks after the original build. The earliest commits after the initial scaffold were a content-integrity pass, not a feature pass: "Replace fabricated data with values from the live evolveestatesgroup.ai" and a "cross-bleed audit" that removed course names invented during scaffold, before either site carried any real content. GitHub Actions billing was blocked and then fixed early on, and the nightly D1 backup workflow needed a max-parallel: 1 fix after a race condition. Lead capture and the lead-magnet email flow are wired to Resend and D1 in production for both properties, with both og:image/course-art and .pages.dev preview hosts marked noindex as later SEO cleanup.