designmd-forge 1.2.0

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

@@ -0,0 +1,316 @@
+# Domino's (iOS) — Expo / React Native Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file translates Domino's visual language into paste-ready Expo / React Native code: a design-token module, themed components, and Reanimated snippets — including the signature five-stage pizza tracker.
+
+Assumes Expo SDK 51+ with `expo-router`, `expo-font`, and `react-native-reanimated` v3.
+
+## 1. Color Tokens
+
+```ts
+// theme/colors.ts
+export const colors = {
+  canvas:      '#FFFFFF',
+  surface:     '#F4F4F4',
+  surfaceDeep: '#EAEAEA',
+  divider:     '#E2E2E2',
+
+  textPrimary:   '#1F1F1F',
+  textSecondary: '#6E6E6E',
+  textTertiary:  '#9A9A9A',
+
+  red:         '#E31837',
+  redPressed:  '#C2122E',
+  redTint:     '#FCE7EB',
+  blue:        '#006491',
+  bluePressed: '#00547A',
+  blueTint:    '#E0EEF4',
+
+  success: '#1E8E3E',
+  warning: '#F5A623',
+} as const;
+
+export type DPZColor = keyof typeof colors;
+```
+
+## 2. Typography
+
+Domino's uses Archivo. Load via `expo-font`; fall back to `System`.
+
+```tsx
+// app/_layout.tsx
+import { useFonts } from 'expo-font';
+
+export default function Root() {
+  const [loaded] = useFonts({
+    'Archivo-Regular': require('../assets/fonts/Archivo-Regular.ttf'),
+    'Archivo-Bold':    require('../assets/fonts/Archivo-Bold.ttf'),
+  });
+  if (!loaded) return null;
+  return <Stack />;
+}
+```
+
+```ts
+// theme/typography.ts
+import type { TextStyle } from 'react-native';
+
+const ink = { color: '#1F1F1F' } satisfies TextStyle;
+const tnum = ['tabular-nums'] as const;
+
+export const typography = {
+  screenTitle:  { ...ink, fontFamily: 'Archivo-Bold',    fontSize: 26, lineHeight: 31, letterSpacing: -0.3 },
+  trackerStage: { ...ink, fontFamily: 'Archivo-Bold',    fontSize: 22, lineHeight: 26, letterSpacing: -0.2 },
+  section:      { ...ink, fontFamily: 'Archivo-Bold',    fontSize: 18, lineHeight: 23, letterSpacing: -0.2 },
+  itemName:     { ...ink, fontFamily: 'Archivo-Bold',    fontSize: 17, lineHeight: 22 },
+  price:        { ...ink, fontFamily: 'Archivo-Bold',    fontSize: 16, lineHeight: 19, fontVariant: tnum },
+  body:         { ...ink, fontFamily: 'Archivo-Regular', fontSize: 15, lineHeight: 22 },
+  button:       { color: '#FFFFFF', fontFamily: 'Archivo-Bold', fontSize: 16, lineHeight: 20, letterSpacing: 0.3 },
+  dealPrice:    { color: '#E31837', fontFamily: 'Archivo-Bold', fontSize: 28, lineHeight: 30, letterSpacing: -0.4, fontVariant: tnum },
+  meta:         { fontFamily: 'Archivo-Regular', fontSize: 13, lineHeight: 17, color: '#6E6E6E' },
+  badge:        { fontFamily: 'Archivo-Bold',    fontSize: 11, lineHeight: 13, letterSpacing: 0.4 },
+  tab:          { fontFamily: 'Archivo-Bold',    fontSize: 11, lineHeight: 13, letterSpacing: 0.2 },
+  caption:      { fontFamily: 'Archivo-Regular', fontSize: 11, lineHeight: 14, color: '#6E6E6E' },
+} satisfies Record<string, TextStyle>;
+```
+
+## 3. Signature Components
+
+### Five-Stage Pizza Tracker
+
+```tsx
+// components/PizzaTracker.tsx
+import { Pressable, Text, View } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming } from 'react-native-reanimated';
+import { useEffect } from 'react';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+const STAGES = ['Prep', 'Bake', 'Box', 'Quality Check', 'Out for delivery'];
+const HEADLINES = [
+  "We're prepping your order", 'Your pizza is in the oven!', 'Boxing it up',
+  'Quality check in progress', 'Out for delivery!',
+];
+
+export function PizzaTracker({ current, eta }: { current: number; eta: string }) {
+  return (
+    <View style={{ backgroundColor: colors.canvas, borderRadius: 12, padding: 16,
+                    shadowColor: colors.textPrimary, shadowOpacity: 0.12, shadowRadius: 14,
+                    shadowOffset: { width: 0, height: 4 } }}>
+      <Text style={typography.trackerStage}>{HEADLINES[current]}</Text>
+      <View style={{ flexDirection: 'row', alignItems: 'center', marginVertical: 16 }}>
+        {STAGES.map((label, i) => (
+          <View key={label} style={{ flexDirection: 'row', alignItems: 'center', flex: i < 4 ? 1 : 0 }}>
+            <Node label={label} completed={i < current} active={i === current} />
+            {i < 4 && (
+              <View style={{ flex: 1, height: 4,
+                backgroundColor: i < current ? colors.blue : i === current ? colors.red : colors.divider }} />
+            )}
+          </View>
+        ))}
+      </View>
+      <Text style={typography.meta}>Estimated delivery {eta}</Text>
+      <Pressable hitSlop={8}>
+        <Text style={{ ...typography.meta, color: colors.blue, fontFamily: 'Archivo-Bold', marginTop: 8 }}>
+          Track on the map
+        </Text>
+      </Pressable>
+    </View>
+  );
+}
+
+function Node({ label, completed, active }: { label: string; completed: boolean; active: boolean }) {
+  const pulse = useSharedValue(1);
+  useEffect(() => {
+    if (active) pulse.value = withRepeat(withTiming(1.06, { duration: 800 }), -1, true);
+    else pulse.value = 1;
+  }, [active]);
+  const dot = useAnimatedStyle(() => ({ transform: [{ scale: pulse.value }] }));
+  const fill = completed ? colors.blue : active ? colors.red : 'transparent';
+  const stroke = completed ? colors.blue : active ? colors.red : colors.divider;
+
+  return (
+    <View style={{ alignItems: 'center', width: 56 }}>
+      <Animated.View style={[{ width: 24, height: 24, borderRadius: 12, borderWidth: 2,
+        borderColor: stroke, backgroundColor: fill, alignItems: 'center', justifyContent: 'center' }, dot]}>
+        {completed && <Ionicons name="checkmark" size={13} color="#fff" />}
+      </Animated.View>
+      <Text numberOfLines={1} style={{ ...typography.caption, marginTop: 6,
+        fontFamily: completed || active ? 'Archivo-Bold' : 'Archivo-Regular',
+        color: active ? colors.red : completed ? colors.textPrimary : colors.textTertiary }}>
+        {label}
+      </Text>
+    </View>
+  );
+}
+```
+
+### Primary CTA
+
+```tsx
+// components/DominosCTA.tsx
+import { Pressable, Text } from 'react-native';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+export function DominosCTA({ label, onPress }: { label: string; onPress: () => void }) {
+  return (
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => ({
+        height: 52, borderRadius: 8, alignItems: 'center', justifyContent: 'center',
+        backgroundColor: pressed ? colors.redPressed : colors.red,
+        transform: [{ scale: pressed ? 0.98 : 1 }],
+      })}>
+      <Text style={typography.button}>{label}</Text>
+    </Pressable>
+  );
+}
+```
+
+### Deal Card
+
+```tsx
+// components/DealCard.tsx
+import { Pressable, Text, View } from 'react-native';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+function DominoMark() {
+  return (
+    <View style={{ flexDirection: 'row', width: 22, height: 22, borderRadius: 4, overflow: 'hidden' }}>
+      <View style={{ flex: 1, backgroundColor: colors.red }} />
+      <View style={{ width: 1 }} />
+      <View style={{ flex: 1, backgroundColor: colors.blue }} />
+    </View>
+  );
+}
+
+export function DealCard({
+  price, name, finePrint, onAdd,
+}: { price: string; name: string; finePrint: string; onAdd: () => void }) {
+  return (
+    <View style={{ height: 150, backgroundColor: colors.canvas, borderRadius: 8,
+                    borderWidth: 2, borderColor: colors.red, padding: 16 }}>
+      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
+        <Text style={typography.dealPrice}>{price}</Text>
+        <DominoMark />
+      </View>
+      <Text style={[typography.itemName, { marginTop: 6 }]}>{name}</Text>
+      <Text style={typography.meta}>{finePrint}</Text>
+      <View style={{ flex: 1 }} />
+      <Pressable onPress={onAdd} style={{ alignSelf: 'flex-end', backgroundColor: colors.red,
+        borderRadius: 8, paddingVertical: 8, paddingHorizontal: 16 }}>
+        <Text style={{ ...typography.badge, color: '#fff' }}>ADD DEAL</Text>
+      </Pressable>
+    </View>
+  );
+}
+```
+
+### Build-Your-Pizza Live Preview
+
+```tsx
+// components/PizzaPreview.tsx
+import Animated, { LinearTransition } from 'react-native-reanimated';
+import { View } from 'react-native';
+
+export function PizzaPreview({
+  crustWidth, sauceColor, hasCheese,
+}: { crustWidth: number; sauceColor: string; hasCheese: boolean }) {
+  return (
+    <Animated.View layout={LinearTransition.duration(250)}
+      style={{ width: 160, height: 160, borderRadius: 80, backgroundColor: '#EDD9A8',
+               borderWidth: crustWidth, borderColor: '#CC9E5C', overflow: 'hidden',
+               alignItems: 'center', justifyContent: 'center' }}>
+      <View style={{ position: 'absolute', inset: crustWidth + 6, borderRadius: 80,
+                      backgroundColor: sauceColor }} />
+      {hasCheese && (
+        <View style={{ position: 'absolute', inset: crustWidth + 10, borderRadius: 80,
+                        backgroundColor: 'rgba(250,220,115,0.6)' }} />
+      )}
+      {/* topping garnishes scattered as small absolutely-positioned circles */}
+    </Animated.View>
+  );
+}
+```
+
+## 4. Tracker State Progression
+
+```ts
+// Hold `current` (0-4) in state. Advancing recomputes node/rail colors;
+// wrap the setState in a LayoutAnimation or animate the rail width with a
+// shared value (withTiming 600, Easing.out) for the red fill hand-off,
+// then Haptics.impactAsync(Soft).
+```
+
+## 5. Tab Bar
+
+```tsx
+// app/(tabs)/_layout.tsx  (expo-router)
+import { Tabs } from 'expo-router';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { colors } from '../../theme/colors';
+
+export default function TabsLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor:   colors.red,
+        tabBarInactiveTintColor: colors.textSecondary,
+        tabBarStyle: { backgroundColor: colors.canvas, borderTopColor: colors.divider, borderTopWidth: 0.5 },
+        tabBarLabelStyle: { fontFamily: 'Archivo-Bold', fontSize: 11, letterSpacing: 0.2 },
+      }}
+    >
+      <Tabs.Screen name="index"   options={{ title: 'Order',   tabBarIcon: ({ color }) => <Ionicons name="restaurant-outline" size={24} color={color} /> }} />
+      <Tabs.Screen name="tracker" options={{ title: 'Tracker', tabBarIcon: ({ color }) => <Ionicons name="location-outline"   size={24} color={color} /> }} />
+      <Tabs.Screen name="deals"   options={{ title: 'Deals',   tabBarIcon: ({ color }) => <Ionicons name="pricetag-outline"   size={24} color={color} /> }} />
+      <Tabs.Screen name="account" options={{ title: 'Account', tabBarIcon: ({ color }) => <Ionicons name="person-outline"     size={24} color={color} /> }} />
+    </Tabs>
+  );
+}
+```
+
+## 6. Motion
+
+```tsx
+// Tracker stage advance: animate rail-fill shared value withTiming(600, Easing.out(Easing.quad))
+Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Soft);
+
+// Active node pulse: pulse.value = withRepeat(withTiming(1.06, { duration: 800 }), -1, true)
+
+// Build-pizza layer add: Animated.View layout={LinearTransition.duration(250)}
+
+// Add to Order: Haptics.notificationAsync(Success); cart badge withSequence(withSpring(1.2), withSpring(1))
+
+// Sheet present: expo-router modal; scrim rgba(31,31,31,0.45)
+```
+
+## 7. Icon Library
+
+Use `@expo/vector-icons`. Map to Domino's SF Symbol equivalents:
+
+| Purpose | Ionicons |
+|---------|----------|
+| Completed stage check | `checkmark` |
+| Order | `restaurant-outline` / `restaurant` |
+| Tracker | `location-outline` / `location` |
+| Deals | `pricetag-outline` / `pricetag` |
+| Account | `person-outline` / `person` |
+| Cart | `cart-outline` / `cart` |
+| Search | `search` |
+| Store chevron | `chevron-down` |
+| Quantity minus / plus | `remove` / `add` |
+| Map / track | `map-outline` |
+| Time / ETA | `time-outline` |
+| Back | `chevron-back` |
+
+## 8. Platform Notes
+
+- **Light-only feel**: the bright catalog + tracker depend on white — do not auto-invert; if you mirror system dark, keep red and blue identical
+- **Status bar**: Set `<StatusBar style="dark" />` from `expo-status-bar` — the white canvas requires dark content
+- **Safe area**: wrap screens in `SafeAreaView` from `react-native-safe-area-context`; the persistent order footer must clear the home indicator (`useSafeAreaInsets().bottom`)
+- **Tabular figures**: pass `fontVariant: ['tabular-nums']` on prices, ETAs, deal callouts, and totals
+- **Dynamic Type**: RN respects font scaling; set `allowFontScaling={false}` on tab labels and tracker node labels (abbreviate on small widths); let names and body scale
+- **Accessibility**: expose the tracker as a single `accessibilityLabel` ("Order status: Bake, stage 2 of 5, ETA 7:45 PM") with `accessibilityRole="progressbar"`; the CTA announces "Add to order, total $X"
+- **Tracker is the hero**: ensure the tracker card renders above the fold on the active-order screen and is not collapsible

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

@@ -0,0 +1,340 @@
+# Domino's (iOS) — SwiftUI Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file translates Domino's visual language into paste-ready SwiftUI code: `Color` extensions, `Font` extensions, `ViewModifier`s, and example views — including the signature five-stage pizza tracker.
+
+## 1. Color Tokens
+
+```swift
+import SwiftUI
+
+extension Color {
+    // MARK: - Canvas & Surfaces
+    static let dpzCanvas      = Color.white                                  // #FFFFFF
+    static let dpzSurface     = Color(red: 0.957, green: 0.957, blue: 0.957) // #F4F4F4
+    static let dpzSurfaceDeep = Color(red: 0.918, green: 0.918, blue: 0.918) // #EAEAEA
+    static let dpzDivider     = Color(red: 0.886, green: 0.886, blue: 0.886) // #E2E2E2
+
+    // MARK: - Text
+    static let dpzTextPrimary   = Color(red: 0.122, green: 0.122, blue: 0.122) // #1F1F1F
+    static let dpzTextSecondary = Color(red: 0.431, green: 0.431, blue: 0.431) // #6E6E6E
+    static let dpzTextTertiary  = Color(red: 0.604, green: 0.604, blue: 0.604) // #9A9A9A
+
+    // MARK: - Brand
+    static let dpzRed         = Color(red: 0.890, green: 0.094, blue: 0.216) // #E31837
+    static let dpzRedPressed  = Color(red: 0.761, green: 0.071, blue: 0.180) // #C2122E
+    static let dpzRedTint     = Color(red: 0.988, green: 0.906, blue: 0.922) // #FCE7EB
+    static let dpzBlue        = Color(red: 0.0,   green: 0.392, blue: 0.569) // #006491
+    static let dpzBluePressed = Color(red: 0.0,   green: 0.329, blue: 0.478) // #00547A
+    static let dpzBlueTint    = Color(red: 0.878, green: 0.933, blue: 0.957) // #E0EEF4
+
+    // MARK: - Semantic
+    static let dpzSuccess = Color(red: 0.118, green: 0.557, blue: 0.243) // #1E8E3E
+    static let dpzWarning = Color(red: 0.961, green: 0.651, blue: 0.137) // #F5A623
+}
+```
+
+## 2. Typography
+
+Domino's uses Archivo. Bundle the TTFs via `Info.plist` (`UIAppFonts`); fall back to Helvetica Neue / `.system(design: .default)`.
+
+```swift
+extension Font {
+    static let dpzScreenTitle  = Font.custom("Archivo-Bold",    size: 26)
+    static let dpzTrackerStage = Font.custom("Archivo-Bold",    size: 22)
+    static let dpzSection      = Font.custom("Archivo-Bold",    size: 18)
+    static let dpzItemName     = Font.custom("Archivo-Bold",    size: 17)
+    static let dpzPrice        = Font.custom("Archivo-Bold",    size: 16)
+    static let dpzBody         = Font.custom("Archivo-Regular", size: 15)
+    static let dpzButton       = Font.custom("Archivo-Bold",    size: 16)
+    static let dpzDealPrice    = Font.custom("Archivo-Bold",    size: 28)
+    static let dpzMeta         = Font.custom("Archivo-Regular", size: 13)
+    static let dpzBadge        = Font.custom("Archivo-Bold",    size: 11)
+    static let dpzTab          = Font.custom("Archivo-Bold",    size: 11)
+    static let dpzCaption      = Font.custom("Archivo-Regular", size: 11)
+}
+
+extension Font {
+    static func dpz(_ size: CGFloat, weight: Font.Weight = .regular) -> Font {
+        .system(size: size, weight: weight, design: .default)
+    }
+}
+```
+
+Prices, ETAs, and deal callouts use tabular figures — apply `.monospacedDigit()`.
+
+## 3. Signature Components
+
+### Five-Stage Pizza Tracker
+
+```swift
+enum TrackerStage: Int, CaseIterable {
+    case prep, bake, box, quality, out
+    var label: String {
+        switch self {
+        case .prep: "Prep"; case .bake: "Bake"; case .box: "Box"
+        case .quality: "Quality Check"; case .out: "Out for delivery"
+        }
+    }
+    var headline: String {
+        switch self {
+        case .prep: "We're prepping your order"
+        case .bake: "Your pizza is in the oven!"
+        case .box: "Boxing it up"
+        case .quality: "Quality check in progress"
+        case .out: "Out for delivery!"
+        }
+    }
+}
+
+struct PizzaTracker: View {
+    let current: TrackerStage
+    let eta: String
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 16) {
+            Text(current.headline)
+                .font(.dpzTrackerStage)
+                .foregroundStyle(Color.dpzTextPrimary)
+
+            HStack(spacing: 0) {
+                ForEach(TrackerStage.allCases, id: \.rawValue) { stage in
+                    node(for: stage)
+                    if stage != .out {
+                        Rectangle()
+                            .fill(stage.rawValue < current.rawValue ? Color.dpzBlue :
+                                  stage.rawValue == current.rawValue ? Color.dpzRed : Color.dpzDivider)
+                            .frame(height: 4)
+                    }
+                }
+            }
+
+            Text("Estimated delivery \(eta)")
+                .font(.dpzMeta)
+                .foregroundStyle(Color.dpzTextSecondary)
+
+            Button("Track on the map") {}
+                .font(.dpz(14, weight: .bold))
+                .foregroundStyle(Color.dpzBlue)
+        }
+        .padding(16)
+        .background(RoundedRectangle(cornerRadius: 12).fill(Color.dpzCanvas))
+        .shadow(color: Color.dpzTextPrimary.opacity(0.12), radius: 14, y: 4)
+    }
+
+    @ViewBuilder private func node(for stage: TrackerStage) -> some View {
+        let completed = stage.rawValue < current.rawValue
+        let active = stage.rawValue == current.rawValue
+        VStack(spacing: 6) {
+            ZStack {
+                Circle()
+                    .fill(completed ? Color.dpzBlue : active ? Color.dpzRed : .clear)
+                    .frame(width: 24, height: 24)
+                Circle()
+                    .strokeBorder(completed ? Color.dpzBlue : active ? Color.dpzRed : Color.dpzDivider,
+                                  lineWidth: 2)
+                    .frame(width: 24, height: 24)
+                if completed {
+                    Image(systemName: "checkmark")
+                        .font(.system(size: 11, weight: .bold))
+                        .foregroundStyle(.white)
+                }
+            }
+            .scaleEffect(active ? 1.06 : 1)
+            .animation(active ?
+                .easeInOut(duration: 0.8).repeatForever(autoreverses: true) : .default,
+                value: active)
+            Text(stage.label)
+                .font(.dpz(11, weight: completed || active ? .bold : .regular))
+                .foregroundStyle(active ? Color.dpzRed :
+                                 completed ? Color.dpzTextPrimary : Color.dpzTextTertiary)
+                .fixedSize()
+        }
+        .frame(width: 56)
+    }
+}
+```
+
+### Primary CTA
+
+```swift
+struct DominosCTA: View {
+    let label: String     // "ADD TO ORDER · $13.99"
+    let action: () -> Void
+    var body: some View {
+        Button(action: action) {
+            Text(label)
+                .font(.dpzButton)
+                .tracking(0.3)
+                .foregroundStyle(.white)
+                .frame(maxWidth: .infinity)
+                .frame(height: 52)
+                .background(RoundedRectangle(cornerRadius: 8).fill(Color.dpzRed))
+        }
+        .buttonStyle(DPZPressableStyle())
+    }
+}
+
+struct DPZPressableStyle: ButtonStyle {
+    var pressedScale: CGFloat = 0.98
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label
+            .scaleEffect(configuration.isPressed ? pressedScale : 1)
+            .brightness(configuration.isPressed ? -0.04 : 0)
+            .animation(.spring(response: 0.25, dampingFraction: 0.8), value: configuration.isPressed)
+    }
+}
+```
+
+### Deal Card
+
+```swift
+struct DealCard: View {
+    let price: String       // "$7.99"
+    let name: String
+    let finePrint: String
+    let add: () -> Void
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 8) {
+            HStack {
+                Text(price).font(.dpzDealPrice).monospacedDigit().foregroundStyle(Color.dpzRed)
+                Spacer()
+                DominoMark()      // small red/blue square motif
+            }
+            Text(name).font(.dpzItemName).foregroundStyle(Color.dpzTextPrimary)
+            Text(finePrint).font(.dpzMeta).foregroundStyle(Color.dpzTextSecondary)
+            Spacer()
+            Button(action: add) {
+                Text("ADD DEAL")
+                    .font(.dpz(13, weight: .bold)).foregroundStyle(.white)
+                    .padding(.vertical, 8).padding(.horizontal, 16)
+                    .background(RoundedRectangle(cornerRadius: 8).fill(Color.dpzRed))
+            }
+            .frame(maxWidth: .infinity, alignment: .trailing)
+        }
+        .padding(16)
+        .frame(height: 150)
+        .background(RoundedRectangle(cornerRadius: 8).fill(Color.dpzCanvas))
+        .overlay(RoundedRectangle(cornerRadius: 8).strokeBorder(Color.dpzRed, lineWidth: 2))
+    }
+}
+
+struct DominoMark: View {  // red/blue split square
+    var body: some View {
+        HStack(spacing: 1) {
+            Rectangle().fill(Color.dpzRed)
+            Rectangle().fill(Color.dpzBlue)
+        }
+        .frame(width: 22, height: 22)
+        .clipShape(RoundedRectangle(cornerRadius: 4))
+    }
+}
+```
+
+### Build-Your-Pizza Live Preview
+
+```swift
+struct PizzaPreview: View {
+    let crustThickness: CGFloat   // ring width by crust
+    let sauceColor: Color
+    let hasCheese: Bool
+    let toppings: [String]
+
+    var body: some View {
+        ZStack {
+            Circle().fill(Color(red: 0.93, green: 0.85, blue: 0.66))           // crust base
+            Circle().strokeBorder(Color(red: 0.80, green: 0.62, blue: 0.36),
+                                   lineWidth: crustThickness)                  // crust ring
+            Circle().fill(sauceColor).padding(crustThickness + 6)              // sauce wash
+            if hasCheese {
+                Circle().fill(Color(red: 0.98, green: 0.86, blue: 0.45).opacity(0.6))
+                    .padding(crustThickness + 10)
+            }
+            // toppings scattered as small circles around the pie (omitted for brevity)
+        }
+        .frame(width: 160, height: 160)
+        .animation(.easeOut(duration: 0.25), value: toppings)
+        .animation(.easeOut(duration: 0.25), value: hasCheese)
+    }
+}
+```
+
+## 4. Tracker State Progression
+
+```swift
+// Advancing a stage: the prior node settles blue+check, the new node turns red,
+// the rail segment fills red. Drive with a single @State current stage and let the
+// node/rail color closures recompute; wrap the change in withAnimation for the
+// ~600ms ease-out hand-off and fire a soft haptic.
+withAnimation(.easeOut(duration: 0.6)) { current = next }
+```
+
+## 5. Tab Bar
+
+```swift
+struct RootTabView: View {
+    init() {
+        let appearance = UITabBarAppearance()
+        appearance.configureWithOpaqueBackground()
+        appearance.backgroundColor = UIColor.white
+        appearance.shadowColor = UIColor(Color.dpzDivider)
+        UITabBar.appearance().standardAppearance = appearance
+        UITabBar.appearance().scrollEdgeAppearance = appearance
+    }
+    var body: some View {
+        TabView {
+            OrderView().tabItem   { Label("Order",   systemImage: "menucard") }
+            TrackerView().tabItem { Label("Tracker", systemImage: "location.circle") }
+            DealsView().tabItem   { Label("Deals",   systemImage: "tag") }
+            AccountView().tabItem { Label("Account", systemImage: "person") }
+        }
+        .tint(.dpzRed) // active = Domino's Red
+    }
+}
+```
+
+## 6. Motion
+
+```swift
+// Tracker stage advance (~600ms ease-out hand-off) + soft haptic
+withAnimation(.easeOut(duration: 0.6)) { current = next }
+.sensoryFeedback(.impact(weight: .soft), trigger: current)
+
+// Active node pulse (1.0 → 1.06 → 1.0 loop)
+.animation(.easeInOut(duration: 0.8).repeatForever(autoreverses: true), value: isActive)
+
+// Build-pizza layer add (~250ms)
+.animation(.easeOut(duration: 0.25), value: toppings)
+
+// Add to Order
+.sensoryFeedback(.success, trigger: didAddToOrder)
+// then bump cart badge scale 1.0 → 1.2 → 1.0 with .spring
+
+// Sheet present: .presentationDetents + default slide
+```
+
+## 7. SF Symbols Used
+
+| Component | Symbol | Size |
+|-----------|--------|------|
+| Completed stage check | `checkmark` | 11pt |
+| Order (tab) | `menucard` | 24pt |
+| Tracker (tab) | `location.circle` / `.fill` | 24pt |
+| Deals (tab) | `tag` / `tag.fill` | 24pt |
+| Account (tab) | `person` / `person.fill` | 24pt |
+| Cart | `cart` / `cart.fill` | 24pt |
+| Search | `magnifyingglass` | 18pt |
+| Store chevron | `chevron.down` | 14pt |
+| Quantity minus / plus | `minus` / `plus` | 14pt |
+| Map / track | `map` | 16pt |
+| Time / ETA | `clock` | 13pt |
+| Back | `chevron.left` | 18pt |
+
+## 8. Minimum iOS & Accessibility Notes
+
+- Minimum target: iOS 16 (for `.sensoryFeedback` you need iOS 17; fall back to `UIImpactFeedbackGenerator(style: .soft)` and `UINotificationFeedbackGenerator`)
+- Support Dynamic Type on item names, body, descriptions; the tracker headline scales to a max and wraps to at most 2 lines; pin tab labels and tracker node labels (abbreviate on small widths)
+- VoiceOver: expose the tracker as a single status — `.accessibilityLabel("Order status: Bake, stage 2 of 5, estimated delivery 7:45 PM")` — and hide the decorative nodes/rail
+- The CTA reads "Add to order, total $13.99"; deal cards read "Mix and Match deal, $7.99, add"
+- Contrast: `#1F1F1F` on `#FFFFFF` is maximal. `#6E6E6E` secondary on white passes WCAG AA at 13pt+. Domino's Red `#E31837` text on white passes AA for bold 16pt+ — keep small red text bold
+- Don't rely on color alone for tracker state — completed nodes carry a checkmark glyph and labels switch to bold, in addition to the blue/red/gray coding