CON-051 | Product Specifications

Screen Overview

• Type: Detail sub-page (no bottom navigation)
• Purpose: Expanded view of product details, nutritional information, and allergen data
• Previous: CON-050-product-detail.html (Product Detail)
• Navigation: Back button returns to product detail

Layout Specifications

• Background: #FFFFFF (white)
• Header: Back button + "Product Info" title, 1px bottom border
• Product mini card: 56px thumbnail + brand/name, #E9EFE7 background
• Tabs: 3 equal-width tabs with active indicator (3px bar in #043F2D)

Tab Content

• Details tab: Key-value rows with label (muted) and value (bold). Fields: Brand, Size, Category, Subcategory, SKU, Barcode
• Nutrition tab: Table with Nutrient and Per 100ml columns. Sub-rows for fat/sugar breakdown indented. Note at bottom about approximate values
• Allergens tab: "Contains" section with amber tag for Milk. "May Contain" section with "None declared" in muted card

Component Specs

• Tabs: Alexandria 14px semi-bold, muted inactive, #043F2D active with 3px bottom bar
• Spec rows: 14px padding vertical, subtle bottom border
• Nutrition table: #E9EFE7 header background, 12px uppercase headers, 14px body
• Allergen tags: #FEF3C7 background, #FDE68A border, #92400E text, 8px radius

Behavior Notes

• Tabs switch content without page reload
• Active tab has underline indicator that slides to position
• Allergen data is critical for user safety, hence separate dedicated tab
• Barcode value can be tapped to copy to clipboard (future enhancement)

Accessibility

• Tabs use role="tablist", role="tab", aria-selected
• Tab panels use role="tabpanel"
• Allergen information uses semantic color + icon for non-color-reliant identification