Page Template Figma: template · main view-interior page-template tier

Updated: 2026-06-26

Audited: 2026-06-26

Live Preview

Spacing Diagram

Design Tokens

Spacing Token System

All spacing in the app is expressed via named tokens. Never use a raw pixel value when a token exists.

Template Variants

Interior Nav-Controls Bar

Interior sub-pages prepend a 38px nav-controls bar inside the content area (inside the 24px side padding). It sits between pt-120px clearance and the first content item.

Layer Tree

Root section template

Interior sub-page template (adds nav-controls)

Developer Notes

• Top nav is absolutely positioned, not a sticky element: The pt-120px on main view-interior is a hard offset that clears the nav. The nav itself is absolute; top:0 and scrolls with the page frame (not with content). This means the content area scrolls independently under the nav.
• The 120px figure is composite: iOS status bar (~54px) + nav items row (icon 22px + py-16px×2 = 54px) + a small overlap buffer = ~120px. This is baked into the design system — do not try to compute it dynamically; use pt-120px.
• 96px scroll buffer is not the bottom nav height: The bottom nav is 82px (770→852). The 96px gives 14px of breathing room so the last item is not flush against the nav. Always apply pb-96px to the innermost content slot (slot-main feed), not to the content area wrapper.
• Side margins are 24px, not 16px: The page content margin is --medium = 24px. The --page-margins = 16px token is only for the top nav right padding and the bottom nav horizontal padding — the outermost chrome edges. Do not use 16px for content margins.
• Nav-controls bar is inside the 24px side margins: The bar inherits its width from main view-interior's px-24px. The back button and right icon do not extend to the screen edge — they sit within the 345px content column.
• The background is #f5f7fa, not white: This is the bg-no-img token. Individual components (cards, form fields) render white backgrounds on top of it, creating visual depth. Never set the page background to white.
• Gap between sections is 10px: The gap-10px on main view-interior applies between direct children (content sections). Internal gaps within a section are governed by that section's own rules — do not add extra margin-top to the first child.
• Implementation gated: The Blazor Hybrid page scaffold implementation waits on Epic AB#2087 (Presentation Extraction). These measurements are the confirmed design baseline.

Blazor Page Structure (target)

Every page Razor component in ALPAMobile.HybridUi will wrap its content in the page template layout. The shared chrome (top nav, bottom nav) lives in a layout component; each page supplies only its slot-main content.

Root section page

@* Home.razor — root section: no nav-controls bar *@
@layout AlpaPageLayout

<div class="alpa-page__feed">
    <!-- Components go here — carousel, cards, etc. -->
    <AlpaCarousel Vm="@newAndNotable" />
    <AlpaCarousel Vm="@feed" />
</div>

Interior sub-page

@* AirlinePolicies.razor — interior sub-page: nav-controls bar + content *@
@layout AlpaPageLayout

<AlpaNavControls Title="Airline Policies"
                 ShowSearch="true"
                 OnBack="@NavigateBack" />

<div class="alpa-page__feed">
    @foreach (var airline in Airlines)
    {
        <AlpaFormField Vm="@airline" OnNavTap="@NavigateToPolicy" />
    }
</div>

CSS Class Reference (target)

These classes will live in ALPAMobile.HybridUi/wwwroot/css/alpa-layout.css.