designmd-forge 1.2.0

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

@@ -0,0 +1,344 @@
+# Resy (iOS) — Expo / React Native Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file translates Resy's visual language into paste-ready Expo / React Native code: a design-token module, themed components, and Reanimated snippets. Resy is dark-first — the canvas is pure black.
+
+Assumes Expo SDK 51+ with `expo-router`, `expo-font`, `expo-haptics`, `expo-linear-gradient`, and `react-native-reanimated` v3.
+
+## 1. Color Tokens
+
+```ts
+// theme/colors.ts
+export const colors = {
+  // Canvas & Surfaces (dark — primary brand)
+  black:      '#000000',
+  surface1:   '#121212',
+  surface2:   '#1C1C1C',
+  surface3:   '#242424',
+  divider:    '#262626',
+
+  // Canvas & Surfaces (light — secondary inversion)
+  canvasLight:    '#FFFFFF',
+  surfaceGray:    '#F4F4F4',
+  surfacePressed: '#EAEAEA',
+  dividerLight:   '#E2E2E2',
+
+  // Text
+  textPrimary:     '#F5F5F5',
+  textSecondary:   '#9E9E9E',
+  textTertiary:    '#6A6A6A',
+  textPrimaryLt:   '#101010',
+  textSecondaryLt: '#6B6B6B',
+
+  // Brand
+  red:        '#C73E3A',
+  redBright:  '#E2504B',
+  redPressed: '#A8302D',
+
+  // Functional accents
+  notifyAmber: '#D99A2B',
+  hitGold:     '#C9A24B',
+  confirmed:   '#4FA773',
+
+  // Semantic
+  error:      '#E2504B',
+} as const;
+
+export type ResyColor = keyof typeof colors;
+```
+
+## 2. Typography
+
+Resy pairs a high-contrast display serif (Playfair Display, the closest free analog to Resy's brand serif) with Inter for UI. Load both via `expo-font`. The serif/sans split is the brand.
+
+```tsx
+// app/_layout.tsx
+import { useFonts } from 'expo-font';
+
+export default function Root() {
+  const [loaded] = useFonts({
+    'PlayfairDisplay-Bold':      require('../assets/fonts/PlayfairDisplay-Bold.ttf'),
+    'PlayfairDisplay-ExtraBold': require('../assets/fonts/PlayfairDisplay-ExtraBold.ttf'),
+    'PlayfairDisplay-Italic':    require('../assets/fonts/PlayfairDisplay-Italic.ttf'),
+    'Inter-Regular':   require('../assets/fonts/Inter-Regular.ttf'),
+    'Inter-Medium':    require('../assets/fonts/Inter-Medium.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 primary = { color: '#F5F5F5' } satisfies TextStyle;
+
+export const typography = {
+  displayTitle: { ...primary, fontFamily: 'PlayfairDisplay-ExtraBold', fontSize: 34, lineHeight: 39, letterSpacing: -0.5 },
+  restName:     { ...primary, fontFamily: 'PlayfairDisplay-Bold',      fontSize: 27, lineHeight: 31, letterSpacing: -0.3 },
+  editorial:    { color: '#9E9E9E', fontFamily: 'PlayfairDisplay-Italic', fontSize: 15, lineHeight: 23, fontStyle: 'italic' as const },
+  section:      { ...primary, fontFamily: 'Inter-Bold',     fontSize: 22, lineHeight: 29, letterSpacing: -0.2 },
+  cardTitle:    { ...primary, fontFamily: 'Inter-SemiBold', fontSize: 18, lineHeight: 23 },
+  body:         { ...primary, fontFamily: 'Inter-Regular',  fontSize: 16, lineHeight: 24 },
+  meta:         { color: '#9E9E9E', fontFamily: 'Inter-Regular', fontSize: 14, lineHeight: 19 },
+  slotTime:     { ...primary, fontFamily: 'Inter-Bold',     fontSize: 14, lineHeight: 17 },
+  seating:      { color: '#9E9E9E', fontFamily: 'Inter-SemiBold', fontSize: 9, lineHeight: 11, letterSpacing: 0.3 },
+  eyebrow:      { color: '#9E9E9E', fontFamily: 'Inter-Bold', fontSize: 12, lineHeight: 14, letterSpacing: 0.8 },
+  button:       { color: '#FFFFFF', fontFamily: 'Inter-Bold', fontSize: 16, lineHeight: 18, letterSpacing: 0.2 },
+  tab:          { fontFamily: 'Inter-SemiBold', fontSize: 10, lineHeight: 11, letterSpacing: 0.1 },
+  caption:      { color: '#9E9E9E', fontFamily: 'Inter-Medium', fontSize: 12, lineHeight: 17 },
+} satisfies Record<string, TextStyle>;
+```
+
+## 3. Signature Components
+
+### Reservation Slot Grid (red-outline system)
+
+```tsx
+// components/SlotGrid.tsx
+import { View, Text, Pressable } from 'react-native';
+import * as Haptics from 'expo-haptics';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+export type SlotKind = 'available' | 'primary' | 'notify';
+export type Slot = { id: string; label: string; seating: string; kind: SlotKind };
+
+export function SlotGrid({ slots, selectedId, onSelect }: {
+  slots: Slot[]; selectedId: string | null; onSelect: (id: string) => void;
+}) {
+  return (
+    <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 9 }}>
+      {slots.map((s) => {
+        const isSel = s.id === selectedId;
+        const solid = s.kind === 'primary' || (isSel && s.kind === 'available');
+        const notify = s.kind === 'notify';
+        return (
+          <Pressable
+            key={s.id}
+            disabled={notify ? false : false}
+            onPress={() => { if (!notify) { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Soft); onSelect(s.id); } }}
+            style={({ pressed }) => ({
+              flexGrow: 1, minWidth: 70, height: 56, borderRadius: 10,
+              alignItems: 'center', justifyContent: 'center', gap: 3,
+              backgroundColor: solid ? colors.red : 'transparent',
+              borderWidth: solid ? 0 : 1,
+              borderStyle: notify ? 'dashed' : 'solid',
+              borderColor: solid ? 'transparent' : notify ? colors.divider : colors.red,
+              transform: [{ scale: pressed && !notify ? 0.97 : 1 }],
+            })}
+          >
+            <Text style={[
+              notify ? { ...typography.slotTime, fontSize: 12 } : typography.slotTime,
+              { color: solid ? '#FFFFFF' : notify ? colors.notifyAmber : colors.textPrimary },
+            ]}>{s.label}</Text>
+            <Text style={[typography.seating, {
+              color: solid ? 'rgba(255,255,255,0.82)' : notify ? colors.notifyAmber : colors.textSecondary,
+            }]}>{s.seating.toUpperCase()}</Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+```
+
+### Reservation Date Strip
+
+```tsx
+// components/DateStrip.tsx
+import { ScrollView, View, Text, Pressable } from 'react-native';
+import { colors } from '../theme/colors';
+
+export type DateCell = { id: string; dow: string; num: string };
+
+export function DateStrip({ days, selectedId, onSelect }: {
+  days: DateCell[]; selectedId: string | null; onSelect: (id: string) => void;
+}) {
+  return (
+    <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: 8 }}>
+      {days.map((d) => {
+        const sel = d.id === selectedId;
+        return (
+          <Pressable key={d.id} onPress={() => onSelect(d.id)}
+            style={{ minWidth: 56, height: 60, borderRadius: 10, alignItems: 'center', justifyContent: 'center', gap: 3,
+                     backgroundColor: sel ? colors.red : colors.surface1,
+                     borderWidth: 1, borderColor: sel ? colors.red : colors.divider }}>
+            <Text style={{ fontFamily: 'Inter-SemiBold', fontSize: 10, letterSpacing: 0.5,
+                           color: sel ? '#FFFFFF' : colors.textSecondary }}>
+              {d.dow.toUpperCase()}
+            </Text>
+            <Text style={{ fontFamily: 'Inter-Bold', fontSize: 17, color: sel ? '#FFFFFF' : colors.textPrimary }}>
+              {d.num}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </ScrollView>
+  );
+}
+```
+
+### Editorial Restaurant Header
+
+```tsx
+// components/RestaurantHeader.tsx
+import { View, Text } from 'react-native';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+export function RestaurantHeader({ name, rating, meta, tagline }: {
+  name: string; rating: string; meta: string; tagline: string;
+}) {
+  return (
+    <View>
+      <Text style={typography.restName}>{name}</Text>
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, marginTop: 9, flexWrap: 'wrap' }}>
+        <Text style={{ fontFamily: 'Inter-Bold', fontSize: 13, color: colors.hitGold }}>{`★ ${rating}`}</Text>
+        <Text style={{ color: colors.textTertiary }}>·</Text>
+        <Text style={typography.meta}>{meta}</Text>
+      </View>
+      <Text style={[typography.editorial, { marginTop: 12 }]}>{tagline}</Text>
+    </View>
+  );
+}
+```
+
+### Notify Chip
+
+```tsx
+// components/NotifyChip.tsx
+import { Pressable, Text } from 'react-native';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import * as Haptics from 'expo-haptics';
+import { colors } from '../theme/colors';
+
+export function NotifyChip({ onList, setOnList }: { onList: boolean; setOnList: (b: boolean) => void }) {
+  return (
+    <Pressable
+      onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Soft); setOnList(!onList); }}
+      style={{ flexDirection: 'row', alignItems: 'center', gap: 7, alignSelf: 'flex-start',
+               paddingVertical: 8, paddingHorizontal: 16, borderRadius: 999,
+               backgroundColor: onList ? colors.notifyAmber : 'transparent',
+               borderWidth: onList ? 0 : 1, borderColor: colors.notifyAmber }}>
+      <Ionicons name="notifications" size={12} color={onList ? '#FFFFFF' : colors.notifyAmber} />
+      <Text style={{ fontFamily: 'Inter-Bold', fontSize: 13, color: onList ? '#FFFFFF' : colors.notifyAmber }}>
+        {onList ? 'On the Notify list' : 'Notify when available'}
+      </Text>
+    </Pressable>
+  );
+}
+```
+
+### Primary Button
+
+```tsx
+// components/ResyPrimaryButton.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 ResyPrimaryButton({ title, onPress }: { title: string; onPress: () => void }) {
+  return (
+    <Pressable
+      onPress={() => { Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success); onPress(); }}
+      style={({ pressed }) => ({
+        borderRadius: 8, paddingVertical: 16, alignItems: 'center',
+        backgroundColor: pressed ? colors.redPressed : colors.red,
+        transform: [{ scale: pressed ? 0.98 : 1 }],
+      })}>
+      <Text style={typography.button}>{title}</Text>
+    </Pressable>
+  );
+}
+```
+
+## 4. Bottom Tab Bar
+
+```tsx
+// app/(tabs)/_layout.tsx
+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.redBright,   // bright red for contrast on pure black
+        tabBarInactiveTintColor: colors.textTertiary,
+        tabBarStyle: { backgroundColor: colors.black, borderTopWidth: 0.5, borderTopColor: colors.divider },
+        tabBarLabelStyle: { fontFamily: 'Inter-SemiBold', fontSize: 10, letterSpacing: 0.1 },
+      }}
+    >
+      <Tabs.Screen name="index"        options={{ title: 'Search',       tabBarIcon: ({ color }) => <Ionicons name="search"        size={21} color={color} /> }} />
+      <Tabs.Screen name="hitlist"      options={{ title: 'Hit List',     tabBarIcon: ({ color }) => <Ionicons name="bookmark"      size={21} color={color} /> }} />
+      <Tabs.Screen name="reservations" options={{ title: 'Reservations', tabBarIcon: ({ color }) => <Ionicons name="calendar"      size={21} color={color} /> }} />
+      <Tabs.Screen name="notify"       options={{ title: 'Notify',       tabBarIcon: ({ color }) => <Ionicons name="notifications" size={21} color={color} /> }} />
+      <Tabs.Screen name="account"      options={{ title: 'Account',      tabBarIcon: ({ color }) => <Ionicons name="person-circle" size={21} color={color} /> }} />
+    </Tabs>
+  );
+}
+```
+
+## 5. Motion
+
+```tsx
+// Slot select — outlined → solid red on press + soft haptic; Book button updates
+// transform: [{ scale: pressed ? 0.97 : 1 }] + Haptics.impactAsync(Soft)
+
+// Date strip — fill red 150ms; slot grid cross-fades to that day
+import Animated, { FadeIn } from 'react-native-reanimated';
+
+// Slot grid load — staggered fade-in + 4pt slide-up
+import Animated, { FadeInDown } from 'react-native-reanimated';
+// entering={FadeInDown.duration(200).delay(index * 30)}
+
+// Notify toggle — dashed → amber fill 150ms + haptic
+
+// Restaurant detail open — expo-router shared transition or FadeIn on hero carousel
+
+// Guest / calendar sheet — @gorhom/bottom-sheet, snapPoints ['50%']
+
+// Haptics
+Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Soft);                 // slot/date/Notify/guest select
+Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);   // reservation confirmed
+```
+
+## 6. Icon Library
+
+Use `@expo/vector-icons` (Ionicons).
+
+| Purpose | Ionicons |
+|---------|----------|
+| Search | `search` |
+| Hit List | `bookmark` / `bookmark-outline` |
+| Reservations | `calendar` |
+| Notify | `notifications` / `notifications-outline` |
+| Account | `person-circle` |
+| Back | `chevron-back` |
+| Hit List (save) | `heart` / `heart-outline` |
+| Share | `share-outline` |
+| Rating star | `star` |
+| Notify bell | `notifications` |
+| Guests | `people` |
+| Date | `calendar` |
+| Daypart | `sunny` / `moon` |
+| Confirmed | `checkmark-circle` |
+| Menu | `restaurant-outline` |
+| Location | `location` |
+| Carousel page | `ellipse` (dots) |
+
+## 7. Platform Notes
+
+- **Font choice**: Resy's brand voice is a high-contrast display serif; ship Playfair Display (SIL OFL) + Inter (SIL OFL) — the serif/sans split is the brand, not optional
+- **Dark-first**: Resy's canvas is pure black `#000000`. Set the navigation theme and `<StatusBar style="light" />` globally; the light inversion (white canvas, `#101010` text) is secondary
+- **Safe area**: wrap screens in `SafeAreaView`; the tab bar and any sticky Book button respect the home indicator; over the full-bleed hero carousel keep `StatusBar` light with a top scrim
+- **Dynamic Type**: React Native respects system scale on `<Text>`; set `allowFontScaling={false}` on tab labels, seating labels, slot-time text (the slot grid is layout-sensitive — let chips wrap)
+- **No shadows on black**: drop-shadows are invisible on `#000000` — use a 0.5–1pt `divider` border on sheets/floating panels (`@gorhom/bottom-sheet` `backgroundStyle` + `handleIndicatorStyle`) as the elevation cue
+- **Image-heavy**: use `expo-image` with `contentFit="cover"` and `transition` for the hero photo carousel; cache aggressively — photography carries the editorial feel
+- **Keyboard**: `KeyboardAvoidingView` on search; guest/calendar pickers are bottom sheets above the keyboard
+- **Accessibility**: slot chips are accessible buttons ("{time}, {seating}, available, select" / "primary slot" / "sold out, Notify me"); the Notify chip toggles list membership; the rating reads "{n} out of 10"; serif restaurant names get an explicit `accessibilityRole="header"`

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

@@ -0,0 +1,330 @@
+# Resy (iOS) — SwiftUI Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file translates Resy's visual language into paste-ready SwiftUI code: `Color` extensions, `Font` extensions, `ViewModifier`s, and example views. Resy is dark-first — the canvas is pure black.
+
+## 1. Color Tokens
+
+```swift
+import SwiftUI
+
+extension Color {
+    // MARK: - Canvas & Surfaces (Dark — primary brand)
+    static let resyBlack      = Color.black                                   // #000000
+    static let resySurface1   = Color(red: 0.071, green: 0.071, blue: 0.071) // #121212
+    static let resySurface2   = Color(red: 0.110, green: 0.110, blue: 0.110) // #1C1C1C
+    static let resySurface3   = Color(red: 0.141, green: 0.141, blue: 0.141) // #242424
+    static let resyDivider    = Color(red: 0.149, green: 0.149, blue: 0.149) // #262626
+
+    // MARK: - Canvas & Surfaces (Light — secondary inversion)
+    static let resyCanvasLight   = Color.white                                 // #FFFFFF
+    static let resySurfaceGray   = Color(red: 0.957, green: 0.957, blue: 0.957) // #F4F4F4
+    static let resySurfacePressed = Color(red: 0.918, green: 0.918, blue: 0.918) // #EAEAEA
+    static let resyDividerLight   = Color(red: 0.886, green: 0.886, blue: 0.886) // #E2E2E2
+
+    // MARK: - Text
+    static let resyTextPrimary    = Color(red: 0.961, green: 0.961, blue: 0.961) // #F5F5F5
+    static let resyTextSecondary  = Color(red: 0.620, green: 0.620, blue: 0.620) // #9E9E9E
+    static let resyTextTertiary   = Color(red: 0.416, green: 0.416, blue: 0.416) // #6A6A6A
+    static let resyTextPrimaryLt  = Color(red: 0.063, green: 0.063, blue: 0.063) // #101010
+    static let resyTextSecondaryLt = Color(red: 0.420, green: 0.420, blue: 0.420) // #6B6B6B
+
+    // MARK: - Brand
+    static let resyRed         = Color(red: 0.780, green: 0.243, blue: 0.227) // #C73E3A
+    static let resyRedBright   = Color(red: 0.886, green: 0.314, blue: 0.294) // #E2504B
+    static let resyRedPressed  = Color(red: 0.659, green: 0.188, blue: 0.176) // #A8302D
+
+    // MARK: - Functional Accents
+    static let resyNotifyAmber = Color(red: 0.851, green: 0.604, blue: 0.169) // #D99A2B
+    static let resyHitGold     = Color(red: 0.788, green: 0.635, blue: 0.294) // #C9A24B
+    static let resyConfirmed   = Color(red: 0.310, green: 0.655, blue: 0.451) // #4FA773
+
+    // MARK: - Semantic
+    static let resyError       = Color(red: 0.886, green: 0.314, blue: 0.294) // #E2504B
+}
+```
+
+## 2. Typography
+
+Resy pairs a high-contrast display serif (Playfair Display, the closest free analog to Resy's brand serif) with Inter for UI. Bundle both via `Info.plist` / `UIAppFonts`. The serif/sans split is the brand.
+
+```swift
+extension Font {
+    // Editorial / Display — Playfair Display (serif)
+    static let resyDisplayTitle = Font.custom("PlayfairDisplay-ExtraBold", size: 34)
+    static let resyRestName     = Font.custom("PlayfairDisplay-Bold",      size: 27)
+    static func resyEditorial(_ size: CGFloat = 15) -> Font {
+        Font.custom("PlayfairDisplay-Italic", size: size)   // italic tagline
+    }
+
+    // UI / Body — Inter (sans)
+    static let resySection   = Font.custom("Inter-Bold",     size: 22)
+    static let resyCardTitle = Font.custom("Inter-SemiBold", size: 18)
+    static let resyBody      = Font.custom("Inter-Regular",  size: 16)
+    static let resyMeta      = Font.custom("Inter-Regular",  size: 14)
+    static let resySlotTime  = Font.custom("Inter-Bold",     size: 14)
+    static let resySeating   = Font.custom("Inter-SemiBold", size: 9)
+    static let resyEyebrow   = Font.custom("Inter-Bold",     size: 12)
+    static let resyButton    = Font.custom("Inter-Bold",     size: 16)
+    static let resyTab       = Font.custom("Inter-SemiBold", size: 10)
+    static let resyCaption   = Font.custom("Inter-Medium",   size: 12)
+}
+```
+
+## 3. Signature Components
+
+### Reservation Slot Grid (red-outline system)
+
+```swift
+enum SlotKind { case available, primary, notify }
+
+struct ResySlot: Identifiable {
+    let id = UUID()
+    let label: String      // "6:30" or "Notify"
+    let seating: String    // "DINING ROOM" / "7–8 PM"
+    let kind: SlotKind
+}
+
+struct SlotGrid: View {
+    let slots: [ResySlot]
+    @Binding var selectedID: UUID?
+    let columns = Array(repeating: GridItem(.flexible(), spacing: 9), count: 4)
+
+    var body: some View {
+        LazyVGrid(columns: columns, spacing: 9) {
+            ForEach(slots) { s in
+                let isSel = s.id == selectedID
+                let solid = s.kind == .primary || (isSel && s.kind == .available)
+                VStack(spacing: 3) {
+                    Text(s.label)
+                        .font(s.kind == .notify ? .custom("Inter-Bold", size: 12) : .resySlotTime)
+                        .foregroundStyle(solid ? .white : (s.kind == .notify ? Color.resyNotifyAmber : Color.resyTextPrimary))
+                    Text(s.seating)
+                        .font(.resySeating).textCase(.uppercase).tracking(0.3)
+                        .foregroundStyle(solid ? .white.opacity(0.82) :
+                                         (s.kind == .notify ? Color.resyNotifyAmber : Color.resyTextSecondary))
+                }
+                .frame(maxWidth: .infinity, minHeight: 56)
+                .background(RoundedRectangle(cornerRadius: 10).fill(solid ? Color.resyRed : .clear))
+                .overlay(
+                    RoundedRectangle(cornerRadius: 10)
+                        .strokeBorder(
+                            solid ? .clear : (s.kind == .notify ? Color.resyDivider : Color.resyRed),
+                            style: StrokeStyle(lineWidth: 1, dash: s.kind == .notify ? [4, 3] : [])
+                        )
+                )
+                .contentShape(Rectangle())
+                .onTapGesture {
+                    if s.kind != .notify { withAnimation(.easeOut(duration: 0.15)) { selectedID = s.id } }
+                }
+                .sensoryFeedback(.impact(flexibility: .soft), trigger: selectedID)
+            }
+        }
+    }
+}
+```
+
+### Reservation Date Strip
+
+```swift
+struct DateCell: Identifiable { let id = UUID(); let dow: String; let num: String }
+
+struct DateStrip: View {
+    let days: [DateCell]
+    @Binding var selectedID: UUID?
+
+    var body: some View {
+        ScrollView(.horizontal, showsIndicators: false) {
+            HStack(spacing: 8) {
+                ForEach(days) { d in
+                    let sel = d.id == selectedID
+                    VStack(spacing: 3) {
+                        Text(d.dow).font(.custom("Inter-SemiBold", size: 10))
+                            .textCase(.uppercase).tracking(0.5)
+                            .foregroundStyle(sel ? .white : Color.resyTextSecondary)
+                        Text(d.num).font(.custom("Inter-Bold", size: 17))
+                            .foregroundStyle(sel ? .white : Color.resyTextPrimary)
+                    }
+                    .frame(minWidth: 56, minHeight: 60)
+                    .background(RoundedRectangle(cornerRadius: 10).fill(sel ? Color.resyRed : Color.resySurface1))
+                    .overlay(RoundedRectangle(cornerRadius: 10).strokeBorder(sel ? .clear : Color.resyDivider, lineWidth: 1))
+                    .onTapGesture { withAnimation(.easeOut(duration: 0.15)) { selectedID = d.id } }
+                }
+            }
+        }
+    }
+}
+```
+
+### Editorial Restaurant Header
+
+```swift
+struct RestaurantHeader: View {
+    let name: String
+    let rating: String      // "9.4"
+    let meta: String        // "Italian · $$$ · Williamsburg"
+    let tagline: String
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 0) {
+            Text(name)
+                .font(.resyRestName)
+                .foregroundStyle(Color.resyTextPrimary)
+            HStack(spacing: 8) {
+                Text("★ \(rating)")
+                    .font(.custom("Inter-Bold", size: 13))
+                    .foregroundStyle(Color.resyHitGold)
+                Text("·").foregroundStyle(Color.resyTextTertiary)
+                Text(meta).font(.resyMeta).foregroundStyle(Color.resyTextSecondary)
+            }
+            .padding(.top, 9)
+            Text(tagline)
+                .font(.resyEditorial(15))
+                .foregroundStyle(Color.resyTextSecondary)
+                .padding(.top, 12)
+        }
+    }
+}
+```
+
+### Notify Chip
+
+```swift
+struct NotifyChip: View {
+    @Binding var onList: Bool
+    var body: some View {
+        Button {
+            withAnimation(.easeOut(duration: 0.15)) { onList.toggle() }
+        } label: {
+            HStack(spacing: 7) {
+                Image(systemName: "bell.fill").font(.system(size: 12))
+                Text(onList ? "On the Notify list" : "Notify when available")
+                    .font(.custom("Inter-Bold", size: 13))
+            }
+            .foregroundStyle(onList ? .white : Color.resyNotifyAmber)
+            .padding(.vertical, 8).padding(.horizontal, 16)
+            .background(Capsule().fill(onList ? Color.resyNotifyAmber : .clear))
+            .overlay(Capsule().strokeBorder(Color.resyNotifyAmber, lineWidth: onList ? 0 : 1))
+        }
+        .buttonStyle(.plain)
+        .sensoryFeedback(.impact(flexibility: .soft), trigger: onList)
+    }
+}
+```
+
+### Primary Button
+
+```swift
+struct ResyPrimaryButton: View {
+    let title: String
+    let action: () -> Void
+    var body: some View {
+        Button(action: action) {
+            Text(title).font(.resyButton).foregroundStyle(.white)
+                .frame(maxWidth: .infinity).padding(.vertical, 16)
+                .background(RoundedRectangle(cornerRadius: 8).fill(Color.resyRed))
+        }
+        .buttonStyle(.plain)
+        .sensoryFeedback(.success, trigger: title)
+    }
+}
+```
+
+## 4. Bottom Tab Bar
+
+```swift
+struct ResyTabView: View {
+    var body: some View {
+        TabView {
+            SearchView().tabItem { Label("Search", systemImage: "magnifyingglass") }
+            HitListView().tabItem { Label("Hit List", systemImage: "list.star") }
+            ReservationsView().tabItem { Label("Reservations", systemImage: "calendar") }
+            NotifyView().tabItem { Label("Notify", systemImage: "bell") }
+            AccountView().tabItem { Label("Account", systemImage: "person.crop.circle") }
+        }
+        .tint(.resyRedBright)        // bright red for contrast on pure black
+        .preferredColorScheme(.dark) // Resy is dark-first
+    }
+}
+```
+
+## 5. Motion
+
+```swift
+// Slot select — outlined → solid red + soft haptic; Book button updates
+withAnimation(.easeOut(duration: 0.15)) { selectedID = slot.id }
+.sensoryFeedback(.impact(flexibility: .soft), trigger: selectedID)
+
+// Date strip — fill red 150ms; slot grid cross-fades to that day
+withAnimation(.easeOut(duration: 0.15)) { selectedDay = day.id }
+
+// Slot grid load — staggered fade-in + 4pt slide-up
+.transition(.opacity.combined(with: .move(edge: .bottom)))
+// .animation(.easeOut(duration: 0.2).delay(Double(i) * 0.03), value: loaded)
+
+// Notify toggle — dashed → amber fill 150ms + haptic
+withAnimation(.easeOut(duration: 0.15)) { onList.toggle() }
+
+// Restaurant detail open — iOS push; serif name fades up (matchedGeometryEffect for photo)
+@Namespace private var heroNS
+
+// Guest / calendar sheet
+.sheet(isPresented: $showGuests) { GuestSheet().presentationDetents([.medium]) }
+
+// Reservation confirm
+.sensoryFeedback(.success, trigger: reservationConfirmed)
+```
+
+## 6. SF Symbols Used
+
+| Component | Symbol | Size |
+|-----------|--------|------|
+| Search (tab) | `magnifyingglass` | 21pt |
+| Hit List (tab) | `list.star` / `bookmark.fill` | 21pt |
+| Reservations (tab) | `calendar` | 21pt |
+| Notify (tab) | `bell` / `bell.fill` | 21pt |
+| Account (tab) | `person.crop.circle` | 21pt |
+| Back | `chevron.left` | 16pt |
+| Hit List (save) | `heart` / `heart.fill` | 18pt |
+| Share | `square.and.arrow.up` | 18pt |
+| Rating star | `star.fill` | 13pt |
+| Notify bell | `bell.fill` | 12pt |
+| Guests | `person.2.fill` | 14pt |
+| Date | `calendar` | 14pt |
+| Daypart | `sun.max` / `moon.stars` | 14pt |
+| Confirmed | `checkmark.circle.fill` | 22pt |
+| Menu | `menucard` | 14pt |
+| Location | `mappin.and.ellipse` | 14pt |
+| Carousel page | `circle.fill` (dots) | 6pt |
+
+## 7. Dark Mode
+
+```swift
+// Resy is dark-first — apply .preferredColorScheme(.dark) at the root.
+// Light is a secondary inversion (white canvas, #101010 text, #F4F4F4 surfaces).
+
+struct ResyTheme: ViewModifier {
+    @Environment(\.colorScheme) var scheme   // .dark is the brand default
+
+    func body(content: Content) -> some View {
+        content
+            .background(scheme == .dark ? Color.resyBlack : Color.resyCanvasLight)
+            .foregroundStyle(scheme == .dark ? Color.resyTextPrimary : Color.resyTextPrimaryLt)
+    }
+}
+
+extension View { func resyTheme() -> some View { modifier(ResyTheme()) } }
+
+// On pure black, drop-shadows are invisible — use a 0.5–1pt Color.resyDivider
+// border on sheets/floating panels as the elevation cue. Use Color.resyRedBright
+// for the active tab so it reads against #000000.
+```
+
+## 8. Minimum iOS & Accessibility Notes
+
+- Minimum target: iOS 16 (`.sensoryFeedback` requires iOS 17; fall back to `UIImpactFeedbackGenerator` / `UINotificationFeedbackGenerator`)
+- Bundle Inter and Playfair Display TTFs via `Info.plist` `UIAppFonts` — both are SIL OFL licensed for free distribution
+- Dynamic Type: support on display titles, restaurant names (serif), body, metadata; keep tab labels, seating labels, slot-time text at FIXED sizes (the slot grid is layout-sensitive — let chips wrap)
+- VoiceOver: label slot chips "{time}, {seating}, available — double-tap to select" / "{time} primary slot" / "Sold out — Notify me for {window}"; the Notify chip toggles "Add to Notify list" / "On the Notify list"; the rating reads "Rated {n} out of 10"
+- Color contrast: `#F5F5F5` on `#000000` passes WCAG AAA; white on `#C73E3A` passes AA for the Book button; the red `#C73E3A` slot border on black and amber `#D99A2B` Notify text are functional — verify any small text size for AA. Active tab uses brighter `#E2504B` for legibility on pure black
+- Reduce Motion: disable the slot-select scale bounce and the staggered grid fade-in (snap chips); keep the fill color change (it conveys selection)
+- Dark mode: this IS the brand — pure black `#000000`, near-white `#F5F5F5` text, serif restaurant names. The light inversion is secondary; on black, hairline `#262626` borders are the elevation cue since shadows are invisible