designmd-forge 1.2.0

package/dist/data/designs/ios-flighty-expo.md

@@ -0,0 +1,353 @@
+# Flighty (iOS) — Expo / React Native Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file translates Flighty's visual language into paste-ready Expo / React Native code: a design-token module, themed components, and Reanimated snippets.
+
+Assumes Expo SDK 51+ with `expo-router`, `expo-font`, `react-native-reanimated` v3, and `react-native-svg` for the flight arc.
+
+## 1. Color Tokens
+
+```ts
+// theme/colors.ts
+export const colors = {
+  canvas:   '#0B0B0F',
+  surface1: '#1A1A1F',
+  surface2: '#222228',
+  surface3: '#2C2C34',
+  divider:  '#2E2E36',
+
+  textPrimary:   '#FFFFFF',
+  textSecondary: '#8E8E96',
+  textTertiary:  '#5A5A62',
+
+  blue:        '#0A84FF',
+  bluePressed: '#0066CC',
+  blueGlow:    'rgba(10,132,255,0.45)',
+
+  // Status — strict semantics
+  onTime:    '#30D158',
+  delay:     '#FFD60A',
+  cancelled: '#FF453A',
+
+  // Map
+  mapLand:      '#16161B',
+  mapGraticule: '#1F1F26',
+  arcRemaining: 'rgba(10,132,255,0.35)',
+} as const;
+
+export type FltColor = keyof typeof colors;
+```
+
+## 2. Typography
+
+Flighty uses SF Pro (the iOS system font). Use `System` and tabular figures, or substitute Inter.
+
+```tsx
+// app/_layout.tsx
+import { useFonts } from 'expo-font';
+
+export default function Root() {
+  const [loaded] = useFonts({
+    'Inter-Regular':  require('../assets/fonts/Inter-Regular.ttf'),
+    'Inter-SemiBold': require('../assets/fonts/Inter-SemiBold.ttf'),
+    'Inter-Bold':     require('../assets/fonts/Inter-Bold.ttf'),
+  });
+  if (!loaded) return null;
+  return <Stack />;
+}
+```
+
+```ts
+// theme/typography.ts
+import type { TextStyle } from 'react-native';
+
+const ink = { color: '#FFFFFF' } satisfies TextStyle;
+// Apply fontVariant: ['tabular-nums'] on every numeric flight field.
+const tnum = { fontVariant: ['tabular-nums'] as const };
+
+export const typography = {
+  timeHero:   { ...ink, ...tnum, fontFamily: 'Inter-Bold',     fontSize: 32, lineHeight: 34, letterSpacing: -0.5 },
+  titleLarge: { ...ink, fontFamily: 'Inter-Bold',     fontSize: 28, lineHeight: 32, letterSpacing: -0.4 },
+  routeCode:  { ...ink, fontFamily: 'Inter-Bold',     fontSize: 24, lineHeight: 26, letterSpacing: 0.5 },
+  section:    { ...ink, fontFamily: 'Inter-Bold',     fontSize: 22, lineHeight: 26, letterSpacing: -0.3 },
+  cardTitle:  { ...ink, fontFamily: 'Inter-SemiBold', fontSize: 17, lineHeight: 21 },
+  body:       { ...ink, fontFamily: 'Inter-Regular',  fontSize: 15, lineHeight: 22 },
+  button:     { ...ink, fontFamily: 'Inter-SemiBold', fontSize: 16, lineHeight: 20 },
+  status:     {          fontFamily: 'Inter-Bold',     fontSize: 13, lineHeight: 16, letterSpacing: 0.3 },
+  gate:       { ...tnum, fontFamily: 'Inter-SemiBold', fontSize: 15, lineHeight: 18, letterSpacing: 0.5, color: '#8E8E96' },
+  meta:       {          fontFamily: 'Inter-Regular',  fontSize: 13, lineHeight: 17, color: '#8E8E96' },
+  onTimePct:  { ...ink, ...tnum, fontFamily: 'Inter-Bold',     fontSize: 20, lineHeight: 22 },
+  tab:        {          fontFamily: 'Inter-SemiBold', fontSize: 11, lineHeight: 13, letterSpacing: 0.2 },
+  timestamp:  { ...tnum, fontFamily: 'Inter-SemiBold', fontSize: 11, lineHeight: 13, color: '#8E8E96' },
+} satisfies Record<string, TextStyle>;
+```
+
+## 3. Signature Components
+
+### Flight Status Chip
+
+```tsx
+// components/StatusChip.tsx
+import { Text, View } from 'react-native';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+type Status = { kind: 'onTime' } | { kind: 'delayed'; mins: number } | { kind: 'cancelled' };
+
+const COLOR = { onTime: colors.onTime, delayed: colors.delay, cancelled: colors.cancelled };
+
+export function StatusChip({ status }: { status: Status }) {
+  const c = COLOR[status.kind === 'delayed' ? 'delayed' : status.kind];
+  const label =
+    status.kind === 'onTime' ? 'ON TIME'
+    : status.kind === 'delayed' ? `DELAYED ${status.mins}m`
+    : 'CANCELLED';
+  return (
+    <View style={{ alignSelf: 'flex-start', backgroundColor: c + '26', /* ~15% */
+                   paddingVertical: 5, paddingHorizontal: 10, borderRadius: 999 }}>
+      <Text style={[typography.status, { color: c }]}>{label}</Text>
+    </View>
+  );
+}
+```
+
+### Live Flight Map Arc
+
+```tsx
+// components/FlightArc.tsx
+import { useEffect } from 'react';
+import { View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import Animated, {
+  useSharedValue, useAnimatedProps, withTiming, Easing,
+} from 'react-native-reanimated';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { colors } from '../theme/colors';
+
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+// origin/destination/control are points in a 0..100 viewBox
+export function FlightArc({
+  w, h, o, d, live,
+}: {
+  w: number; h: number;
+  o: { x: number; y: number }; d: { x: number; y: number }; live: number; // 0..1
+}) {
+  const c = { x: (o.x + d.x) / 2, y: Math.min(o.y, d.y) - h * 0.18 };
+  const path = `M ${o.x} ${o.y} Q ${c.x} ${c.y} ${d.x} ${d.y}`;
+  const progress = useSharedValue(0);
+
+  useEffect(() => {
+    progress.value = withTiming(live, { duration: 900, easing: Easing.out(Easing.cubic) });
+  }, [live]);
+
+  // Approximate trim via strokeDasharray on a measured length
+  const LEN = Math.hypot(d.x - o.x, d.y - o.y) * 1.25;
+  const animProps = useAnimatedProps(() => ({
+    strokeDashoffset: LEN * (1 - progress.value),
+  }));
+
+  const pt = (t: number) => ({
+    x: (1 - t) ** 2 * o.x + 2 * (1 - t) * t * c.x + t * t * d.x,
+    y: (1 - t) ** 2 * o.y + 2 * (1 - t) * t * c.y + t * t * d.y,
+  });
+  const plane = pt(live);
+
+  return (
+    <View style={{ width: w, height: h }}>
+      <Svg width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
+        {/* Remaining: dashed dim */}
+        <Path d={path} stroke={colors.arcRemaining} strokeWidth={2}
+              strokeDasharray="4 5" fill="none" />
+        {/* Flown: solid glowing (glow approximated via a wide translucent under-stroke) */}
+        <Path d={path} stroke={colors.blueGlow} strokeWidth={9} fill="none" strokeLinecap="round" />
+        <AnimatedPath d={path} stroke={colors.blue} strokeWidth={2.5} fill="none"
+                      strokeLinecap="round" strokeDasharray={LEN} animatedProps={animProps} />
+      </Svg>
+      <Ionicons
+        name="airplane" size={18} color="#FFFFFF"
+        style={{ position: 'absolute', left: plane.x - 9, top: plane.y - 9,
+                 textShadowColor: colors.blueGlow, textShadowRadius: 10 }}
+      />
+    </View>
+  );
+}
+```
+
+### Flight Card
+
+```tsx
+// components/FlightCard.tsx
+import { Text, View } from 'react-native';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+import { StatusChip } from './StatusChip';
+
+export function FlightCard({
+  airline, flightNo, originCode, destCode, depTime, arrTime, depGate, arrGate, meta, status,
+}: any) {
+  return (
+    <View style={{ backgroundColor: colors.surface1, borderRadius: 16, borderWidth: 1,
+                   borderColor: colors.divider, padding: 18, gap: 16,
+                   shadowColor: '#000', shadowOpacity: 0.4, shadowRadius: 16,
+                   shadowOffset: { width: 0, height: 4 } }}>
+      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+        <Text style={typography.cardTitle}>{airline} · {flightNo}</Text>
+        <StatusChip status={status} />
+      </View>
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 16 }}>
+        <Text style={typography.routeCode}>{originCode}</Text>
+        <View style={{ flex: 1, alignItems: 'center' }}>
+          <Ionicons name="airplane" size={14} color={colors.blue} />
+        </View>
+        <Text style={typography.routeCode}>{destCode}</Text>
+      </View>
+      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+        <View style={{ gap: 4 }}>
+          <Text style={typography.timeHero}>{depTime}</Text>
+          <Text style={typography.gate}>{depGate}</Text>
+        </View>
+        <View style={{ gap: 4, alignItems: 'flex-end' }}>
+          <Text style={typography.timeHero}>{arrTime}</Text>
+          <Text style={typography.gate}>{arrGate}</Text>
+        </View>
+      </View>
+      <Text style={typography.meta}>{meta}</Text>
+    </View>
+  );
+}
+```
+
+### On-Time Percentage Ring
+
+```tsx
+// components/OnTimeRing.tsx
+import { Text, View } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+export function OnTimeRing({ percent, size = 72 }: { percent: number; size?: number }) {
+  const r = size / 2 - 3;
+  const circ = 2 * Math.PI * r;
+  return (
+    <View style={{ width: size, height: size }}>
+      <Svg width={size} height={size}>
+        <Circle cx={size / 2} cy={size / 2} r={r} stroke={colors.divider} strokeWidth={3} fill="none" />
+        <Circle
+          cx={size / 2} cy={size / 2} r={r} stroke={colors.onTime} strokeWidth={3} fill="none"
+          strokeLinecap="round" strokeDasharray={circ}
+          strokeDashoffset={circ * (1 - percent / 100)}
+          transform={`rotate(-90 ${size / 2} ${size / 2})`}
+        />
+      </Svg>
+      <View style={{ position: 'absolute', inset: 0, alignItems: 'center', justifyContent: 'center' }}>
+        <Text style={typography.onTimePct}>{percent}%</Text>
+        <Text style={typography.timestamp}>on time</Text>
+      </View>
+    </View>
+  );
+}
+```
+
+### Primary Button
+
+```tsx
+// components/FltButton.tsx
+import { Pressable, Text } from 'react-native';
+import * as Haptics from 'expo-haptics';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+export function FltButton({ title, onPress }: { title: string; onPress: () => void }) {
+  return (
+    <Pressable
+      onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium); onPress(); }}
+      style={({ pressed }) => ({
+        backgroundColor: pressed ? colors.bluePressed : colors.blue,
+        paddingVertical: 15, borderRadius: 14, alignItems: 'center',
+        transform: [{ scale: pressed ? 0.98 : 1 }],
+      })}
+    >
+      <Text style={typography.button}>{title}</Text>
+    </Pressable>
+  );
+}
+```
+
+## 4. Tab Bar
+
+```tsx
+// app/(tabs)/_layout.tsx  (expo-router)
+import { Tabs } from 'expo-router';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { BlurView } from 'expo-blur';
+import { colors } from '../../theme/colors';
+
+export default function TabsLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: colors.blue,
+        tabBarInactiveTintColor: colors.textSecondary,
+        tabBarStyle: { position: 'absolute', borderTopWidth: 0.5, borderTopColor: colors.divider, backgroundColor: 'transparent' },
+        tabBarBackground: () => (
+          <BlurView intensity={80} tint="dark" style={{ flex: 1, backgroundColor: 'rgba(11,11,15,0.92)' }} />
+        ),
+        tabBarLabelStyle: { fontFamily: 'Inter-SemiBold', fontSize: 11, letterSpacing: 0.2 },
+      }}
+    >
+      <Tabs.Screen name="index"   options={{ title: 'Flights', tabBarIcon: ({ color }) => <Ionicons name="airplane"  size={24} color={color} /> }} />
+      <Tabs.Screen name="search"  options={{ title: 'Search',  tabBarIcon: ({ color }) => <Ionicons name="search"    size={24} color={color} /> }} />
+      <Tabs.Screen name="airport" options={{ title: 'Airport', tabBarIcon: ({ color }) => <Ionicons name="business"  size={24} color={color} /> }} />
+      <Tabs.Screen name="profile" options={{ title: 'Profile', tabBarIcon: ({ color }) => <Ionicons name="person"    size={24} color={color} /> }} />
+    </Tabs>
+  );
+}
+```
+
+## 5. Motion
+
+```tsx
+// Arc draw-in — see FlightArc (withTiming 900ms, Easing.out(Easing.cubic))
+
+// Plane advance — animate `live` toward the new fraction; the marker follows the curve
+const live = useSharedValue(0);
+live.value = withTiming(updatedFraction, { duration: 1000 });
+
+// Status change — cross-fade chip color + single medium haptic
+Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+
+// Latest timeline node pulse — withRepeat(withSequence(...)) scaling a glow ring
+
+// Card press — scale 0.98 (Pressable style)
+```
+
+## 6. Icon Library
+
+Use `@expo/vector-icons` (Ionicons) mapped to Flighty's SF Symbol equivalents:
+
+| Purpose | Ionicons |
+|---------|----------|
+| Plane / arc | `airplane` |
+| Search | `search` |
+| Refresh | `refresh` |
+| Notify | `notifications-outline` / `notifications` |
+| Share | `share-outline` |
+| Open map | `map-outline` / `map` |
+| Add flight | `add` |
+| On-time | `checkmark-circle` |
+| Delay | `alert-circle-outline` |
+| Flights (tab) | `airplane` |
+| Airport (tab) | `business-outline` / `business` |
+| Profile (tab) | `person-outline` / `person` |
+
+## 7. Platform Notes
+
+- **iOS-only feel**: use `expo-blur` (`tint="dark"`) for the tab bar `.regularMaterial` equivalent; Android falls back to an opaque `#0B0B0F`
+- **Status bar**: set `<StatusBar style="light" />` from `expo-status-bar` — the deep-black canvas requires light content
+- **Safe area**: wrap screens in `SafeAreaView`; the live map bleeds full-width with a subtle top scrim, the detail sheet respects bottom insets
+- **Live Activity**: there is no Expo-Go ActivityKit API — use a dev-client + a native module (or a config plugin) to render the Lock Screen / Dynamic Island Live Activity that mirrors the in-app status bar
+- **Tabular figures**: set `fontVariant: ['tabular-nums']` on every numeric flight field so live updates don't shift layout; pin those with `allowFontScaling={false}`
+- **Accessibility**: never rely on color alone for status — give the chip an `accessibilityLabel` (`"Delayed 22 minutes"`) and the arc a combined label (`"Flight 62% complete, SFO to JFK"`)
+- **Performance**: animate the arc with Reanimated worklets (UI thread); avoid re-rendering the SVG on every live-position tick — drive the plane marker via a shared value

package/dist/data/designs/ios-flighty-swiftui.md

@@ -0,0 +1,337 @@
+# Flighty (iOS) — SwiftUI Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file translates Flighty's visual language into paste-ready SwiftUI code: `Color` extensions, `Font` extensions, `ViewModifier`s, and example views.
+
+## 1. Color Tokens
+
+```swift
+import SwiftUI
+
+extension Color {
+    // MARK: - Canvas & Surfaces
+    static let fltCanvas   = Color(red: 0.043, green: 0.043, blue: 0.059)  // #0B0B0F
+    static let fltSurface1 = Color(red: 0.102, green: 0.102, blue: 0.122)  // #1A1A1F
+    static let fltSurface2 = Color(red: 0.133, green: 0.133, blue: 0.157)  // #222228
+    static let fltSurface3 = Color(red: 0.173, green: 0.173, blue: 0.204)  // #2C2C34
+    static let fltDivider  = Color(red: 0.180, green: 0.180, blue: 0.212)  // #2E2E36
+
+    // MARK: - Text
+    static let fltTextPrimary   = Color.white                              // #FFFFFF
+    static let fltTextSecondary = Color(red: 0.557, green: 0.557, blue: 0.588) // #8E8E96
+    static let fltTextTertiary  = Color(red: 0.353, green: 0.353, blue: 0.384) // #5A5A62
+
+    // MARK: - Brand
+    static let fltBlue        = Color(red: 0.039, green: 0.518, blue: 1.000) // #0A84FF
+    static let fltBluePressed = Color(red: 0.000, green: 0.400, blue: 0.800) // #0066CC
+
+    // MARK: - Status (strict semantics)
+    static let fltOnTime    = Color(red: 0.188, green: 0.820, blue: 0.345)  // #30D158
+    static let fltDelay     = Color(red: 1.000, green: 0.839, blue: 0.039)  // #FFD60A
+    static let fltCancelled = Color(red: 1.000, green: 0.271, blue: 0.227)  // #FF453A
+
+    // MARK: - Map
+    static let fltMapLand      = Color(red: 0.086, green: 0.086, blue: 0.106) // #16161B
+    static let fltMapGraticule = Color(red: 0.122, green: 0.122, blue: 0.149) // #1F1F26
+}
+
+extension Color {
+    static let fltBlueGlow = Color.fltBlue.opacity(0.45)
+}
+```
+
+## 2. Typography
+
+Flighty uses SF Pro — already the system font. Use `.system(design: .default)` with tabular figures for all flight data, or substitute Inter.
+
+```swift
+extension Font {
+    static let fltTimeHero  = Font.system(size: 32, weight: .bold).monospacedDigit()
+    static let fltTitleLarge = Font.system(size: 28, weight: .bold)
+    static let fltRouteCode = Font.system(size: 24, weight: .bold)
+    static let fltSection   = Font.system(size: 22, weight: .bold)
+    static let fltCardTitle = Font.system(size: 17, weight: .semibold)
+    static let fltBody      = Font.system(size: 15, weight: .regular)
+    static let fltButton    = Font.system(size: 16, weight: .semibold)
+    static let fltStatus    = Font.system(size: 13, weight: .bold)
+    static let fltGate      = Font.system(size: 15, weight: .semibold).monospaced()
+    static let fltMeta      = Font.system(size: 13, weight: .regular)
+    static let fltOnTimePct = Font.system(size: 20, weight: .bold).monospacedDigit()
+    static let fltTab       = Font.system(size: 11, weight: .semibold)
+    static let fltTimestamp = Font.system(size: 11, weight: .semibold).monospaced()
+}
+```
+
+## 3. Signature Components
+
+### Flight Status Chip
+
+```swift
+struct StatusChip: View {
+    enum Status { case onTime, delayed(Int), cancelled }
+    let status: Status
+
+    private var color: Color {
+        switch status {
+        case .onTime: .fltOnTime
+        case .delayed: .fltDelay
+        case .cancelled: .fltCancelled
+        }
+    }
+    private var label: String {
+        switch status {
+        case .onTime: "ON TIME"
+        case .delayed(let m): "DELAYED \(m)m"
+        case .cancelled: "CANCELLED"
+        }
+    }
+
+    var body: some View {
+        Text(label)
+            .font(.fltStatus)
+            .foregroundStyle(color)
+            .padding(.vertical, 5)
+            .padding(.horizontal, 10)
+            .background(Capsule().fill(color.opacity(0.15)))
+            .accessibilityLabel(label.replacingOccurrences(of: "m", with: " minutes"))
+    }
+}
+```
+
+### Live Flight Map Arc
+
+```swift
+import MapKit
+
+struct FlightArc: Shape {
+    let origin: CGPoint        // normalized 0...1 in the view
+    let destination: CGPoint
+    let progress: CGFloat      // 0...1 flown fraction
+
+    func path(in rect: CGRect) -> Path {
+        let o = CGPoint(x: origin.x * rect.width, y: origin.y * rect.height)
+        let d = CGPoint(x: destination.x * rect.width, y: destination.y * rect.height)
+        let mid = CGPoint(x: (o.x + d.x) / 2, y: min(o.y, d.y) - rect.height * 0.18) // arched control
+        var p = Path()
+        p.move(to: o)
+        p.addQuadCurve(to: d, control: mid)
+        return p.trimmedPath(from: 0, to: progress)
+    }
+}
+
+struct LiveFlightMap: View {
+    let origin: CGPoint
+    let destination: CGPoint
+    @State private var drawn: CGFloat = 0
+    let livePosition: CGFloat   // 0...1
+
+    var body: some View {
+        ZStack {
+            Color.fltCanvas // map host; swap for a styled MKMapView / dark tile layer
+
+            // Remaining (dashed, dim)
+            FlightArc(origin: origin, destination: destination, progress: 1)
+                .stroke(Color.fltBlue.opacity(0.35),
+                        style: StrokeStyle(lineWidth: 2, dash: [4, 5]))
+
+            // Flown (solid, glowing)
+            FlightArc(origin: origin, destination: destination, progress: drawn)
+                .stroke(Color.fltBlue, style: StrokeStyle(lineWidth: 2.5, lineCap: .round))
+                .shadow(color: .fltBlueGlow, radius: 18)
+
+            // Plane marker with glow halo
+            GeometryReader { geo in
+                let pt = pointOnArc(in: geo.size, at: livePosition)
+                Image(systemName: "airplane")
+                    .font(.system(size: 18, weight: .black))
+                    .foregroundStyle(.white)
+                    .shadow(color: .fltBlueGlow, radius: 10)
+                    .position(pt)
+            }
+        }
+        .onAppear {
+            withAnimation(.easeOut(duration: 0.9)) { drawn = livePosition }
+        }
+    }
+
+    private func pointOnArc(in size: CGSize, at t: CGFloat) -> CGPoint {
+        let o = CGPoint(x: origin.x * size.width, y: origin.y * size.height)
+        let d = CGPoint(x: destination.x * size.width, y: destination.y * size.height)
+        let c = CGPoint(x: (o.x + d.x) / 2, y: min(o.y, d.y) - size.height * 0.18)
+        let mt = 1 - t
+        return CGPoint(
+            x: mt * mt * o.x + 2 * mt * t * c.x + t * t * d.x,
+            y: mt * mt * o.y + 2 * mt * t * c.y + t * t * d.y
+        )
+    }
+}
+```
+
+### Flight Card
+
+```swift
+struct FlightCard: View {
+    let airline: String
+    let flightNo: String
+    let originCode: String
+    let destCode: String
+    let depTime: String
+    let arrTime: String
+    let depGate: String
+    let arrGate: String
+    let meta: String
+    let status: StatusChip.Status
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 16) {
+            HStack {
+                Text("\(airline) · \(flightNo)").font(.fltCardTitle).foregroundStyle(.white)
+                Spacer()
+                StatusChip(status: status)
+            }
+            HStack(alignment: .center, spacing: 16) {
+                Text(originCode).font(.fltRouteCode).foregroundStyle(.white)
+                Image(systemName: "airplane")
+                    .font(.system(size: 14))
+                    .foregroundStyle(Color.fltBlue)
+                    .frame(maxWidth: .infinity)
+                Text(destCode).font(.fltRouteCode).foregroundStyle(.white)
+            }
+            HStack(alignment: .top) {
+                VStack(alignment: .leading, spacing: 4) {
+                    Text(depTime).font(.fltTimeHero).foregroundStyle(.white)
+                    Text(depGate).font(.fltGate).foregroundStyle(.fltTextSecondary)
+                }
+                Spacer()
+                VStack(alignment: .trailing, spacing: 4) {
+                    Text(arrTime).font(.fltTimeHero).foregroundStyle(.white)
+                    Text(arrGate).font(.fltGate).foregroundStyle(.fltTextSecondary)
+                }
+            }
+            Text(meta).font(.fltMeta).foregroundStyle(.fltTextSecondary)
+        }
+        .padding(18)
+        .background(RoundedRectangle(cornerRadius: 16).fill(Color.fltSurface1))
+        .overlay(RoundedRectangle(cornerRadius: 16).strokeBorder(Color.fltDivider, lineWidth: 1))
+        .shadow(color: .black.opacity(0.4), radius: 16, y: 4)
+    }
+}
+```
+
+### On-Time Percentage Ring
+
+```swift
+struct OnTimeRing: View {
+    let percent: Int   // 0...100
+    var body: some View {
+        ZStack {
+            Circle().stroke(Color.fltDivider, lineWidth: 3)
+            Circle()
+                .trim(from: 0, to: CGFloat(percent) / 100)
+                .stroke(Color.fltOnTime, style: StrokeStyle(lineWidth: 3, lineCap: .round))
+                .rotationEffect(.degrees(-90))
+            VStack(spacing: 0) {
+                Text("\(percent)%").font(.fltOnTimePct).foregroundStyle(.white)
+                Text("on time").font(.fltTimestamp).foregroundStyle(.fltTextSecondary)
+            }
+        }
+        .frame(width: 72, height: 72)
+    }
+}
+```
+
+### Primary Button
+
+```swift
+struct FltPrimaryButton: View {
+    let title: String
+    let action: () -> Void
+    var body: some View {
+        Button(action: action) {
+            Text(title)
+                .font(.fltButton)
+                .foregroundStyle(.white)
+                .frame(maxWidth: .infinity)
+                .padding(.vertical, 15)
+                .background(RoundedRectangle(cornerRadius: 14).fill(Color.fltBlue))
+        }
+        .sensoryFeedback(.impact(weight: .medium), trigger: title)
+        .buttonStyle(FltPressableStyle())
+    }
+}
+
+struct FltPressableStyle: ButtonStyle {
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label
+            .scaleEffect(configuration.isPressed ? 0.98 : 1)
+            .animation(.spring(response: 0.25, dampingFraction: 0.8), value: configuration.isPressed)
+    }
+}
+```
+
+## 4. Tab Bar
+
+```swift
+struct RootTabView: View {
+    init() {
+        let appearance = UITabBarAppearance()
+        appearance.configureWithTransparentBackground()
+        appearance.backgroundEffect = UIBlurEffect(style: .systemMaterialDark)
+        appearance.backgroundColor = UIColor(Color.fltCanvas).withAlphaComponent(0.92)
+        UITabBar.appearance().standardAppearance = appearance
+        UITabBar.appearance().scrollEdgeAppearance = appearance
+    }
+    var body: some View {
+        TabView {
+            FlightsView().tabItem { Label("Flights", systemImage: "airplane") }
+            SearchView().tabItem { Label("Search", systemImage: "magnifyingglass") }
+            AirportView().tabItem { Label("Airport", systemImage: "building.2.fill") }
+            ProfileView().tabItem { Label("Profile", systemImage: "person.fill") }
+        }
+        .tint(.fltBlue) // active = Flighty Blue
+    }
+}
+```
+
+## 5. Motion
+
+```swift
+// Arc draw-in (see LiveFlightMap)
+withAnimation(.easeOut(duration: 0.9)) { drawn = livePosition }
+
+// Plane advance — animate the live position; the marker follows the curve
+withAnimation(.linear(duration: 1)) { livePosition = updated }
+
+// Status change — cross-fade chip color + single medium haptic
+.animation(.easeInOut(duration: 0.3), value: status)
+.sensoryFeedback(.impact(weight: .medium), trigger: statusKey)
+
+// Latest timeline node pulse — repeating scale on a glow ring
+// Card press — scale 0.98 spring (see FltPressableStyle)
+```
+
+## 6. SF Symbols Used
+
+| Component | Symbol | Size |
+|-----------|--------|------|
+| Plane / arc | `airplane` | 14-18pt |
+| Search | `magnifyingglass` | 18pt |
+| Refresh | `arrow.clockwise` | 20pt |
+| Notify | `bell` / `bell.fill` | 22pt |
+| Share | `square.and.arrow.up` | 22pt |
+| Open map | `map` / `map.fill` | 22pt |
+| Add flight | `plus` | 20pt |
+| Gate / terminal | `door.left.hand.open` | 16pt |
+| On-time | `checkmark.circle.fill` | 16pt |
+| Delay | `clock.badge.exclamationmark` | 16pt |
+| Flights (tab) | `airplane` | 24pt |
+| Airport (tab) | `building.2.fill` | 24pt |
+| Profile (tab) | `person.fill` | 24pt |
+
+## 7. Minimum iOS & Accessibility Notes
+
+- Minimum target: iOS 16 (`.sensoryFeedback` requires iOS 17; fall back to `UIImpactFeedbackGenerator`). Live Activities require iOS 16.1+ (`ActivityKit`) — mirror the in-app status bar in the widget.
+- Support Dynamic Type on flight times, route codes, body — pin status chips, gate/terminal, timeline timestamps, and tab labels (tabular, layout-sensitive)
+- VoiceOver: never rely on color alone for status — set `.accessibilityLabel("On time")` / `"Delayed 22 minutes"` / `"Cancelled"` on the chip; describe the arc as `"Flight 62% complete, en route from SFO to JFK"`
+- Tabular figures: use `.monospacedDigit()` so live time updates don't shift layout or confuse VoiceOver re-reads
+- Contrast: `#8E8E96` on `#0B0B0F` passes WCAG AA at 13pt+; validate amber `#FFD60A` text on its 15%-tint fill and bump opacity if needed for accessibility builds
+- The blue arc glow is decorative — ensure the route is also stated textually so the visual is not the only conveyance of progress