← Back to Index

Home Page Audit

Aligned Blazor implementation (Components/Pages/Home.razor) measured against the Figma Home design and the documented component specs, with high scrutiny.

Figma: file R6hPjBdjSIn6946qTJasUC, node 4099:5229 (inner feed 4099:5230) · Validation device: iPhone 16 Pro simulator via MauiDevFlow · Branch: feature/blazor-widget-align · Tooling: Figma MCP (get_metadata / get_variable_defs / get_design_context / get_screenshot).

Outcome. The first aligned pass mirrored the draft mock order and used placeholder tokens (Georgia, #f4f5f7, rounded corners, decorative chevron). This audit re-derived the design from Figma and corrected the implementation to mirror the Figma structure and tokens: Lora / Futura PT / Inter type, #F5F7FA page, square corners, the card-lg 6px accent, card-sm rows, and the chevron background-notch.

1 · Method

  1. Pulled the Home node structure with get_metadata (exact child order, sizes, names).
  2. Pulled design tokens with get_variable_defs (colors, type, spacing).
  3. Pulled per-component construction with get_design_context (chevron paths, card-lg accent, card-sm layout, button).
  4. Rebuilt & deployed to the iPhone 16 Pro simulator; captured each section with MauiDevFlow screenshot + WebView scroll.
  5. Compared screenshot-to-Figma and corrected discrepancies (§4–§6).

2 · Design tokens (Figma → implementation)

Figma variableValueCSS varUse
Text/Primary · Headlines · Surface/Brand · Blue/900#05273e--alpa-navyTitles, brand surfaces
Interactive/Blue-lt · Blue/700 · Border/Blue-lt#007bc2--alpa-blueLinks, primary button, card-lg accent
Blue/100#dfedf9--alpa-blue-100Welcome body, card-sm image bg, chevron light
Blue/500#7cb9f2--alpa-blue-500Chevron mid
Text/Secondary#5d6471--alpa-grayEyebrow, body copy
Border/Yellow#f7bb0d--alpa-yellowAccent (design-driven; deferred)
bg-main#F5F7FA--alpa-pagePage background (was #f4f5f7)
Font Family/HeadingLora SemiBold 600--alpa-headingTitles; XS 16, S 20; lh 1.2 (was Georgia)
Font Family/BodyFutura PT (Book / Demi)--alpa-bodyLinks 18, button 15/Demi (was system sans)
Font Family/EyebrowInter Bold 12--alpa-eyebrowEyebrow, uppercase, opacity 50%
Page Margins · spacing16 · tiny 8 / xsmall 16 / medium 24--alpa-*Layout rhythm

3 · Structure (Figma order — now mirrored)

Content column is 361 wide inside a 393 frame (16px margins). Top-to-bottom from node 4099:5230:

#Figma nodeComponentSizeContent
1welcome (0:32)Card (chevron)361×77Welcome Captain Johnson · View Contract
2horizontal scrolling feed (0:40)Carousel → card-lg ×2320×315UAL MEC · View My MEC
3Primary button (0:69)Button (emergency)361×48Emergency Hotline
4card-sm ×3 (0:80…)CardSmall361×51DART · ALPA Directories · FTDT
5horizontal scrolling feed (0:107)Carousel → card-lg ×2320×315News & Updates · View All
6card-sm ×3 (0:137…)CardSmall361×51Flight Pay Loss · My Payments · Infor Expense Management
7card-lg (0:164)HeroCard (full-width)361×314Hotel Request + description
8card-sm ×3 (0:175…)CardSmall361×51Finance Reports · Meeting Request · MPS
9horizontal scrolling feed (0:202)Carousel → card-lg ×2320×315Press Releases · View All

The draft mock order (PilotCard → button → emergency → tile → hero → 3-up → 3 text carousels) did not match this; the mock feed was rewritten to emit the Figma structure with Figma placeholder copy.

4 · Component construction

Card — Welcome / Pilot (the chevron background-notch)

The chevron is Group 568, a 20×74 strip at the card's right made of two layered arrows: #7CB9F2 (Rectangle 453) behind #DFEDF9+#007BC2 stroke (Rectangle 451). The triangular gaps above and below the point are transparent — they must reveal the page background so the card reads as angle-clipped.

Bug & fix. The first pass put the blue background on the whole card container, so the chevron's transparent gaps showed blue (a decorative arrow). Fix: the blue (#dfedf9) lives only on .alpa-card-chevron-body; the card container is transparent, so the gaps reveal bg-main and the chevron clips on the angle — exactly as requested.

card-lg (feed item + full-width hero)

card-sm (list row)

White row, square, ~51px: an 80px image block backed by Blue/100 + a Lora SemiBold 16 title. Padding 16.

Primary button

361×48, #007bc2, square, icon-text gap 12, Futura PT Demi 15, letter-spacing 4, uppercase, white; emergency uses an inline phone glyph.

Horizontal scrolling feed

Section header (Lora SemiBold 20 title + Futura PT 18 underlined View-All) over a horizontally-scrolling row of card-lg with a 16px gap.

5 · Discrepancy log

#AreaFirst passFigmaStatus
1ChevronSolid blue decorative arrowAngle-clip; gaps = page bgFixed
2Structure / orderDraft mock orderwelcome→feed→button→rows→…Fixed
3Page bg#f4f5f7#F5F7FA (bg-main)Fixed
4Heading fontGeorgiaLora SemiBoldFixed
5Body / button fontSystem sansFutura PTFixed
6Eyebrow fontsystem, no trackingInter Bold, op 50%, uppercaseFixed
7Corners10px roundedSquare (0)Fixed
8Card large accentthin/none6px blue left borderFixed
9List rowsno-image text carouselscard-sm (80px img + title)Fixed
10Buttonrounded, 16px, no trackingsquare, Futura Demi 15, ls 4Fixed
11View-All margintouched screen edgeinside 16px marginFixed (overflow-x)
12Favorite hearthiddenpresent in designShown (D31, 2026-06-26)

6 · Visual comparison

Figma Home
Figma — Home (4099:5229)
Before
Before — draft order, placeholder tokens
After top
After — welcome (chevron notch), UAL MEC feed, emergency, card-sm
After mid
After — News feed + card-sm rows
After hero
After — Hotel Request hero + card-sm + Press feed

7 · Residual notes