Page Compositions — Concept Hub

What a page-composition doc is, why it exists, and the implementation contracts every per-airline doc plugs into. Start here before opening any of the three airline docs.

Part of Epic AB#1821 · Figma MEC file: gpO3masyyNNHxjvRtdcRo7 · Last updated 2026-07-15

What Is a Page-Composition Doc?

A page-composition doc (one per airline: UAL, DAL, FDX) is a per-screen, slot-by-slot breakdown of every MEC-customized screen for that airline: which container/component fills each numbered slot, in what order, linked to its exact Figma node — enough to implement without re-opening Figma. It deliberately excludes app-level chrome (status bar, top nav, bottom nav bar) since that's identical across every MEC and covered once, elsewhere — these docs are scoped to just the part that actually varies per airline: the content slot.

Not a design spec. Token values (colors, fonts) live in each airline's {mecId}-mec-spec.html — the page-composition doc links to it rather than repeating it. A page-composition doc answers "what renders here, and what data does it need," not "what color is it."

Implementation Contracts

Every slot in a page-composition doc ultimately resolves to one of two upstream APIs. These are the contracts that make a page-composition doc buildable rather than just a Figma inventory:

Theme Endpoint Contract

Per-MEC token map (colors, fonts, spacing, radii) delivered by GET /api/theme/{mecId} at login — the source for every color/font referenced in a page-composition doc's linked spec.

theme-endpoint-contract.html →
Content Endpoint Contract

The MobileContent API and its two content types — MenuItem (navigation) and DocumentItem (content) — that back nearly every populated slot in every page-composition doc.

content-endpoint-contract.html →
MEC Customization Mock Guide New

Real screens broken into small chunks, each paired with the theme/content JSON that produces it — a worked companion to the two contracts above, for the dev actually authoring MEC data.

mec-customization-mock-guide.html →
Navigation & Routing Contract

How MenuItem.Path drives native Shell navigation via INavigationService — what happens when a slot's MenuItem is tapped.

navigation-routing-contract.html →
Backend API Mapping Report

The source rationale behind the content contract's MenuItem vs DocumentItem model split, and the backend Change 1–5 tracker referenced throughout the airline docs.

backend-api-mapping-report.html →

Coverage at a Glance

AirlineScreens documentedComms contentTheme status
UAL — United 6 screens → Real, inline — sourced from comms-content.html (SharePoint DEPT_DSS ingest) Fully resolved — no open design questions
DAL — Delta 4 screens → Structure only — comms-content.html is entirely UAL-scoped; unpopulated feeds documented as-is (stub content), not guessed at Blocked — colors pixel-confirmed, intent open on DQ-15
FDX — FedEx 1 screen (WIP) → None yet — one real content frame exists; rest of canvas is unbranded scaffold or stray UAL-named artifacts Stub — no FDX brand colors found; font TBD (DQ-14)

Capture Methodology & Lessons Learned

1
Sweep the airline's full Figma canvas (gpO3masyyNNHxjvRtdcRo7) — every frame, including hidden/collapsed ones. FDX's canvas taught this the hard way: several frames were hidden and still literally named for UAL (CLE172, HOTEL COMMITTEE, UPA27) — copy-paste template leftovers, not real FDX content. A partial sweep would have mistaken template scaffolding for FDX-specific screens.
2
For each real, populated screen, capture a screenshot and list every slot in order, linking each component name to its exact Figma node id — this is what makes the doc implementable without re-opening Figma.
3
Cross-check every piece of visible text against comms-content.html. Where no matching row exists, say so explicitly — DAL's "SUBJECT LINE" / lorem-ipsum feeds are documented as unresolved stub content, not paraphrased as if they were real copy.
4
Read section labels literally, don't assume they're correct. DAL's Contract 2026 screen has a section header reading "UPA27 RESOURCES" over four podcast-platform icon buttons — "UPA" (United Pilots Association) makes no sense on a Delta page. Flagged as a likely copy-paste artifact rather than silently "corrected" or silently accepted.
5
Not every visible component maps to a documented content type. Representatives lists (AMPS-driven) are a confirmed real example of content that is not MobileContent-backed — flag these explicitly rather than forcing every slot into the MenuItem/DocumentItem shape. See the mock guide's Representatives chunk for the worked case.
6
Only document screens that actually have content. An airline with one real frame (FDX) gets a one-screen doc — not a padded-out doc pretending to cover screens that don't exist yet.

See Also