← Back to Index

ALPA Mobile — Design Tokens Reference

Updated: 2026-07-30 17:52 ET · Audited: 2026-07-02 13:37 ET

Foundations reconciliation note (2026-06-29): the canonical Figma foundation frames (Colors 2093:566, Buttons 1:16, Grid/Spacing 1:17, Forms 2093:702, Icons 3:7) were never diffed against this token doc. Captured discrepancies — Surface/Text/Interactive/Border semantic naming, a Blue/Gray primitive ramp, the named spacing scale, and button geometry — are documented (capture-only, no values changed) in foundations-reconciliation.html.

Color Palette

Brand & Primary

Text Colors

Border & Surface

Status / Semantic

MEC Brand & Component Tokens 2026-06-10

Border Accents

Typography

All values extracted from live Figma component instances. Superseded in part: the 2026-07-30 census found four declared families, not three — see Typography Font Mapping § Census.

Font Size Tokens

Named size tokens extracted from Figma component instances. Figma variable paths (2026-06-17 revision) added in right columns. Tablet mode values are the Figma "Tablet" collection switch on the Typography variable set (D12).

Docs Token	Figma Path	Phone (Mobile)	Tablet	Used In
display-heading/xs	Font Size/Display Heading/XS	16 px	TBD	card-sm title, Welcome heading, card-md title
display-heading/s	Font Size/Display Heading/S	20 px	TBD	Feed section titles, card-lg title
display-heading/m	Font Size/Display Heading/M	28 px	TBD	card-lg hero title
display-heading/l	Font Size/Display Heading/L	32 px	36 px ↑	Large/hero headings (tablet template, card-lg variants)
body/l	Font Size/Body/L	18 px	20 px ↑	card-lg body text, notification body, "View Contract" link
body/m	Font Size/Body/M	16 px	TBD	Secondary body text, flight card time
body/s	Font Size/Body/S	14 px	TBD	Flight number, aircraft type, metadata
other/eyebrow	Font Size/Other/eyebrow	12 px	—	Eyebrow / label (ls 5%)
other/button	Font Size/Other/Button	15 px	—	Primary button label
other/caption	Font Size/Other/Caption	12 px	—	Flight leg totals, metadata captions

Note: "TBD" tablet values require a full Figma variable read (Figma API or Figma SDK). The annotation confirms the two bracketed values above; remaining deltas are "modest." See D12 in naming-decisions-record.html.

Spacing & Layout Tokens

Inferred 2026-06-26 from auto-layout padding and gap values across 9 component nodes (home screen, carousel, card-lg, card-md, card-btn, navBar-bottom, Section Title, listy card, notification card). The scale is a strict 4 px grid. DQ-12 status: tentative — 3 outlier values still need design confirmation (see table below).

Correction (2026-06-29): a previous note here stated "No Figma spacing variable panel exists." That was false. A dedicated spacing panel does exist on Figma page 📐 Grid, Columns, Spacing — frame "Mobile-360" (117:176) — with a full named 14-step scale (xtiny 4 → xmassive 96), plus a column system (2002:483). The scale below was inferred from component auto-layout and is not yet reconciled against that canonical panel (several Figma steps — large 28, xlarge 32, huge 48+ — are missing here, and names differ: xxs/xs vs xxsmall/xsmall). Reconciliation is captured (not applied) in foundations-reconciliation.html; no token values changed here.

UAL MEC: Identical spacing to base — no MEC overrides. The scale below applies universally across all MECs.

Figma CSS var	Figma path	Theme token (PascalCase)	Value	Primary usage (inferred from nodes)
--none	—	Spacing/None	0 px	Flush edge layouts, icon-to-edge alignment
--xtiny	Spacing/xtiny	Spacing/XTiny	4 px ✓	Button card body gap (4735:13033), nav route icon px, inline icon gaps, UAL welcome body gap. Confirmed via get_variable_defs on card-duty period-alt (4617:13877) 2026-06-22.
--tiny	— (no Figma var path found)	Spacing/Tiny	8 px ✓	Dominant step (14 occurrences). card-lg content top padding, card-btn outer all sides, navBar-bottom bottom padding, card-md status bar, flight card inner padding, carousel item gap, nav item icon gap.
--xxsmall	Spacing/xxsmall	Spacing/XXSmall	12 px ✓	card-lg and card-md content item gap. Also used as button/form icon-text gap. Confirmed via get_variable_defs on card-duty period-alt (4617:13877) 2026-06-22.
--xsmall --page-margins	Spacing/xsmall	Spacing/Small	16 px ✓	Page horizontal margins, navBar-bottom left/right, nav item vertical padding, listy card content row px, UAL feed container gap. --page-margins is a semantic alias for the same value — keep both names.
--small	Spacing/small	Spacing/Medium	20 px ✓	Notification card outer item gap (4864:31901). Nav item padding-y on larger slots.
--medium	Spacing/medium	Spacing/Large	24 px ✓	card-lg content bottom padding, card-md outer padding, notification card outer padding (T=24, L=24).
--xxlarge	—	Spacing/XXLarge	40 px	Page-level vertical margin (not yet confirmed from auto-layout sweep — retained from prior capture).
—	—	—	8	--page-columns: grid column count, not a spacing token.

Other layout vars: --page-columns: 8 (grid column count, not a spacing token). Button/form padding values (16 px h/v, 12 px icon-text gap) align with --xsmall and --xxsmall respectively — see Buttons and Form Fields token paths below.

Component Dimensions

All dimensions in density-independent points (dp/pt). Values are from the Figma source at 1× density.

Component	Width	Height	Background	Corner Radius	Notes
card-lg	361	343	#ffffff	—	Image area: 361×200. Content area: 361×143
card-md	250	148	#ffffff	—	Image area: 250×200. Has notification badge (18×18, r=30, #c02126)
card-sm	361	51	#ffffff	—	Small list-row card. Token: --card-sm-width/height
card-btn	116	106	#ffffff	—	Icon-tile navigation button used in Button Group. Token: --card-btn-width/height
card-button (ButtonCard)	353 (content) 393 full viewport	Default: 189 Variant2: 129	#ffffff	—	New scaffold component (D14): description text + CTA button. 2 variants confirmed. Live Figma: node 4074:4624 (Default 353×189), node 4104:5452 (Variant2 353×129). DQ-5 resolved 2026-06-22.
card-notification	345	203	#ffffff / stroke #05273e	—	Icon + date + title + body. Icon area: 44×44
button-sm	151	36	#007bc2	4	Label in Futura PT Bold 12px white (DQ-1 resolved — was Futura LT Pro)
flight card-og (FlightCard)	353	Default/Swipe: 164 Expanded: 1361	#ffffff / stroke #e3e3e3	—	Renamed from flight segment card in 2026-06-17 rev (D15). Expandable. States: Default · Swipe · Expanded. Route line: #9ba1a8. Plane icon: r=62. Live Figma node 4713:19868. DQ-5 resolved 2026-06-22. Token: --card-flight-width/height
flight card-recent searches	353	115	#ffffff / stroke #e3e3e3	—	Compact list-row variant for the Recent Searches feed. Live Figma node 4450:11208. DQ-5 resolved 2026-06-22.
flight detail flight info	297	154	#ffffff	—	Flight leg detail panel (Departure or Arrival side, not both). Fields: DirectionLabel · StatusBadge (incl. delay duration, e.g. "Delayed 34m") · Airport code · Time · FlightNumber · Gate · AircraftModel · ActionLinks (KCM, Jumpseat Policy) · UpdatedTimestamp. Appears in: FTDT expanded flight-card detail panel, Jumpseat detail pages. Symbol master node 4325:6399. DQ-10 open — reusability vs FlightSegmentCardViewModel.
card-duty period-alt (Duty Period Card)	345	Default: 237 Variant2: 1051 delete demo: 237	#ffffff	—	Duty period summary card. Variant2 (1051 px) is fully expanded detail view (MANAGE FLIGHTS & DETAILS). Delete demo = swipe-reveal red strip. Master node 4617:13876 confirmed via get_metadata 2026-06-22. DQ-5 resolved, DQ-11 open (embedded flight rows).
section title	313	38	transparent / stroke #e3e3e3	—	Label in Inter Bold 12px #05273e
navBar-bottom	393	88	#05273e	—	5 nav items, each 53×80. Label: Futura PT Medium 12px #fff. Token: --navbar-bottom-*
navBar-bottom-tablet (D12)	800 ✓	TBD	#05273e	—	Tablet nav bar. Deferred-responsive tier (D12). Width 800 confirmed from .fig binary (node 5452:267); height not yet resolved in live Figma metadata. Token: --navbar-bottom-tablet-width.
search bar DEPRECATED	313 (content)	auto	#ffffff	—	Dropped 2026-06-10 (0 occurrences). Successor: Search screen + search secondary buttons.
slider re-scoped	313	63	transparent	—	2026-06-10: NOT the Carousel — it's the Carousel's scroll-position indicator (track #e3e3e3 + thumb #007bc2 + min/max labels). Carousel = horizontal scrolling feed.

card-lg — Layer Tree (from Figma)

card-notification — Layer Tree (from Figma)

flight card-og (FlightCard) — Layer Tree (from Figma)

Previously flight segment card. Renamed in 2026-06-17 revision (D15). Structure unchanged; adds Swipe state.

navBar-bottom — Layer Tree (from Figma)

Tablet Typography Mode (2026-06-17 revision · D12)

The Figma Typography variable collection has two modes: Mobile (phone) and Tablet. Switching a frame's type mode reflows every bound style — it is a collection switch, not a zoom. The designer annotation: "a modest bump (Body 18→20, Display L 32→36, etc.), not a zoom."

Figma Token Path	Mobile (phone)	Tablet	Delta	CSS variable
Font Size/Body/L	18 px	20 px	+2	--font-body-l-size / --font-body-l-size-tablet
Font Size/Display Heading/L	32 px	36 px	+4	--font-display-l-size / --font-display-l-size-tablet
Font Size/Body/M	18 px ✓	TBD tablet	est. +2	--font-body-m-size Note: variable defs on card-duty period-alt returned Body/M=18, which matches Body/L above — confirm whether this token is overridden in that component context vs the global 16 px value in the Font Size table.
Font Size/Display Heading/M and below	TBD	TBD	est. +2–4	—

TBD values require a full Figma variable read. Confirmed values sourced from designer annotation in canvas.fig at 0x77acb8. Code implementation: tablet layout context switches the CSS variable set or a platform-level size modifier — do not subclass ViewModels (D12).

2026-06-17 New Token Paths (ALPAmobileWtablet_20260617)

New Figma variable paths introduced in the 2026-06-17 revision. Pixel values require a full Figma API variable read to confirm. Token path names are authoritative from binary extraction.

Spacing

All values confirmed 2026-06-26 via auto-layout inference sweep (9 component nodes). See Spacing & Layout Tokens for full usage detail.

Figma Path	Value	Notes
Spacing/medium	24 px ✓	card-lg content bottom padding, notification card outer padding. (CSS var: --medium)
Spacing/small	20 px ✓	Notification card outer item gap, nav item padding on larger slots. (CSS var: --small)
Spacing/xsmall	16 px ✓	Page margin, card inner padding, list item py. Same value as --page-margins. (CSS var: --xsmall)
Spacing/xtiny	4 px ✓	Tight inline gaps, icon badge offsets. Confirmed via get_variable_defs 2026-06-22 + sweep 2026-06-26. (CSS var: --xtiny)
Spacing/xxsmall	12 px ✓	Card content item gap, button icon-text gap. Confirmed via get_variable_defs 2026-06-22 + sweep 2026-06-26. (CSS var: --xxsmall)

Buttons and Form Fields

Figma Path	Value	Notes
Buttons and Form Fields/Horizontal Padding	TBD	Button horizontal inner padding
Buttons and Form Fields/Vertical Padding	TBD	Button vertical inner padding
Buttons and Form Fields/Icon-Text Gap	TBD	Gap between leading icon and button label
Buttons and Form Fields/Vertical Gap	TBD	Gap between stacked buttons / form fields
Buttons and Form Fields/Horizontal Gap	TBD	Gap between inline buttons

Component Widths

Figma Path	Value	Notes
Component Widths/Full	TBD	Full-bleed component width (≈ screen width)
Component Widths/Large	TBD	Large card width (est. ≈361 px)
Component Widths/Medium	TBD	Medium card width (est. ≈250–353 px)
Component Widths/Small	TBD	Small card / tile width (est. ≈116–250 px)

Button Style Tokens (D14)

Three button style tiers introduced in 2026-06-17. These apply to the CallToAction property of ButtonCardViewModel (D14) and to standalone ButtonViewModel instances.

Figma Path	Notes
Buttons/Primary Button	High-emphasis CTA (filled, brand blue). Used as CTA in card-button (ButtonCard).
Buttons/Secondary Button	Medium-emphasis action (outlined or tinted).
Buttons/Tertiary Button	Low-emphasis / underline action. Maps to "Underline Button" pattern already in flight card detail.

Border Radius

Full set confirmed 2026-06-26 — reconciled against theme endpoint contract (D38). Theme token path uses BorderRadius/ (no space) as the API key; Figma source uses Border Radius/ (with space).

Figma Path	Theme Token (API key)	Value	CSS var	Notes
Border Radius/None	BorderRadius/None	0px ✓	—	Flush containers, full-bleed banners
Border Radius/S	BorderRadius/S	4px ✓	--radius-s	Chips, tags, inline badges. Node 4993:2. Confirms --button-sm-radius: 4px.
Border Radius/M	BorderRadius/M	8px ✓	—	Standard card rounding — HeroCard, CardSmall, CardText. Default client fallback when CornerRadiusToken absent.
Border Radius/L	BorderRadius/L	12px ✓	--radius-l	Prominent rounding — ButtonCard, MEC grid tiles. NEW 2026-06-26 Phase 1+2.
Border Radius/XL	BorderRadius/XL	16px ✓	—	Large panels — welcome card stack, full-width modals
Border Radius/Circle	BorderRadius/Full	50% ✓	—	Pill / circle — avatar frames, FAB. Node 2310:0.

2026-06-26 New Token Paths (Phase 1+2 component capture)

Additional Figma variable paths discovered during the Phase 1+2 component library capture (2026-06-26). Token values require a full Figma API variable read (get_variable_defs) to confirm. All listed as TBD with estimates where inferable from adjacent tokens.

Border Colors

Figma Path	Value	CSS Variable	Notes
Border/Red	TBD (est. #c02126)	--border-red	Error / destructive border. Likely aliases Status/Error (#c02126) — confirm in library file.

Interactive

Figma Path	Value	CSS Variable	Notes
Interactive/Blue-dk	TBD (est. #005f99 or #05273e)	--interactive-blue-dk	Dark interactive state — hover / pressed on primary interactive elements. Pairs with existing Interactive/Blue-lt (#007bc2).

Typography Spacing

Spacing tokens scoped to typography layout rather than component auto-layout. All values TBD — read from Figma Typography variable collection.

Figma Path	Value	CSS Variable	Notes
Typography/Media to Caption Gap	TBD	--typo-media-caption-gap	Gap between an image/media element and its caption text row.
Typography/Vertical Spacing in WYSIWYG	TBD	--typo-wysiwyg-spacing	Paragraph/block vertical spacing inside rich-text (WYSIWYG) content regions (e.g. contract or news article body).
Typography/Extra Margin over Headings	TBD	--typo-heading-extra-margin	Additional top margin applied before headings within body content (WYSIWYG context).

MEC Theming — Per-Pilot-Group Customization

The Figma token system has four named sets: core (primitive values), light (light mode, enabled), dark (dark mode, disabled), and theme (MEC customization layer, enabled). MEC branding is applied by swapping the theme token set — the component library itself does not change. Designer annotation verbatim:

MEC theming — restyle, don't rebuild. This United example shows the core components re-skinned to a MEC's brand: color palette, rounded corners, accent-border treatments, and the like. Same components, themed per MEC — not bespoke builds.

Semantic Theming Hooks

These token paths are the contact surface between the base component library and a MEC's brand. A MEC theme overrides these; base components reference them rather than hardcoding color values.

Figma Path	Role	Base (ALPA)	MEC Override example (United)
Surface/Brand	Primary branded surface (nav bar, card header tint)	#05273E (Navy)	United Brand/Blue-800
Border/Brand	Accent border on branded elements	#007BC2 (Blue)	United Brand/Blue-500
Text/On-Brand	Text color when rendered on Surface/Brand	#FFFFFF	White or MEC contrast color
Accents/Blue	Interactive accent / link / CTA color	#007BC2	United Brand/Blue-400
Accents/Indigo	Secondary accent (alternative to blue)	TBD	TBD
Accents/Red	Destructive / warning accent	TBD (est. #C02126)	TBD

Accent sub-modes: Light, Dark, IC-Light, IC-Dark (IC = inverted/contrast). United palette hex values confirmed 2026-06-22 via get_variable_defs on MEC frame node 4684:7914 (DQ-7 resolved).

United Airlines MEC Example Palette

The Figma file uses United Airlines MEC as the example theming scenario. All five token hex values confirmed via live Figma variable read (DQ-7 resolved 2026-06-22).

Token Path	Hex Value	Swatch	Role
United Brand/Blue-800	#002243		Darkest blue — nav bar background (replaces Surface/Brand)
United Brand/Blue-600	#001262		Mid-dark blue — active states, hover
United Brand/Blue-500	#0008ce		Core brand blue — buttons, borders
United Brand/Blue-400	#94ebfe		Lighter blue — links, CTA accent
United Brand/Grey-100	#f7f7f7		Neutral light grey — surface backgrounds, dividers

Surface Tokens — Razor vs XAML Implementation Note

The Figma token surface model (Surface/*, Border/*, Text/*, Fills/*) is architected for the Razor/Blazor Hybrid rendering path, where tokens map directly to CSS custom properties (background-color, border-color, color). The XAML/MAUI rendering path uses a structurally different surface model that requires explicit mapping.

Full Surface Token Inventory

Figma Path	Razor (CSS) binding	XAML/MAUI binding (map at native-XAML surface build)
Surface/Default	background-color: var(--surface-default)	BackgroundColor → {StaticResource SurfaceDefault}
Surface/Primary	background-color: var(--surface-primary)	BackgroundColor → {StaticResource SurfacePrimary}
Surface/Secondary	background-color: var(--surface-secondary)	BackgroundColor → {StaticResource SurfaceSecondary}
Surface/Subtle	background-color: var(--surface-subtle)	BackgroundColor → {StaticResource SurfaceSubtle}
Surface/Brand	background-color: var(--surface-brand) — swapped by MEC theme	BackgroundColor → {DynamicResource SurfaceBrand} — must use DynamicResource (not Static) to support runtime MEC theme swap
Surface/LIght	background-color: var(--surface-light) (note: Figma typo — "LIght")	BackgroundColor → {StaticResource SurfaceLight}
Fills/Secondary	background-color or fill on non-card surfaces	BackgroundColor or Color on shapes/borders
Fills/Tertiary	Tertiary fill (layover rows, alternating surfaces)	BackgroundColor → {StaticResource FillsTertiary}

XAML Theming Architecture (ALPAMobile.Presentation native-XAML guidance)

When building the native-XAML surface of ALPAMobile.Presentation, the surface token mapping defines the theming contract. Key rules:

• Static vs Dynamic resources: Base/ALPA tokens use StaticResource. Any token that participates in MEC theme swapping (Surface/Brand, Border/Brand, Text/On-Brand, Accents/*) must use DynamicResource so the ResourceDictionary merge at runtime takes effect.
• MEC theme swap mechanism: MAUI's ResourceDictionary.MergedDictionaries — load the base AlpaTheme.xaml then merge a MecTheme.xaml on top. The MEC dictionary only needs to define the tokens it overrides (Surface/Brand, Border/Brand, accent palette).
• No ViewModel subclassing for theming: MEC theming is purely a resource layer. ComponentViewModel and its descendants carry no color data — color resolution lives in XAML resource dictionaries or the Razor CSS variable swap.
• Razor path: CSS custom properties on :root are overridden per-MEC by injecting a <style> block with the MEC's brand values. The CSS variable names in this doc (--surface-brand etc.) are the contract.
• Figma typo: Surface/LIght has a capital "I" — use SurfaceLight (normalized) in all code; do not replicate the Figma typo in resource key names.
• Interior-page background pattern (FTDT, Flight Finder, similar screens): The interior content area uses bg-main (#f5f7fa, CSS: --bg-main) as the page background color — not Surface/Brand (#05273e). A faint watermark image is overlaid at mix-blend-multiply over this light background. Surface/Brand is reserved exclusively for navBar-bottom (and navBar-top when applicable). Using #05273e as an interior-page background is a color-assignment error.

This mapping is a build-time task, not a Figma sync task. Flag it as a prerequisite when the native-XAML surface work item is created (the Blazor RCL shipped 2026-07-15, D61 — the XAML mapping remains open).

Theme Endpoint — Complete Token Namespace Reference

Full HTTP contract: theme-endpoint-contract.html  ·  Token values used in BackgroundToken fields: dynamic-feed-api-contract.html §3.4

The theme endpoint delivers one flat token map per mecId, queried at login and cached client-side. It carries every visual property that varies by MEC brand: surface colors, text colors, border colors, icon tints, action-button colors, navigation chrome, and semantic status colors. Frontend hydrates the component library by mapping each token to a CSS custom property (e.g. --surface-brand) or a XAML DynamicResource key (e.g. SurfaceBrand). The base ALPA values below are the fallback when no MEC theme is loaded.

On-* pairing rule. Every Surface/* token a MEC can override has a paired Text/On-* (and/or Icon/On-*) counterpart guaranteeing accessible contrast. A component binding Surface/Brand as its background must also bind Text/On-Brand for its text — never hard-code #ffffff directly, as a MEC could override the surface to a light color. See Surface Tokens — XAML Implementation Note for Razor / XAML binding rules.

Namespace Overview

Namespace	Purpose	MEC-variable?	Notes
Surface/*	Background fills for containers, cards, and page regions	Yes — Surface/Brand	Always pair with the matching Text/On-* token
Text/*	Foreground text colors including On-* paired tokens	Yes — all On-* tokens track their surface pair
Border/*	Stroke / border colors	Yes — Border/Brand
Icon/*	Icon fill tints (mirrors On-* semantics)	Yes — Icon/On-Brand
Action/*	CTA and interactive button surfaces	Yes — tracks Accents/Blue MEC override
Nav/*	Navigation chrome: tab bar, top bar, active/inactive states	Yes — background tracks Surface/Brand
Status/*	Semantic feedback colors (error, success, warning, info)	No — fixed design-system values
Spacing/*	Layout spacing scale	Yes — delivered at ALPA base values for all MECs; MEC-overridable server-side without app deployment (D35)	DQ-12 open to confirm Figma path names; values confirmed from CSS vars
BorderRadius/*	Corner radius scale — resolves CornerRadiusToken in the dynamic feed	No — all MECs receive ALPA base values today	6 steps (None → Full). D38. Client falls back to BorderRadius/M (8px) when field absent.

Surface/*

Token Path	Description	ALPA Default	UAL MEC Override	Paired On-* token
Surface/Brand	Primary branded surface — nav bar, card header, MEC grid background	#05273E	United Brand/Blue-800 #002243	Text/On-Brand · Icon/On-Brand
Surface/Default	Page / default card background	#FFFFFF	No override (white)	Text/Primary
Surface/Primary	Primary elevated card surface (above the page layer)	#EFEFEF	United Brand/Grey-100 #F7F7F7	Text/Primary
Surface/Subtle	Blue-tinted background (welcome cards, callout sections)	#DFEDF9	No override	Text/On-Subtle

Text/*

Token Path	Description	ALPA Default	UAL MEC Override	CSS var
Text/Primary	Primary body / heading text on default surfaces	#05273E	No override	--text-primary-sem
Text/Secondary	Muted / secondary text (subtitles, timestamps)	#5D6471	No override	--text-secondary-sem
Text/On-Brand	Text placed ON Surface/Brand — guarantees contrast with the branded surface. MEC-themeable (D34) — must always bind via DynamicResource, never hardcoded. UAL override: #bed6fb.	#FFFFFF	#BED6FB (UAL periwinkle)	--text-on-brand
Text/On-Subtle	Text placed ON Surface/Subtle	#05273E	No override	—
Text/Link	Hyperlink and CTA text (carousel "View All", inline nav links)	#007BC2	United Brand/Blue-400 #94EBFE	--text-links
Text/Disabled	Disabled / inactive text state	#D2D4D6	No override	--text-disabled

Border/*

Token Path	Description	ALPA Default	UAL MEC Override	CSS var
Border/Brand	Accent border on branded elements (PilotCard, section accents)	#05273E	United Brand/Blue-500 #0008CE	--border-blue-dk
Border/Default	Standard card / container border	#D2D4D6	No override	--border-default-sem
Border/Subtle	Hairline / low-contrast dividers	#E3E3E3	No override	--border-subtle-sem

Icon/*

Token Path	Description	ALPA Default	UAL MEC Override	CSS var
Icon/Default	Default icon fill on neutral surfaces	#05273E	No override	--ui-icons
Icon/On-Brand	Icon fill ON Surface/Brand — mirrors Text/On-Brand	#FFFFFF	White or MEC contrast color	—
Icon/Active	Active / selected icon state (selected nav tab)	#007BC2	United Brand/Blue-400 #94EBFE	—

Action/*

Token Path	Description	ALPA Default	UAL MEC Override	CSS var
Action/Primary	CTA button background	#007BC2	United Brand/Blue-500 #0008CE	--interactive-blue-lt
Action/PrimaryText	Text ON Action/Primary button surface	#FFFFFF	White	—
Action/Accent	Ghost button border, focus ring, secondary interactive accent	#007BC2	United Brand/Blue-400 #94EBFE	—

Nav/*

Token Path	Description	ALPA Default	UAL MEC Override
Nav/Background	Navigation bar fill (tracks Surface/Brand for most MECs)	#05273E	#002243 (United Brand/Blue-800)
Nav/Active	Selected tab label + icon tint	#FFFFFF	White or MEC contrast color
Nav/Inactive	Unselected tab label + icon tint	#9BA1A8	Muted contrast per MEC
Nav/Hover	Hover / pressed overlay (web / tablet Blazor)	rgba(255,255,255,0.12)	Semi-transparent overlay

Status/*

Status tokens are not MEC-variable. They are fixed semantic values from the design system, delivered as constants in the theme endpoint payload.

Token Path	Description	Value (fixed)	Used by
Status/Error	Destructive / error state	#C02126	Error banners, form validation, EmergencyButton background
Status/Success	Success / confirmed state	#1A7340	Success toasts, confirmed actions
Status/Warning	Caution / advisory state	#B7770D	Warning banners, delayed-status indicators
Status/Info	Informational / neutral highlight	#007BC2	Info toasts, DYK cards, advisory callouts
Status/OnTime	On-time flight indicator	#00EA75	Flight status badge, on-time dot indicator

Spacing/* (Delivered via theme endpoint at base defaults — D35)

Spacing is included in every ThemeResponse at ALPA base values. No MEC overrides (UAL uses identical spacing — confirmed 2026-06-26). A MEC can get custom spacing via a server change with no app deployment (D35). Values below confirmed via auto-layout inference sweep 2026-06-26 — strict 4 px grid. 3 outlier values (5 px, 10 px, 18 px) need design sign-off before implementing flight card and notification card spacing; all others can be used immediately. See DQ-12.

Figma CSS var	Theme token	Figma path (binary)	Value	Typical use
--none	Spacing/None	—	0px	Flush layouts, icon-to-edge
--xtiny	Spacing/XTiny	Spacing/xtiny	4px ✓	Button card body gap, inline icon gaps, UAL welcome body
--tiny	Spacing/Tiny	— (no Figma var path; CSS var only)	8px ✓	Dominant step (14× in sweep). card-lg top padding, card-btn outer, navBar-bottom bottom, card-md status bar, flight card inner, carousel gap
--xxsmall	Spacing/XXSmall	Spacing/xxsmall	12px ✓	card-lg and card-md content item gap; button icon-text gap
--xsmall / --page-margins	Spacing/Small	Spacing/xsmall	16px ✓	Page horizontal margins, navBar-bottom l/r, nav item py, listy card px, UAL feed gap
--small	Spacing/Medium	Spacing/small	20px ✓	Notification card outer item gap
--medium	Spacing/Large	Spacing/medium	24px ✓	card-lg content bottom padding, card-md outer padding, notification outer padding
--xxlarge	Spacing/XXLarge	—	40px	Page-level vertical margin (not yet confirmed from sweep — retained from prior capture)

3 values still need design confirmation before flight card and notification card spacing is implemented: 5 px (notification text gap, node 4864:31875), 10 px (flight card section gap, nodes 4555:7483 + 4555:7000), 18 px (navBar-bottom inter-tab gap, node 5035:16370). All other steps are implementation-ready.

BorderRadius/* (Delivered via theme endpoint at base defaults — D38)

Resolves ContainerDto.CornerRadiusToken from the dynamic feed. Client falls back to BorderRadius/M (8 px) when the field is absent or null. No MEC overrides today — all MECs receive the ALPA base values below. Full contract: theme-endpoint-contract.html.

Theme Token (API key)	Figma Path	Value	CSS var	Typical use
BorderRadius/None	Border Radius/None	0px ✓	—	Flush containers, full-bleed banners/grids
BorderRadius/S	Border Radius/S	4px ✓	--radius-s	Chips, tags, inline badges
BorderRadius/M	Border Radius/M	8px ✓	—	Standard card — HeroCard, CardSmall, CardText. Default fallback.
BorderRadius/L	Border Radius/L	12px ✓	--radius-l	Prominent — ButtonCard, MEC grid tiles
BorderRadius/XL	Border Radius/XL	16px ✓	—	Large panels — welcome card stack, full-width modals
BorderRadius/Full	Border Radius/Circle	50% ✓	—	Pill / circle — avatar frames, FAB buttons

2026-06-23 New Components (ALPAMobile2026-06-23 · D18–D24)

Sixteen new components were added to figma-component-specs.json in the 2026-06-23 sync. All dimensions are TBD — sizing audit pending (MCP get_metadata access was limited to the thumbnail page in this sync; a follow-up targeted metadata pull per componentKey is required). Token paths for new components are also TBD pending that audit.

Figma Name	Decision	Provisional Tier	Code Name	Width	Height	Notes
flight card	D18	scaffold/composite	FlightCard	TBD	TBD	Distinct from flight card-og; pending designer confirmation
flight finder filters	D22	domain-control	FlightFinderFilters	TBD	TBD	JSFF filter UI; domain binding TBD
notification card flight status	D22	domain-control	NotificationCardFlightStatus	TBD	TBD	Flight-status notification variant
flight card-saved & recent searches	D21	domain-control	FlightCardSavedAndRecentSearches	TBD	TBD	Consolidates 3 previous JSFF entries
Master Form Field	D23	scaffold/atom	FormField	TBD	TBD	General form input component_set
toggle-settings	D23	scaffold/atom	ToggleSettings	TBD	TBD	Settings toggle component_set
hamburger menu	D23	scaffold/atom	HamburgerMenu	TBD	TBD	Nav-drawer trigger
Toolbar - Top - iPhone	D20	vendor/reference	—	TBD	TBD	Apple iOS kit — excluded from ALPA scaffold
Toolbar - Top - Sheet	D20	vendor/reference	—	TBD	TBD	Apple iOS kit — excluded from ALPA scaffold
nav controls	D19	nav-chrome	NavControls	TBD	TBD	Replaces topNav/topNav-og atomic behaviors
NavItem-primary	D23	nav-chrome	NavItemPrimary	TBD	TBD	Primary nav-item atom
Primary button	D24	scaffold/atom	PrimaryButton	TBD	TBD	Relationship to button-sm TBD
alpa logo	D23	scaffold/atom	AlpaLogo	TBD	TBD	Logo asset component
radio button	D23	scaffold/atom	RadioButton	TBD	TBD	Radio button atom
i-favorites	D23	scaffold/atom	IFavorites	TBD	TBD	Favorites icon atom
search secondary buttons	D42	scaffold/atom (resolved from provisional domain-control)	SearchSecondaryButton	103 (Default) / 79 (Variant2)	38 (Default) / 63 (Variant2)	Overall component_set 143×121. Fill #5d6471, stroke #05273e. Both variants carry generic content (icon-generic + "Recent" label) — resolved 2026-07-02, D42.

2026-07-02 New Components (Flight Finder scoped sync, live file owEYzHf7FrHRvWC2u82UOl · D41–D44)

Four components captured from the live Figma file (not the dated-snapshot files sourced above) as part of a scope-limited Flight Finder sync. Full dimensions confirmed via direct get_metadata / REST calls — no TBD sizing this pass.

Figma Name	Decision	Tier	Code Name	Width	Height	Notes
flight finder filter and sort	D41	domain-control	FlightFinderFilterSort	393	Filter: 499 Sort: 480	Component_set overall 433×1087. Canonical node 4450:11374 — a byte-identical duplicate exists at 4705:8702 (flagged, not catalogued). Composes flight finder filters ×3 + radio button ×5 + tab group + nav controls + Primary button + Underline Button.
expander-flight finder-advanced search	D44	domain-control (composes Expander primitive)	FlightFinderAdvancedSearch	345	Default: 71 Open: 693	Component_set overall 385×828. Fill #efefef. Resolves the Expander primitive spec's open "expanded content not shown" gap — see expander-component.html.
banner	D43	domain-control (provisional)	PromoBanner	319.4 (Default) / 309.4 (Variant2)	56	Component_set overall 346.4×172. Fill #05273e. Sample content: UPA27 survey promo. Domain source unconfirmed.
search secondary buttons	D42	scaffold/atom	SearchSecondaryButton	103 / 79	38 / 63	See row above (2026-06-23 table) — dimensions confirmed and tier resolved in this pass.

2026-07-06 Figma Gap Sync (live file owEYzHf7FrHRvWC2u82UOl · D46–D49)

Four items surfaced by a gap-audit pass against this baseline. Full dimensions confirmed via direct REST nodes calls. No new design tokens introduced this pass — see per-row notes.

Figma Name	Decision	Tier	Code Name	Width	Height	Notes
button pill	D46	primitive (unchanged)	Button (Pill)	127 (default) / 109 (selected)	31	Component_set overall 167×158, node 4245:5754. Confirms the already-adopted Button (Pill) master — the docs' "pill button" spelling was a word-order transcription slip, not a Figma rename. See button-pill-component.html.
Toggle - Switch	D47	scaffold/atom (new)	ToggleSwitch	64	28	Component_set overall 104×120, node 4128:7733. Off (fill #d2d4d6) / On (fill #007bc2) states. Bare on/off switch composed by the existing toggle-settings entry (label + this atom). See toggle-switch-component.html.
flight card-saved & recent searches	D48	domain-control (unchanged, confirms D21)	FlightCardSavedAndRecentSearches	353	Default: 61 Variant2: 340	Component_set overall 393×465, node 4450:9884 — resolves D21's TBD dimensions/node gap. Two sibling usage frames (flight card-saved searches 4450:10395, flight card-recent searches 4450:11208) instance this master; not separate masters.
button link	D49	screen-out (not catalogued)	—	218.4	24	Node 5251:15088, FRAME (no published master). Sample: "FORGOT MEMBER NUMBER" — Log In screen, sibling to the existing uncatalogued "Forgot Password" link. Uses only already-tokenized styles (Text/Link #007bc2 · Mobile Button Text) — no new tokens.