Medicine,
made precise.

One institution. A connected research landscape.

The homepage moves from microscopic discovery to global collaboration, then to the people, platforms, and programs that turn research into action. It is a continuous editorial composition—not a dashboard or a collection of unrelated promotional cards.

Audience: investigators, clinicians, research partners, industry, funders, and the wider community. Be welcoming to nonspecialists without suggesting that conceptual artwork represents a clinical result.

1. Medicine, made precise: a quiet, cinematic opening with a stable cell image.
2. One disease. Many signals: interdependence expressed through a light field and an evolving network.
3. Global Research Hubs: a celestial opener resolves into three distinct research priorities.
4. People and capabilities: real portraits provide human credibility; six disciplines occupy one continuous scientific landscape.
5. Activity and participation: programming, news, events, social content, impact, and a clear invitation to join.

Success criteria: an unfamiliar visitor can identify PRiME’s purpose, find a research priority, identify the people responsible, and reach a useful next action without completing an animation.

Refined cinematic science

Use depth, scale, restrained light, and selective focus. Close-up scientific forms should have one recognizable subject, with atmospheric detail supporting it. Do not add generic rings, decorative HUD lines, glass spheres, unrelated anatomy, or busy molecular wallpaper. Generated imagery is illustrative, not microscopy or evidence.

Image composition and asset roles

• Hero: preserve the approved cell composition and optical sharpness. No pointer-driven blur or camera sway.
• Global Hubs: retain the generated Earth horizon and the three approved research images in public/generated/. Ageing uses neural resilience, Oncology uses targeted discovery, and Women’s Health uses connected evidence—not whole organs or literal clinical claims.
• Research: prime-research-cinematic-06-v2.png remains a single continuous 2:1 image. Shift the shared image layer upward, not each tile independently. Keep all six focal subjects legible; place labels in negative space. Preserve the organic light mask and cursor trail without visible tile boxes.
• People: real, unfiltered portraits; straight edges and consistent 16px corner radius. Three leaders plus two stacked appointment placeholders on desktop. Never fabricate a face for an unappointed role.
• Programming: only the surrounding teal frame is diagonal. The full photograph stays inside its safe rectangle using object-fit: contain. Low-opacity diagonal layers belong behind, never across faces.

Motion choreography

Solar pass: retain the original horizon-rise sun, lens reflections, and star illumination in HubStarTitle.tsx. The sun travels toward the upper-right corner and clears before the A handoff. The later anamorphic experiment was not selected and is not used on the homepage. Archived flare experiment ↗

One disease. Many signals.: retain the pale cinematic background and the original abstract polygon network in PremiseNetworkField.tsx. Forty-four nodes morph between three forms, with changing connections, three depth layers, and restrained pointer response. The network is a decorative metaphor, not an Alzheimer’s illustration or clinical model. The later labelled signal study is no longer used in this section.

People-to-research interval: preserve the existing 32–48px breathing space. Six quiet, illuminated strands cross the marine background in ResearchTransition.tsx. This transition is deliberately still: it connects the chapters without adding another loop, scroll stop, or heading.

• Earth/title: stars gather behind the curved horizon and emerge as a readable title; the starry A continues into the first hub. Keep atmosphere subordinate to the text.
• Final hub: a one-shot settling pause lasts no more than 800ms. Continuous trackpad scrolling and held navigation keys must pass once that deadline expires; never require an idle gap or fresh gesture. Reverse scrolling, touch, and navigation bypass the pause. Onward scrolling contracts the image and brings up the next chapter over approximately 1.5 seconds, using a gentle ease-in/ease-out.
• People: modest vertical reveal, 24px travel, 700ms, 75ms stagger. No skewing, side clipping, hover zoom, or desaturation.
• Editorial sections: normal document scrolling and stable background art. Do not reintroduce pinned or heavy parallax backgrounds.
• Reduced motion: show readable static content. Pause, skip, keyboard, touch, and reverse navigation must remain available; never depend on motion to convey information.

Responsive and content rules

The desktop hub scene runs only above 760px wide and 700px high. Small screens and reduced-motion users receive the simpler layout. Use flexible text heights, balanced headings, and natural paragraph wrapping. Do not force desktop line breaks onto mobile. Body copy should normally be 16px or larger; 12px is a lower project limit, not proof of accessibility. Target 44px controls where practical.

Keep PRiME’s approved University of Toronto lockup intact. Only the slim top utility strip is black (#000000). The main logo/navigation row and mobile dropdown use U of T blue (#1e3765). The official reverse image stays in that main header and scrolls away with it; do not add a floating logo over the immersive scenes. Preserve the white beaver and books, proportional sizing, and clear space, without a drop shadow or altered strokes. The footer keeps the colour lockup.

Agency approval checkpoints

Approve: (1) static desktop/mobile composition, (2) motion timing on mouse, trackpad, and touch, (3) CMS content states, and (4) accessibility remediation. Compare against the approved reference at 1440×900, 1024×768, and 390×844. Protect faces, title spacing, persistent controls, and the six focal subjects at every checkpoint.

Preserve the experience, replace the content plumbing

The current reference is Next.js, not a WordPress theme. A WordPress rebuild needs custom components for the hub scene, research interaction, people dialogs, and background studio. Retain the approved assets and motion behaviour; a generic page-builder slider is not an equivalent implementation.

• Separate CMS fields from presentation: hub copy, people, biographies, image focal points, programs, stories, event dates, and links.
• Transfer and version the custom canvas/GSAP scenes as maintained frontend modules. Do not add transformed ancestor wrappers around pinned scenes without testing their positioning.
• Every person needs a name, role, portrait, approved biography, source URL, and optional research focus. Missing biographies should show an honest pending state.
• Source and verify event dates; “Upcoming” must follow the site timezone and published start/end times. The current Date TBA item is a placeholder.
• The social content is curated outbound content, not a live LinkedIn API integration. Agree on an editorial or supported integration workflow.
• The newsletter card currently hands off to PRiME’s external signup page. It does not itself confirm a subscription. Specify success/error states with the institution’s approved service.
• The shared editorial background is Light 5/20, Silicon plane. The 40-option chooser is hidden by default: tap Option (Mac) or Alt (PC) alone to show or hide it. Typing and modifier-key combinations do not activate it. Escape closes the panel, then hides the toolbar. Local selections persist in that browser; Reset restores 5/20. This is a design-review tool, not public navigation; remove it for institutional launch.

Delivery package: source access, asset inventory and rights, CMS field definitions, motion timing map, font licences, accessibility test evidence, environment ownership, release/rollback instructions, and institutional sign-off. Never transfer secrets in handoff documents.

New source files: PersonBiography.tsx and its CSS manage the native modal; VendorGuide.tsx holds this guide. ProgramShowcase.tsx controls the contained photography. CommunityCanvas.tsx and background-images.ts own the editorial background experiment.

Implementation review · 13 September 2026

Target: WCAG 2.2 AA, including the applicable WCAG 2.0/2.1 requirements. This is a scoped engineering review, not an AODA legal opinion or a certificate of conformance.

Result: zero automated violations in the tested desktop and mobile snapshots after remediation. The site is not yet verified conformant: motion, changing-image contrast, and assistive-technology testing remain release gates.

Scope and method: local homepage at 1440×900, 390×844, and narrow 320×800 layout. axe-core checks targeted WCAG 2.0/2.1/2.2 A and AA tags; each desktop/mobile scan returned 28 passing rule types. Contrast required manual review for 65 desktop and 110 mobile elements. Counts reflect different visible states, not all possible interactions or all 40 backgrounds.

Verified in this pass

• People dialogs: all five named people and both appointment placeholders open. Enter activates; Tab/Shift+Tab remain within the modal; Escape closes; focus returns to the originating button. The mobile dialog fits the viewport and scrolls internally.
• Layout: no horizontal document overflow in the tested 1440px, 390px, and 320px states. The people headings use identical font family, weight, size, and line-height. No visible text below 12px was found in the sampled mobile DOM.
• Navigation: research descriptions reveal on keyboard focus; the hub-to-leadership handoff completes and PageUp can reverse it; later-section links bypass the hub handoff.
• Remediated: two decorative appointment silhouettes incorrectly carried ARIA labels without a role (4.1.2). They are now hidden from assistive technology; the associated buttons name each position. A skip link, explicit modal focus loop, and research pause control were added.

Measured static colour pairs

Biography text #102d3a on #f2f5f1: 13.10:1. Biography actions #d9edf0 on #102d3a: 11.88:1. Admin supporting text #d0e0e5 on deep marine #061923: 13.22:1. All exceed the 4.5:1 normal-text threshold. These measurements do not certify text over photographs or gradients.

Outstanding findings and priorities

14 September design reversion: the original decorative polygon network has been restored. It respects reduced motion and stops when offscreen or the tab is hidden, but does not have the later signal study’s local Pause control. This remains part of the motion-control remediation below; do not treat the reverted design as accessibility sign-off.

• Major · 2.2.2: pause controls are local to their scenes. The background network and some decorative CSS animation do not have a unified user-operated pause. Provide a complete motion-control inventory and remediation before final launch.
• Major / verification required · 1.4.3, 1.4.11: automated contrast evaluation cannot resolve layered imagery. Check each selected production background, hub state, metadata label, focus ring, and hover state manually.
• Verification required · 1.3.1, 2.4.3, 4.1.2: native dialog and disclosure semantics were inspected, but no real VoiceOver/NVDA session was performed.
• Verification required · 1.4.4, 1.4.10, 1.4.12: a 320px viewport check is not a substitute for browser zoom and text-spacing tests. Complete those before sign-off.

Download the audit record ↗

Download the manual review and header retest ↗

Manual-review update: the enlarged reverse-logo header and mobile hero overlap were corrected. Essential headings hidden until scroll reveal and incomplete motion controls remain concerns. Image-backed contrast needs placement-specific testing. Real VoiceOver/NVDA, native zoom, flash analysis, and full text-spacing coverage are not signed off; see the detailed record.

Implemented safeguards

• Native biography dialog, a labelled Close button, Escape dismissal, modal focus containment, and return focus to the originating person.
• Semantic person buttons and research selection buttons. Research descriptions available on focus and on small screens, with an explicit highlight pause control.
• Hub skip/pause controls, reduced-motion layout, reversible navigation, and a final-hub momentum guard.
• Native nested disclosures for this handoff; content stays in document order when expanded.

Open release gates

• Assistive technology: full VoiceOver/Safari and NVDA/Firefox or Chrome review, including reading order, dynamic hub content, dialogs, forms, and all disclosures.
• Motion and light: evaluate the complete star sequence for flash thresholds and vestibular comfort; verify that pause stops every continuously moving decorative layer, not just the main scene.
• Contrast: measure text and controls at every background option and animation state. A static colour pair cannot establish contrast over changing imagery.
• Reflow: complete 200% zoom, 400%/320-CSS-pixel reflow, and WCAG text-spacing override checks across the entire site and external signup journey.
• Content: obtain approved full biographies, final event content, descriptive alternatives for meaningful imagery, and confirmed image usage rights.

Reference: W3C WCAG Quick Reference ↗. Target sizes of 44px are a project preference; WCAG 2.2 AA’s target-size minimum is 24px with specified exceptions.