================================================================= DESIGN-TO-DEV HANDOFF SPECIFICATION Project: Fitness App — Home Screen Target Platform: React Native Handoff Date: [Current Date] Version: 1.0 Status: [PROBABLE] — Confirm exact values with designer ================================================================= 1. OVERVIEW A mobile home screen for a fitness tracking app. Features a daily progress hero, activity filter pills, recent activity list, and a fixed bottom tab navigation. Design language: clean, card-based, light gray background with blue primary accent. [PROBABLE] Based on description; confirm visual style with designer. 2. DESIGN TOKENS ┌─────────────────────────────────────────────────────────────┐ │ COLOR TOKENS (Light Mode) │ ├─────────────────────────────────────────────────────────────┤ │ --color-primary: #3B82F6 [PROBABLE] — Standard blue, │ │ confirm exact brand blue │ │ --color-primary-hover: #2563EB [SPECULATIVE] — 600 shade │ │ --color-primary-active: #1D4ED8 [SPECULATIVE] — 700 shade │ │ --color-neutral-50: #F9FAFB [CONFIRMED] — "Very light gray" │ │ bg described by user │ │ --color-neutral-100: #F3F4F6 [PROBABLE] — Card backgrounds │ │ --color-neutral-200: #E5E7EB [PROBABLE] — Outlines, borders│ │ --color-neutral-300: #D1D5DB [PROBABLE] — Inactive pill │ │ border │ │ --color-neutral-400: #9CA3AF [PROBABLE] — Inactive pill text│ │ --color-neutral-500: #6B7280 [PROBABLE] — Secondary text │ │ --color-neutral-600: #4B5563 [PROBABLE] — Card body text │ │ --color-neutral-700: #374151 [PROBABLE] — Card title text │ │ --color-neutral-900: #111827 [PROBABLE] — Large stat number │ │ --color-background: #F9FAFB [CONFIRMED] — Page bg │ │ --color-surface: #FFFFFF [PROBABLE] — Card backgrounds │ │ --color-surface-elevated: #FFFFFF [PROBABLE] — Hero card bg │ │ --color-border: #E5E7EB [PROBABLE] — Default borders │ │ --color-success: #22C55E [SPECULATIVE] — Positive stats │ │ --color-error: #EF4444 [SPECULATIVE] — Negative alerts │ │ --color-warning: #F59E0B [SPECULATIVE] — Caution states │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ SPACING TOKENS (React Native — pt units) │ ├─────────────────────────────────────────────────────────────┤ │ --space-0: 0pt │ --space-1: 4pt │ --space-2: 8pt │ │ --space-3: 12pt │ --space-4: 16pt │ --space-5: 20pt │ │ --space-6: 24pt │ --space-8: 32pt │ --space-10: 40pt │ │ --space-12: 48pt │ --space-16: 64pt │ --space-20: 80pt │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ SHADOW TOKENS (iOS / Android elevation) │ ├─────────────────────────────────────────────────────────────┤ │ --shadow-sm: iOS shadowOffset(0,1), shadowOpacity 0.05, │ │ shadowRadius 2 │ │ --shadow-md: iOS shadowOffset(0,4), shadowOpacity 0.1, │ │ shadowRadius 6 │ │ --shadow-lg: iOS shadowOffset(0,10), shadowOpacity 0.1, │ │ shadowRadius 10 │ │ Android: Use elevation prop — 2 (sm), 4 (md), 8 (lg) │ └─────────────────────────────────────────────────────────────┘ 3. TYPOGRAPHY SCALE ┌─────────────────────────────────────────────────────────────┐ │ FONT: System font (iOS: San Francisco, Android: Roboto) │ │ BASE: 16pt (1.0rem equivalent) │ │ RATIO: 1.25 (Major Third) [PROBABLE] │ ├─────────────────────────────────────────────────────────────┤ │ TOKEN │ SIZE │ WEIGHT │ LINE-H │ USAGE │ ├─────────────────────────────────────────────────────────────┤ │ text-2xl │ 32pt │ 700 │ 1.1 │ Stat number (2,450) │ │ text-xl │ 20pt │ 600 │ 1.3 │ Section title │ │ text-lg │ 18pt │ 500 │ 1.4 │ Card title │ │ text-base │ 16pt │ 400 │ 1.5 │ Body text, labels │ │ text-sm │ 14pt │ 500 │ 1.5 │ Activity name, time │ │ text-xs │ 12pt │ 400 │ 1.5 │ Calories, meta │ │ text-3xl │ 40pt │ 700 │ 1.0 │ [Not used — reserve] │ └─────────────────────────────────────────────────────────────┘ USAGE MAP: - Stat number (2,450): text-2xl, weight 700, color neutral-900 - Stat label ("steps"): text-sm, weight 400, color neutral-500 - Activity name: text-sm, weight 500, color neutral-700 - Activity time: text-xs, weight 400, color neutral-400 - Calories: text-xs, weight 600, color neutral-600 - Pill label (active): text-sm, weight 600, color white - Pill label (inactive): text-sm, weight 500, color neutral-400 - Tab label (if any): text-xs, weight 500, color primary/neutral 4. LAYOUT & GRID SYSTEM ┌─────────────────────────────────────────────────────────────┐ │ SCREEN: Full width (device width) │ │ ORIENTATION: Portrait (primary) │ │ SAFE AREA: Respect top and bottom safe area insets │ │ SCROLL: Vertical scroll for content, tab bar fixed bottom │ ├─────────────────────────────────────────────────────────────┤ │ PADDING: │ │ Horizontal page padding: 16pt (space-4) │ │ Vertical section gap: 16pt (space-4) │ │ Card internal padding: 16pt (space-4) │ │ List item gap: 8pt (space-2) │ │ Pill row gap: 8pt (space-2) between pills │ │ Pill row horizontal padding: 16pt (space-4) │ │ Tab bar height: 56pt (including safe area) │ │ Tab bar icon size: 24×24pt │ │ Tab bar label (if any): text-xs │ └─────────────────────────────────────────────────────────────┘ 5. COMPONENT INVENTORY ┌─────────────────────────────────────────────────────────────┐ │ COMPONENT: StatusBar │ ├─────────────────────────────────────────────────────────────┤ │ Container: Flex row, justify space-between, align center │ │ Left: App logo or title (text-sm, weight 600) │ │ Right: Bell icon (24pt) + Profile avatar (32pt, circular) │ │ Height: 44pt + safe area top │ │ Background: transparent (same as page bg) │ │ [PROBABLE] — Confirm if status bar has distinct background │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ COMPONENT: HeroCard (Daily Progress) │ ├─────────────────────────────────────────────────────────────┤ │ Container: Full width, centered content, padding 24pt │ │ Background: surface-elevated (#FFFFFF) │ │ Border radius: 16pt (radius-2xl) │ │ Shadow: shadow-md │ │ Margin: 16pt horizontal, 16pt top │ │ ProgressRing: │ │ Size: 160pt diameter │ │ Stroke width: 8pt │ │ Progress: 75% [CONFIRMED] │ │ Track color: neutral-200 │ │ Progress color: primary (#3B82F6) │ │ [SPECULATIVE] — Confirm ring size and stroke width │ │ StatText: │ │ "2,450" — text-2xl (32pt), weight 700, color neutral-900 │ │ "steps" — text-sm, weight 400, color neutral-500, below │ │ [CONFIRMED] — Values provided by user │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ COMPONENT: ActivityPill (Horizontal Scroll) │ ├─────────────────────────────────────────────────────────────┤ │ Container: Horizontal ScrollView, padding 16pt horizontal │ │ Gap between pills: 8pt (space-2) │ │ Pill (Active): │ │ Background: primary (#3B82F6) │ │ Text: white, text-sm, weight 600 │ │ Padding: 8pt vertical, 16pt horizontal │ │ Border radius: 9999pt (full / pill shape) │ │ [CONFIRMED] — Active pill described as "filled blue" │ │ Pill (Inactive): │ │ Background: transparent │ │ Border: 1pt solid neutral-300 │ │ Text: neutral-400, text-sm, weight 500 │ │ Padding: 8pt vertical, 16pt horizontal │ │ Border radius: 9999pt │ │ [CONFIRMED] — Inactive pill described as "outlined gray" │ │ Pills: Walking, Running, Cycling, Swimming [CONFIRMED] │ └─────────────────────────────────────────────────────────────┘ ┌─────────────────────────────────────────────────────────────┐ │ COMPONENT: ActivityListItem │ ├────────────────────────────────────────────────────