← Component Specifications

Design System & Foundations

ALPA Mobile UI Refresh — Reference Index
Updated: 2026-08-08 07:01 ET · Split from the Component Specifications index · Work Items: AB#1821 · AB#2429

Design System

Design Tokens Reference

Colors, typography, and dimensions extracted directly from the Figma source file. Includes color swatches, typography specimens, component dimensions, and the full theme/* token namespace.

Typography Font Mapping mapping decision

Census of all 8 type styles the working Figma file declares (Lora, Futura, Inter, League Spartan) and the mapping of each onto the two licensed Futura PT files the app may ship — Book 400 and Bold 700. Node-level provenance for every claim. Records the 109 off-palette weight declarations, the runtime Google Fonts dependency, and the 25 docs carrying families inherited from a superseded capture. No CSS changed.

Text Scaling Behaviour implemented

How the app honours the OS text-size setting (AB#2391, resolves DQ-21): the non-linear damping curve that grows 12px text 1.70× while display text grows only 1.25×, the native bridge that carries the scale into the WebView (neither platform does this for us), the min-height remediation of WCAG F69, and the tab bar's measured collision guard. Includes device evidence at 100 / 150 / 200 % and the dynamic-MEC-label case that triggers the icon-only fallback.

Asset Inventory 6 assets needed from design

Catalog of all bundled image and media assets in Resources/Images/ — backgrounds, illustrations, brand logos, and advocacy content. Flags legacy icon PNGs for removal and lists the assets the design team must provide before the ALPAMobile.Presentation native-surface asset bundling (the Blazor RCL shipped 2026-07-15, D61).

KCM + Airline Policies — Spec & Reconciliation 8 findings

The seven Figma screens covering KCM and Airline Policies, specified from the working file and reconciled against the current Blazor scaffold. Eight findings: the home page is a hardcoded mock (fabricated employee number, emoji icons), Airlines shows eligibility as pills instead of the specified comparison grid, StatusBadgeKind.Cass mislabels flight attendants, and three screens are never built — one of which closes Flight Finder FF-2 (its list links to a route that does not exist). An airport-detail route has no Figma coverage, with a proposed alignment derived from the legacy XAML — the single remaining question for design. Also corrects the type-style census: 11 styles, not 8. Task AB#2390.

Foundations Reconciliation capture-only · alignment needed

Canonical Figma foundation frames (Colors, Typography, Grid/Spacing, Buttons, Forms, Icons) diffed against the current docs & tokens. Captures every discrepancy as an alignment artifact — no live token/CSS/spec values changed. Lists the alignment decisions a human must resolve before any code change. Task AB#2194.

Accessibility & CSS-Hygiene Audit capture-only · findings

The Blazor scaffold's alpa-components.css + Razor components audited against the CLAUDE.md CSS rules and WCAG AA. Fixes classified Safe (no visual change) vs Gated (needs design). Headline: CSS hygiene mostly clean (no real duplicate-selector bugs); the systemic a11y gap is missing keyboard focus (only 3 :focus rules). Ties DQ-18 (nav contrast) + DQ-21 (text scaling). Task AB#1821.

New Components — 2026-06-10 Re-sync

Components added in the 2026-06-10 Figma re-sync: nav chrome, atoms, new primitives, page templates, and domain controls. Per-component provenance, structure, variants, and developer notes. Decisions D12–D14.

Naming Alignment Report

Findings comparing component names against the Figma reference and industry conventions. Surfaces the "Slider vs Carousel" collision and the container-vs-card naming issue.