TpEMIS · Multi-tenant brands

TpEMIS tenant-switcher pilot

Scaffolded

Single-select picker over the 10 universities the TpEMIS platform onboards. Switching the tenant re-skins the entire subtree to that university's bounded brand surface — primary / accent / secondary + dark-mode pair. TpEMIS-locked tokens (type, spacing, radii, neutrals, status colours) stay constant across tenants.

Live tenant switch (light + dark)

Mode is scoped to the demo card below; the rest of the showcase keeps its global mode.

Welcome to your portal

This card uses --color-bg-brand for the header and neutral surface tokens for the body. The accent badge below and the CTA both consume --color-accent.

Accent badge

All 10 tenants — bounded surface preview

Each tile is wrapped in .brand-tpemis-<id> and renders the same atom: a brand label + an accent badge. The 5 bounded tokens (primary, accent, secondary, on-brand text, on-accent text) re-tint per tile; everything else (typography, radii, spacing, status colours) stays TpEMIS-locked.

Brand
Njala

Njala University

Accent
Brand
USL

University of Sierra Leone

Accent
Brand
FBC

Fourah Bay College

Accent
Brand
COMAHS

College of Medicine and Allied Health Sciences

Accent
Brand
IPAM

Institute of Public Administration and Management

Accent
Brand
ETU

Eastern Technical University

Accent
Brand
EBKUST

Ernest Bai Koroma University of Science and Technology

Accent
Brand
UNIMAK

University of Makeni

Accent
Brand
FTU

Freetown Teachers University

Accent
Brand
GII

Greenfields International Institute

Accent

Bounded surface — what changes per tenant

  • --brand-primary — nav header bg, hero start, primary CTA bg
  • --color-accent — secondary CTAs, links, badges, focus-ring tint
  • --brand-secondary — hero gradient end, decorative borders (optional)
  • --color-text-on-brand — text colour on bg-brand surfaces
  • --color-text-on-accent — text colour on bg-accent surfaces
  • Plus a .dark.brand-tpemis-<id> pair for each, lifting brand-as-text to the 300-step

Locked TpEMIS-owned tokens (type system, spacing, radii, motion, status colours, neutral grayscale, focus-ring shape) are deliberately never overridden per tenant. The full kickoff rationale is in docs/PHASE_TENANT_BRANDS_KICKOFF.md.

Accessibility

Every tenant brand passes a build-time contrast validator (tokens/scripts/validate-brand-contrast.cjs) that fails the build if any of the bounded-surface contrast pairs drop below WCAG 2.2 AA thresholds — text-on-brand ≥ 4.5:1, text-on-accent ≥ 4.5:1, brand-as-text on light page ≥ 4.5:1. The validator also enforces a variation budget on --brand-primary (saturation ≥ 35%, lightness 25–50%) so tenant brands stay visually distinct without drifting into "broken grey".