Developer onboarding reference for per-airline branded experiences in ALPA Mobile.
What is MEC theming? MEC stands for Master Executive Council — the local pilot union chapter for each airline. Each MEC can request a branded version of ALPA Mobile that uses their airline's colors, fonts, and logos. No code changes are needed for a standard MEC: all variation lives in a per-MEC token map delivered by GET /api/theme/{mecId} at login. The client hydrates CSS custom properties (Blazor) or XAML DynamicResource keys from this map.
Epic AB#2087 (Presentation Extraction) — the presentation layer these tokens bind through (now the ALPAMobile.Presentation RCL, D61) — resolved 2026-07-01. MEC theming work is no longer implementation-gated.
What a page-composition doc is, the implementation contracts (theme + content endpoints, mock guide) every per-airline doc below plugs into, and coverage at a glance.
UAL Page Compositions →Slot-by-slot breakdown of every MEC-customized screen (Home variant, LEC detail, Committees, Hotel, UPA27), with Figma screenshots and comms content surfaced inline.
DAL Page Compositions →Home, Council 44 (ATL), Scheduling Committee, Contract 2026 — structure + screenshots + per-node Figma deep-links. No comms content captured yet (structure only).
FDX Page Compositions →Work in progress — only Home is real content today; the rest of the canvas is unbranded template scaffold or stray UAL-named artifacts.
Screen Mapping →Node ID registry for every MEC frame captured, cross-referenced against the comms-content.html sheet ingest, with per-airline coverage status.
| Airline | Figma node | Status | Brand spec (tokens) | Page compositions (structure) |
|---|---|---|---|---|
| UAL — United Airlines | 20657:502 |
Partial — tokens + frame/asset inventory captured (2026-07-06); image extraction pending | ual-mec-spec.html → | 6 screens → |
| FDX — FedEx | 21010:2664 |
Stub — re-checked 2026-07-06, still no progress; needs design nudge | fdx-mec-spec.html → | 1 screen (WIP) → |
| DAL — Delta Air Lines | 21247:2907 |
Colors pixel-confirmed (2026-07-06); DQ-15 intent still open; font confirmed | dal-mec-spec.html → | 4 screens → |
#002243 — Brand (nav bar, headers)
#bed6fb — Text/On-Brand (periwinkle)
#94ebfe — Links / accents
Font: League Spartan (heading + body)
Token colors: none found (re-checked 2026-07-06 — zero FDX brand colors anywhere on the page)
Font: TBD — open as DQ-14
Known issue: FDX Figma canvas still has frames labeled "UAL Media Hub" — unresolved since 2026-06-26.
Needs a direct design nudge — more Figma activity hasn't produced FDX progress.
Font: Bebas Neue (headings) + League Spartan (body)
#002a50 — Welcome/featured-content surfaces · #09243d — NAVIGATE/TOOLS card surfaces (both pixel-confirmed 2026-07-06)
Open: DQ-15 — is the two-tone pattern intentional? Plus: nav-bar branding, heart-red confirmation.
gpO3masyyNNHxjvRtdcRo7) with branded screens for the airline. Figma variables should use the same token path names as the base design (e.g. Surface/Brand, Text/On-Brand).figma-incremental-sync skill. Pay attention to Phase 3 (token delta), Phase 4 (spec updates), and §3.6 MEC per-airline page capture — a MEC sync is not done once the color/font tokens are captured; every frame on the airline's page and its image/icon assets must be inventoried too, and any color read from raw fills needs a screenshot-confirmed pass before it goes in the spec as fact.{mecId}-mec-spec.html. Also write a {mecId}-mec-page-compositions.html — copy DAL's as the template (or UAL's if comms content exists for the airline): one page-card per real, populated screen, component names linked to their exact Figma node, real screenshots in ../screen-assets/. Only document screens that actually have content — an airline with one real frame gets a one-screen doc, not a padded-out one (see FDX's).Surface/Brand, Text/On-Brand, Font/Heading, Font/Body, etc.) derived from Figma. See theme-endpoint-contract.html for the full token namespace and the UAL example payload.maui-devflow MAUI screenshot and maui-devflow MAUI tree to verify the MEC tokens applied correctly. Check navBar-bottom color, primary button color, and Text/On-Brand contrast.Surface/Brand, Border/Brand, Text/On-Brand, Font/Heading, Font/Body, Action/Primary, Nav/Background — must bind via DynamicResource (XAML) or a CSS custom property (Blazor). Never hardcode hex values for these. See design-tokens.html — Surface Tokens.#bed6fb on its dark navy background. Always drive this from the theme token, never assume white.Surface/Brand exactly. Interior page backgrounds stay at bg-main (#f5f7fa) regardless of MEC — only the nav bar goes dark-navy-branded.font-synthesis) is not acceptable.Status/Error, Status/Success, Status/OnTime etc. are fixed across all MECs for regulatory/safety legibility reasons.