owEYzHf7FrHRvWC2u82UOl ("ALPA mobile app"), pages 🌈 Colors (2093:566),
🎛️ Buttons (1:16), 📐 Grid/Columns/Spacing (1:17),
☑️ Form Elements (2093:702), 🖤 Icons (3:7), captured 2026-06-29 via Figma MCP
get_metadata.
Legend: PROPOSED recommended alignment, not applied · RISK collides with live mock UI / shipped CSS · GAP not captured in Figma or docs.
Figma page 🌈 Colors (2093:566 → frame "Color Palette" 4991:2) is organized as
Color Primitives (a numbered ramp) and Color Tokens (semantic groups). Our
design-tokens.html ships a flat, CSS-named palette (--color-navy, --color-blue,
…) with no primitive ramp and a different semantic structure.
| Figma source (frame + node) | Docs / tokens currently | Discrepancy | Recommended alignment (PROPOSED) | Risk to live mock UI |
|---|---|---|---|---|
Color Primitives ramp (4991:28, 4991:53): Blue/900·700·500·400·300·200·100·050; Gray/900·700·500·300·100; White/500; Yellow/500; Red/500 |
No primitive ramp exists. Tokens are single semantic values (--color-blue #007bc2, --color-navy #05273e, --color-text-tertiary, etc.). |
Figma has a full tonal scale (8 blues, 5 grays); docs collapse to ~3 blues and ~3 grays. Mid/!light steps (Blue/400–050, Gray/300–100) are undocumented. | PROPOSED Add a primitive ramp layer to the tokens doc that mirrors Figma names, then map existing semantic CSS vars onto ramp steps. Capture exact hex via get_variable_defs (needs a live desktop selection — see Gaps). |
Low — additive ramp; existing --color-* vars unchanged. |
Token: Surface/* (4991:55): Surface/Default, Surface/Subtle, Surface/Brand |
--color-surface-page #f5f5f5, --color-surface-alt #efefef. "Brand" surface not named as a surface token. |
Naming + cardinality mismatch (Default/Subtle/Brand vs page/alt). Surface/Brand likely == navy but is modeled as a brand color, not a surface, in docs. | PROPOSED Adopt Surface/{Default,Subtle,Brand} naming as the canonical surface set; alias the current --color-surface-* to them. Cross-check against theme-endpoint-contract Surface/* mapping. |
High — surface tokens feed MEC theming + many mock screens; renaming touches live CSS. Decision required. |
Token: Text/* (4991:67): Text/Primary, Text/Secondary, Text/On-Brand, Text/Disabled |
--color-text-primary, --color-text-secondary, --color-text-tertiary. |
Figma has On-Brand + Disabled; docs have tertiary. "tertiary" has no Figma counterpart; On-Brand/Disabled undocumented. | PROPOSED Add Text/On-Brand + Text/Disabled; reconcile whether --color-text-tertiary == Text/Disabled or is a doc-invented step. |
High — --color-text-tertiary is used across mock screens; cannot be dropped without an audit. |
Token: Interactive/* (4991:82): Interactive/Default, Interactive/Hover |
--color-blue + --color-blue-hover serve this role implicitly. |
Interactive is a named semantic group in Figma; docs fold it into brand blue. | PROPOSED Introduce Interactive/{Default,Hover} semantic aliases over the blue values. | Low — aliases over existing values. |
Token: Border/* (4991:91): Border/Default, Border/Subtle · Status/Error (4991:100) |
--color-border-subtle #e3e3e3; --color-error #c02126. No Border/Default. |
Figma distinguishes Border/Default vs Border/Subtle; docs only have subtle. Status is a group (currently only Error) — may expand. | PROPOSED Add Border/Default; model Status/* as a group so future Success/Warning slot in. | Low — additive. |
1:15 "🅰️ Typography", provided 2026-06-29). Structure
captured via get_metadata + a rendered screenshot of the Mobile Sizing frame (101:144). The
page holds three artifacts: Mobile Sizing (101:144), Desktop WYSIWYG Sizing
(2236:1821), and a Links frame (127:50). The named scale and the
serif-display / sans-body family split below are confirmed from the render; exact px / weight / line-height /
letter-spacing still need a values pull (get_variable_defs / get_design_context
return "nothing selected" for direct node ids — see Gaps). Resolves the source side of D-T1.
| Figma source (frame + node) | Docs / tokens currently | Discrepancy | Recommended alignment (PROPOSED) | Risk to live mock UI |
|---|---|---|---|---|
Named type scale — Mobile Sizing (101:144): DISPLAY/XXL · XL · L · M · S · XS · BODY/L · M · S · OTHER/EYEBROW · CAPTION. |
design-tokens.html lists: eyebrow 12/700/0.05em, title-lg 28, title-md 20, body-lg 16, body-md 14, body-sm 12, button 12, flight 18; lh 1.2/1.6. |
Cardinality + naming mismatch: Figma has 6 display tiers (XXL–XS) vs the docs' 2 title sizes; Figma names are size-tiers (DISPLAY/BODY/OTHER) vs the docs' role names (title/body/eyebrow); CAPTION has no doc counterpart. | PROPOSED Pick one canonical naming, map the doc scale onto the 6+3+2 Figma tiers, add the missing display tiers + caption. Pull exact metrics via REST/.fig (see Gaps). | High — type tokens drive every mock screen; re-scaling/renaming shifts shipped layouts. Annotate only. |
Two parallel naming systems: Mobile Sizing uses DISPLAY/BODY/OTHER, but the Desktop WYSIWYG (2236:1821) and Links (127:50) frames reference H1–H6 / Body semantic names. |
Docs use a third set (title-lg/md, body-lg/md/sm, eyebrow, button, flight). | Three competing name spaces (size-tier vs semantic-heading vs doc-role) for the same scale — mirrors the buttons "two parallel systems" finding. No single authority. | PROPOSED Designer to declare the canonical name space (DISPLAY tiers vs H1–H6); build the token name map from that. | Low — naming decision; no value change. |
| Serif-display / sans-body split — the DISPLAY ramp renders in a serif face; BODY / EYEBROW / CAPTION render sans-serif (confirmed from the Mobile Sizing render). | Type scale assumes a single family; Futura PT weight gap tracked as DQ-4. | Figma uses two families (serif headings + sans body); the docs model one. The serif display face is uncaptured (exact family name needs a values pull). | PROPOSED Capture both family names; record the dual-family system in design-tokens. Relates to DQ-4. | High — switching headings to a serif is a visible change across every screen. Capture only. |
Responsive sizing — separate Mobile (101:144) and Desktop WYSIWYG (2236:1821) frames; plus a Links frame with default / linked / linked-hover states. |
Single non-responsive scale; no link-text styles. | Figma defines a responsive (mobile/desktop) type scale and explicit link states; docs have neither. | PROPOSED App is mobile-first — decide whether the desktop tier is in scope; add link-text styles (default/hover) to the scale. | Low — desktop tier likely out of scope; link styles additive. |
Figma page 📐 Grid, Columns, Spacing (1:17) contains two canonical artifacts the
docs did not reconcile against: a column-width system and a named spacing scale.
| Figma source (frame + node) | Docs / tokens currently | Discrepancy | Recommended alignment (PROPOSED) | Risk to live mock UI |
|---|---|---|---|---|
Named spacing scale — "Mobile-360" (117:176): xtiny 4 · tiny 8 · xxs 12 · xs 16 · small 20 · medium 24 · large 28 · xlarge 32 · xxlarge 40 · huge 48 · xhuge 56 · xxhuge 64 · massive 80 · xmassive 96 (px = frame height). |
design-tokens.html spacing note states: "No Figma spacing variable panel exists — values are read from generated CSS vars." Lists --none/xtiny/tiny/xxsmall/xsmall/small/medium/…/xxlarge inferred from auto-layout. |
The note is false. A dedicated spacing panel exists (117:176) with a full named scale. Several Figma steps (large 28, xlarge 32, huge 48, xhuge 56, xxhuge 64, massive 80, xmassive 96) are absent from the doc scale; doc names (xxsmall/xsmall) differ from Figma (xxs/xs). |
PROPOSED Replace the false note (done — annotation only) and align the doc scale to the canonical 14-step Mobile-360 scale + reconcile names. Confirms / partly supersedes DQ-12. | Medium-High — the live CSS spacing vars are already in use across mock screens; renaming/extending steps must not shift shipped layouts. Annotate only until aligned. |
Column system — "Mobile-360 - Component Widths" (2002:483): XL = FULL-BLEED (393) · L = MAIN / 8 COL (360) · M = MEDIUM / 4 COL (180) · S = SMALL / 2 COL (90). Base frame 393px. |
No column/grid system documented in design-tokens. --page-margins = 16px exists; full-bleed handling is ad-hoc (see AB#2190 full-bleed spike). |
Canonical 8-column 360px content width (16px margins on a 393px frame) + named widths are undocumented. Full-bleed is a named tier (XL) in Figma, not an edge case. | PROPOSED Document the column tiers (FULL-BLEED / 8 / 4 / 2 col) and the 393-base with 16px margins as the canonical grid; relate to the full-bleed work. | Low — documentation of an existing implicit grid; no value change. |
Figma page 🎛️ Buttons (1:16) contains two parallel button systems — a modern
component-set and a legacy color-combination matrix — which together imply the live ActionButton
(AB#1908) and any button tokens need a reconciliation pass.
| Figma source (frame + node) | Docs / components currently | Discrepancy | Recommended alignment (PROPOSED) | Risk to live mock UI |
|---|---|---|---|---|
Modern component-set: Primary Button (91:399), Secondary Button (2242:2197), Tertiary/Underline Button (2242:2852). States = Default / hover / focus / disabled (+ Primary State=arrow). Variants: icon-start, icon-end, wrapping. Height ≈ 47–48px. |
Live ActionButton component (AB#1908, primary action). design-tokens.html has --button-sm 151×36 r=4 only. |
Doc button token is 36px tall, r=4; Figma component is ~48px with a distinct State=arrow variant and explicit icon-start/end/wrapping variants not modeled in tokens. Secondary/Tertiary tiers not in tokens. |
PROPOSED Spec Primary/Secondary/Tertiary as a button family (states + icon/wrapping variants), reconcile height (36 vs 48) and the arrow variant against ActionButton. |
High — ActionButton already shipped (AB#1908); height/radius/variant changes touch a live component. Decision required before any change. |
Legacy color matrix (4017:2595): Aqua-on-white, Aqua-on-dark-blue, Dark-blue-on-white, Dark-blue-on-aqua, Aqua-on-light-blue, Aqua-on-ultra-light-gray; "BUTTON LINK" styles; "Carousel button style". Each Default/Hover/Focus. |
Not represented. Docs/components model a single primary action, not a color-combination matrix. | An entire alternate button taxonomy (by color context + link + carousel) exists in Figma alongside the component-set. Unclear which is authoritative. | ANSWERED (2026-06-30): design uses the modern component-set — the Teamwork mobile "Call to Action" (Space 4173) defines Primary (solid) / Secondary (outlined) / Emergency Hotline (solid + chevron, Home only), stacked vertically. The legacy color-matrix is not the mobile system — record as deprecated for mobile. See D-B1. | High — adopting the matrix would be a major surface change. Capture only; do not implement. |
Figma page ☑️ Form Elements (2093:702) defines a Master Form Field with a full state set plus
selection controls. The component library has no dedicated form-field / checkbox / radio spec yet.
| Figma source (frame + node) | Docs / components currently | Discrepancy | Recommended alignment (PROPOSED) | Risk to live mock UI |
|---|---|---|---|---|
Master Form Field (229:149): State = Default / Selected / Error / Disabled / Focus. 6 example field instances. |
No form-field component spec in component-library / domain-controls. Login/search screens improvise inputs. | A canonical 5-state input exists in Figma but is unspecced; live input styling is ad-hoc. | PROPOSED Add a Form Field component spec (5 states) to the library; map states to tokens (Border/Default, Status/Error, Text/Disabled). | Low — net-new spec; relates to the pending login-screen data gap work. |
Radio button (2035:333) + checklist/checkbox (2042:170): each Default / selected. |
Not specced. FTDT / JSFF selection screens use improvised controls. | Canonical radio + checkbox with selected states exist; no component spec or token mapping. | PROPOSED Spec Radio + Checkbox atoms (Default/Selected) per D40 shared-atom guidance. | Low — net-new atoms. |
Figma page 🖤 Icons (3:7 → section "General Use Icons" 233:302) holds a custom
ALPA icon set of ~36 named symbols — not FontAwesome/Material glyphs.
| Figma source (section + node) | Docs / assets currently | Discrepancy | Recommended alignment (PROPOSED) | Risk to live mock UI |
|---|---|---|---|---|
Custom icon set "General Use Icons" (233:302): i-search, i-caret, i-back, i-arrow, i-close, hamburger, i-arrow-right/left, i-mail, avatar, i-avatar, i-favorites, i-home, icon-generic, i-phone, i-committees, i-action, i-jumpseat, i-notifications (+ notifications badge composite), i-filter, i-cal, i-trash, i-star, plane, check, chevron, i-search-history, i-heart (Default/selected); brand marks: yoke, pilot, ftdt, home; partner: united/committee, united/hotel, united/rep. |
asset-inventory.html stated "iconography is handled by Font Awesome and Material Icons" and listed legacy PNGs to "Replace → FA/Material" with suggested fa-* classes. |
The FA/Material assumption was wrong for the design source. The canonical icons are a bespoke ALPA vector set; the FA suggestion never matched Figma. ~36 custom symbols were never inventoried in the docs. | PROPOSED (interim, partly done) Catalog the custom vectors as the current set in asset-inventory; keep ~29 exported SVGs (BottomNav already wired). Correct the FA/Material framing to the dual strategy. (forward) Scope an icon-font path for the WebView — kept open as DQ-17. | Mixed — vector catalog is safe/additive; committees.svg / phone.svg are referenced by mock UI and must not be overwritten. Icon-font wiring is forward work, not a mock-UI change. |
These must be resolved by design/eng before any token, CSS, or component value changes. Until then everything above stays as documentation only.
--color-text-tertiary (no Figma counterpart). High risk — feeds MEC theming + mock screens.get_variable_defs (live desktop selection).1:15). Decide the
canonical name space (Figma DISPLAY/BODY/OTHER size-tiers vs the H1–H6 semantic set vs the doc title/body names),
confirm the serif-display / sans-body family split (relates to DQ-4),
and pull exact metrics. Source resolved; naming + metrics open.ActionButton (AB#1908, a Primary action). Geometry (height, arrow variant) remains open as D-B2.
Affects ActionButton (AB#1908).State=arrow variant against ActionButton.@font-face wiring) that the interim Figma vectors are standing in for. Tracked as
DQ-17 — kept open.1:15, provided 2026-06-29): the named scale
and serif/sans family split are confirmed from a render. Exact metrics still pending a values pull (next item).owEYzHf7FrHRvWC2u82UOl; the Teamwork mobile space (Space 4173) links a different key,
KPK3kvOU1zPHWIovXPB6Wo. A node-for-node REST diff of all six foundation frames (Colors 2093:566,
Buttons 1:16, Grid/Spacing 1:17, Forms 2093:702, Icons 3:7,
navBar-bottom 4099:5232) returned identical structure — same node ids and descendant
counts. KPK… is a newer copy (modified 2026-06-29 vs 06-26) with the 3-day delta not in the
foundation frames. The two keys are the same design — no re-reconcile needed; treat them as
interchangeable for foundations.get_variable_defs
and get_design_context require a live editor selection and return "nothing selected" for direct
node ids via this MCP server. Structure (names + groupings) was captured via get_metadata +
get_screenshot (which take a node id). Two selection-free routes to exact values remain open:
(a) Figma REST API — /v1/files/{key}/nodes?ids=… returns exact fills (hex) + type
metrics on any paid plan with a personal-access token; the dedicated /v1/files/{key}/variables/local
endpoint returns variable defs but is Enterprise-only; and (b) the exported .fig archive
(fig-kiwi: deflate schema + zstd tree) parsed offline. Either supersedes the desktop-selection requirement.Captured 2026-06-29 via Figma MCP get_metadata + get_screenshot
against file owEYzHf7FrHRvWC2u82UOl (typography frame 1:15 added 2026-06-29). UI Refresh Epic
AB#1821 · Task AB#2194.