technical:features:26_organization_branding_and_personalisation
Table of Contents
26 — Organization branding and personalisation
Technical reference. For task-based help, see the corresponding user guide.
Documentation status: reviewed against implementation · Reviewed: 2026-07-21 · Editor rollout: pilot-gated · Primary users: eligible practice owners/administrators and linked families · Surfaces: coach portal, mobile web and platform API
Purpose
Organization branding lets a practice add a logo, a short welcome message and a coherent application palette. Mobile family and coach contexts inherit the active organization's branding while preserving a safe Littles default when no eligible brand is available.
User outcomes
| Persona | Outcome |
|---|---|
| Pilot coach owner/administrator | Builds a brand from a preset or individual tokens and previews it in day/night mobile contexts. |
| Linked family | Sees the practice identity on relevant access, home and care-plan surfaces. |
| Coach | Sees the active organization identity while working in coach context. |
| User without eligible branding | Receives the default Littles theme rather than a partially styled UI. |
Editor availability
- The Branding navigation item is a controlled pilot.
- In development, coach actors may access it. In production, the coach must match the configured branding-sandbox email allowlist (with a maintained pilot fallback list).
- This client rollout gate does not grant write authority. The platform independently requires an active
ownerororganizationAdminmembership in an organization that is neither suspended nor archived. - The preview can run in simulator-only mode. Simulator changes are intentionally not a claim that the organization has been saved.
Editable model
| Area | Fields and rules |
|---|---|
| Identity | Optional logoAssetId and optional trimmed welcomeMessage of 1–180 characters when present. |
| Legacy anchors | Optional primaryColor, accentColor and backgroundColor. |
| Full theme | documentBackgroundColor, screenBackgroundColor, surfaceColor, mutedSurfaceColor, softSurfaceColor, textColor, greenColor, lavenderColor, yellowColor, pinkColor, deepGreenColor and blueColor. |
| Color syntax | Every supplied color is exactly hexadecimal #RRGGBB; fields may be null to use derived/default values. |
Functional flow
1. Start from current branding or a preset
- The editor loads
GET /coach/organization/branding. - The coach can apply a curated preset and then adjust individual tokens.
- Day/night controls change the preview context. Mobile web derives a coordinated night palette from the day tokens rather than persisting a second independent theme.
2. Add a logo and welcome line
- JPEG, PNG and WebP images are compressed to a maximum side of 1,024 px at approximately 0.8 quality; GIF remains uncompressed so animation is not destroyed.
- The portal requests a signed upload in
organization-brandingusing anorganizations/<organizationId>/…path, uploads the image, then saves its object path aslogoAssetId. - The welcome message can be previewed in the mobile welcome treatment before save.
3. Preview without leaking brand payloads
- The coach portal embeds the mobile build and sends preview changes with
postMessage. - The preview URL carries only the initial route/simulator flag; logo paths and palette data are not serialized into the URL.
- Mobile web applies preview CSS variables without converting the simulation into trusted persisted organization data.
4. Save and inherit
- Apply branding sends the normalized model to
PUT /coach/organization/branding. - Mobile web resolves the organization associated with the current coach or authorized family context and maps the theme into CSS custom properties.
- Branding is reused on invitation/access views, family home and activity/analysis areas, allergy ladders, session preparation, questionnaires, sleep plans and subscription/access treatments.
- An invite-acceptance flow can present the configured welcome message for the newly linked organization.
Validation and user-visible states
| State | Behaviour |
|---|---|
| Loading | Editor waits for the current organization model; mobile keeps its default theme until resolved. |
| Invalid color | Shared schema rejects anything other than #RRGGBB; the saved brand is unchanged. |
| No logo/token | Default/derived visual values fill the gap. |
| Preview only | Changes affect the simulator immediately but are not family-visible until successfully saved. |
| Upload failure | Existing logo remains referenced; the coach can retry. |
| Save success | Returned branding becomes the editor baseline and downstream clients resolve it on refresh/context change. |
| Suspended/archived organization | Branding writes are denied and active-brand resolution falls back safely. |
| No linked active organization | Mobile uses the default Littles brand. |
Platform API contract
| Method and route | Purpose |
|---|---|
GET /coach/organization/branding | Read the eligible coach organization's branding. |
PUT /coach/organization/branding | Validate and replace logo, welcome and color fields. |
POST /files/signed-upload-url | Authorize the organization-logo upload. |
POST /files/signed-download-url | Resolve a short-lived logo URL for an authorized context. |
Authorization and privacy
- The production allowlist decides whether the experimental editor is visible; owner/admin membership decides whether data can be written.
- A family receives branding only through an authorized active organization relationship. Client-provided organization IDs are not trusted.
- Object paths are stored; media is delivered through short-lived authorization described in Feature 30.
- Preview messages validate their hosting context. Branding data is deliberately excluded from shareable URLs.
- A brand cannot weaken route authorization or tenant isolation; it changes presentation only.
Branding is still a pilot editor. Do not promise general availability from the existence of the API or simulator, and do not bypass the allowlist by linking directly to the route.
Acceptance checklist
- [ ] Production editor visibility follows the configured pilot gate.
- [ ] Server writes require an active owner/admin membership and reject suspended/archived organizations.
- [ ] Every optional color validates as
#RRGGBBand null values fall back coherently. - [ ] Logo preparation preserves supported formats and uses an organization-scoped signed path.
- [ ] Preview updates day/night presentation without putting brand data in the URL.
- [ ] Save propagates to authorized coach/family contexts and no unrelated tenant.
- [ ] Missing or failed branding resolution leaves an accessible default theme.
- [ ] Welcome text respects the 180-character limit.
Source evidence
- Coach portal:
admin-web/src/routes/BrandingPanel.tsx,admin-web/src/branding-sandbox.ts,admin-web/src/mobile-web-build-url.ts - Mobile web:
mobile-web/src/hooks/useOrganizationBrandTheme.ts,mobile-web/src/api/organizationBranding.ts,mobile-web/src/brandingPreview/simulator.ts, branding components andmobile-web/src/App.tsx - Platform:
platform/packages/shared/src/access.ts,platform/apps/api/src/routes/coach-routes.ts,platform/apps/api/src/services/coach-organization-branding-service.ts
