designmd-forge 1.2.0

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

@@ -0,0 +1,317 @@
+# Nextdoor (iOS) — Expo / React Native Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file translates Nextdoor'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`, `expo-haptics`, `react-native-maps` (or `expo-maps`), and `react-native-reanimated` v3.
+
+## 1. Color Tokens
+
+```ts
+// theme/colors.ts
+export const colors = {
+  cream:    '#FAF9F6',   // warm canvas — never pure white
+  surface1: '#FFFFFF',
+  surface2: '#F2F0EB',
+  divider:  '#E4E2DD',
+
+  textPrimary:   '#221E1F',   // warm ink
+  textSecondary: '#6B6864',
+  textTertiary:  '#9C9893',
+
+  green:        '#00B246',
+  greenPressed: '#007A30',
+  linkForest:   '#006B3C',
+
+  alertAmber: '#E58A00',
+  error:      '#D93A2B',
+  eventBlue:  '#1B6FB3',
+  forSale:    '#6E4FA3',
+} as const;
+
+export type NDColor = keyof typeof colors;
+```
+
+## 2. Typography
+
+Load **Lato** via `expo-font`. Fall back to `System` (SF Pro) at aligned sizes/weights.
+
+```tsx
+// app/_layout.tsx
+import { useFonts } from 'expo-font';
+
+export default function Root() {
+  const [loaded] = useFonts({
+    'Lato-Regular': require('../assets/fonts/Lato-Regular.ttf'),
+    'Lato-Bold':    require('../assets/fonts/Lato-Bold.ttf'),
+  });
+  if (!loaded) return null;
+  return <Stack />;
+}
+```
+
+```ts
+// theme/typography.ts
+import type { TextStyle } from 'react-native';
+
+const reg = 'Lato-Regular';
+const bold = 'Lato-Bold';
+
+export const typography = {
+  titleLarge:  { fontFamily: bold, fontSize: 28, lineHeight: 34, color: '#221E1F' },
+  section:     { fontFamily: bold, fontSize: 22, lineHeight: 27, color: '#221E1F' },
+  postTitle:   { fontFamily: bold, fontSize: 18, lineHeight: 23, color: '#221E1F' },
+  name:        { fontFamily: bold, fontSize: 16, lineHeight: 20, color: '#221E1F' },
+  body:        { fontFamily: reg,  fontSize: 16, lineHeight: 23, color: '#221E1F' },   // 1.45
+  bodySettings:{ fontFamily: reg,  fontSize: 15, lineHeight: 21, color: '#221E1F' },
+  meta:        { fontFamily: reg,  fontSize: 13, lineHeight: 17, color: '#6B6864' },
+  chip:        { fontFamily: bold, fontSize: 14, lineHeight: 17 },
+  actionLabel: { fontFamily: bold, fontSize: 14, lineHeight: 17 },
+  button:      { fontFamily: bold, fontSize: 16, lineHeight: 20 },
+  tab:         { fontFamily: bold, fontSize: 10, lineHeight: 12 },
+  pinLabel:    { fontFamily: bold, fontSize: 12, lineHeight: 14, color: '#FFFFFF' },
+} satisfies Record<string, TextStyle>;
+```
+
+## 3. Signature Components
+
+### Neighborhood Feed Card (the core unit)
+
+```tsx
+// components/FeedCard.tsx
+import { Image, Pressable, Text, View } from 'react-native';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import MaterialIcons from '@expo/vector-icons/MaterialIcons';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+export function FeedCard({
+  name, verified, location, body, avatarUri,
+}: {
+  name: string; verified: boolean; location: string; body: string; avatarUri: string;
+}) {
+  return (
+    <View style={{
+      backgroundColor: colors.surface1, borderColor: colors.divider, borderWidth: 1,
+      borderRadius: 16, padding: 16, marginHorizontal: 16, marginBottom: 12,
+      shadowColor: colors.textPrimary, shadowOpacity: 0.06, shadowRadius: 3, shadowOffset: { width: 0, height: 1 },
+    }}>
+      <View style={{ flexDirection: 'row', gap: 12 }}>
+        <Image source={{ uri: avatarUri }} style={{ width: 44, height: 44, borderRadius: 22 }} />
+        <View style={{ flex: 1 }}>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+            <Text style={typography.name}>{name}</Text>
+            {verified && <MaterialIcons name="verified" size={15} color={colors.green} />}
+          </View>
+          <Text style={typography.meta}>{location}</Text>
+        </View>
+        <Ionicons name="ellipsis-horizontal" size={20} color={colors.textSecondary} />
+      </View>
+
+      <Text style={[typography.body, { marginTop: 10 }]}>{body}</Text>
+
+      <View style={{ height: 1, backgroundColor: colors.divider, marginVertical: 12 }} />
+
+      <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+        <CardAction icon="thumbs-up-outline" label="React" />
+        <CardAction icon="chatbubble-outline" label="Reply" />
+        <CardAction icon="share-outline" label="Share" />
+      </View>
+    </View>
+  );
+}
+
+function CardAction({ icon, label }: { icon: any; label: string }) {
+  return (
+    <Pressable hitSlop={10} style={{ flexDirection: 'row', alignItems: 'center', gap: 6, minHeight: 44 }}>
+      <Ionicons name={icon} size={20} color={colors.textSecondary} />
+      <Text style={[typography.actionLabel, { color: colors.textSecondary }]}>{label}</Text>
+    </Pressable>
+  );
+}
+```
+
+### Primary Button & Center Post FAB
+
+```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';
+import { typography } from '../theme/typography';
+
+export function NDPrimaryButton({
+  title, variant = 'filled', onPress,
+}: { title: string; variant?: 'filled' | 'outline'; onPress: () => void }) {
+  const filled = variant === 'filled';
+  return (
+    <Pressable onPress={onPress}
+      style={({ pressed }) => ({
+        backgroundColor: filled ? (pressed ? colors.greenPressed : colors.green) : 'transparent',
+        borderWidth: filled ? 0 : 1.5, borderColor: colors.green,
+        paddingVertical: filled ? 12 : 10, paddingHorizontal: filled ? 24 : 20,
+        borderRadius: 24, transform: [{ scale: pressed ? 0.98 : 1 }],
+      })}>
+      <Text style={[typography.button, { color: filled ? '#fff' : colors.green }]}>{title}</Text>
+    </Pressable>
+  );
+}
+
+export function CenterPostFAB({ onPress }: { onPress: () => void }) {
+  return (
+    <Pressable
+      onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Soft); onPress(); }}
+      style={({ pressed }) => ({
+        width: 56, height: 56, borderRadius: 28,
+        backgroundColor: pressed ? colors.greenPressed : colors.green,
+        alignItems: 'center', justifyContent: 'center', marginTop: -14,
+        transform: [{ scale: pressed ? 0.94 : 1 }],
+        shadowColor: colors.green, shadowOpacity: 0.32, shadowRadius: 18, shadowOffset: { width: 0, height: 6 },
+      })}>
+      <Ionicons name="add" size={26} color="#fff" />
+    </Pressable>
+  );
+}
+```
+
+### Group Chip Row
+
+```tsx
+// components/GroupChipRow.tsx
+import { ScrollView, Pressable, Text } from 'react-native';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+export function GroupChipRow({
+  groups, selected, onSelect,
+}: { groups: string[]; selected: string; onSelect: (g: string) => void }) {
+  return (
+    <ScrollView horizontal showsHorizontalScrollIndicator={false}
+      contentContainerStyle={{ paddingHorizontal: 16, gap: 8 }}>
+      {groups.map((g) => {
+        const active = g === selected;
+        return (
+          <Pressable key={g} onPress={() => onSelect(g)}
+            style={{ paddingVertical: 8, paddingHorizontal: 16, borderRadius: 500,
+                     backgroundColor: active ? colors.green : colors.surface2 }}>
+            <Text style={[typography.chip, { color: active ? '#fff' : colors.textPrimary }]}>{g}</Text>
+          </Pressable>
+        );
+      })}
+    </ScrollView>
+  );
+}
+```
+
+## 4. Distinctive System — Hyperlocal Map Pin
+
+```tsx
+// components/MapPin.tsx
+import { Text, View } from 'react-native';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+const CATEGORY_COLOR = {
+  recommendation: colors.green,
+  event:          colors.eventBlue,
+  forSale:        colors.forSale,
+  alert:          colors.alertAmber,
+} as const;
+
+export function MapPin({
+  category, label, selected,
+}: { category: keyof typeof CATEGORY_COLOR; label: string; selected: boolean }) {
+  return (
+    <View style={{
+      paddingVertical: 6, paddingHorizontal: 10, borderRadius: 500,
+      backgroundColor: CATEGORY_COLOR[category],
+      borderWidth: selected ? 2 : 0, borderColor: '#FFFFFF',
+      transform: [{ scale: selected ? 1.15 : 1 }],
+      shadowColor: colors.textPrimary, shadowOpacity: 0.25, shadowRadius: 6, shadowOffset: { width: 0, height: 2 },
+      ...(selected ? { outlineColor: colors.green } : {}),
+    }}>
+      <Text style={typography.pinLabel}>{label}</Text>
+    </View>
+  );
+}
+```
+
+Use as the `Marker` child in `react-native-maps`. Tapping a marker opens a draggable bottom peek sheet (e.g. `@gorhom/bottom-sheet`) with detents at ~220px and full.
+
+## 5. Tab Bar
+
+Nextdoor's tab bar is opaque white on cream with a raised green center Post button. `expo-router` `Tabs` supports a custom center button via `tabBarButton`.
+
+```tsx
+// app/(tabs)/_layout.tsx
+import { Tabs } from 'expo-router';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { colors } from '../../theme/colors';
+import { CenterPostFAB } from '../../components/CenterPostFAB';
+
+export default function TabsLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        tabBarActiveTintColor: colors.green,
+        tabBarInactiveTintColor: colors.textSecondary,
+        tabBarStyle: { backgroundColor: colors.surface1, borderTopColor: colors.divider, borderTopWidth: 0.5, height: 84 },
+        tabBarLabelStyle: { fontFamily: 'Lato-Bold', fontSize: 10 },
+      }}
+    >
+      <Tabs.Screen name="index" options={{ title: 'Home',  tabBarIcon: ({ color }) => <Ionicons name="home" size={26} color={color} /> }} />
+      <Tabs.Screen name="map"   options={{ title: 'Map',   tabBarIcon: ({ color }) => <Ionicons name="map"  size={26} color={color} /> }} />
+      <Tabs.Screen name="post"  options={{ title: '', tabBarButton: (props) => <CenterPostFAB onPress={() => props.onPress?.()} /> }} />
+      <Tabs.Screen name="alerts" options={{ title: 'Notifications', tabBarIcon: ({ color }) => <Ionicons name="notifications" size={26} color={color} /> }} />
+      <Tabs.Screen name="inbox"  options={{ title: 'Inbox', tabBarIcon: ({ color }) => <Ionicons name="mail" size={26} color={color} /> }} />
+    </Tabs>
+  );
+}
+```
+
+## 6. Motion
+
+```tsx
+// FAB press: scale 0.94, #007A30, soft haptic (see CenterPostFAB)
+
+// Reaction tap: fade to #00B246 + subtle 1.0 → 1.12 → 1.0 over 250ms, light haptic
+const scale = useSharedValue(1);
+const onReact = () => {
+  scale.value = withSequence(withTiming(1.12, { duration: 120 }), withSpring(1));
+  Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+};
+
+// Card appear: fade + 8px rise over 0.25s ease-out (FlatList itemLayoutAnimation or Reanimated entering)
+// entering={FadeInDown.duration(250)}
+
+// Map pin select: scale 1.0 → 1.15 + green outline (see MapPin)
+
+// Chip switch: 0.2s cross-fade of the feed (animate opacity 0→1 on the list container)
+```
+
+## 7. Icon Library
+
+Use `@expo/vector-icons` (Ionicons + MaterialIcons for the verified seal). Map to Nextdoor's SF Symbol equivalents:
+
+| Purpose | SF Symbol (iOS) | Expo Vector Icon |
+|---------|-----------------|------------------|
+| React | `hand.thumbsup` | Ionicons `thumbs-up-outline` / `thumbs-up` |
+| Reply | `bubble.left` | Ionicons `chatbubble-outline` |
+| Share | `square.and.arrow.up` | Ionicons `share-outline` |
+| More | `ellipsis` | Ionicons `ellipsis-horizontal` |
+| Verified neighbor | `checkmark.seal.fill` | MaterialIcons `verified` |
+| Post (center FAB) | `plus` | Ionicons `add` |
+| Home (tab) | `house` / `house.fill` | Ionicons `home` / `home-outline` |
+| Map (tab) | `map` / `map.fill` | Ionicons `map` / `map-outline` |
+| Notifications (tab) | `bell` / `bell.fill` | Ionicons `notifications` |
+| Inbox (tab) | `envelope` / `envelope.fill` | Ionicons `mail` |
+| Search | `magnifyingglass` | Ionicons `search` |
+| Map recenter | `location.fill` | Ionicons `locate` |
+
+## 8. Platform Notes
+
+- **Warm cream, light only**: Nextdoor has no dark mode — keep `colors.cream` even if the system is dark; the warm canvas is the identity. Force `<StatusBar style="dark" />` from `expo-status-bar`.
+- **Fonts**: bundle Lato via `expo-font`; if loading fails, swap `fontFamily` out so the system SF Pro renders at the same sizes/weights
+- **Maps**: use `react-native-maps` (Apple Maps on iOS) with custom `Marker` children for the category pins; the hyperlocal map is the hero screen — make it full-bleed
+- **Safe area**: wrap screens in `SafeAreaView`; the map is edge-to-edge while the feed keeps 16px insets and the cream gutter between cards
+- **Reading-first**: React Native honors user font scaling — keep it on post body and names; pin only tab labels and map-pin labels
+- **Accessibility**: add `accessibilityRole="button"` on actions; give the verified seal an `accessibilityLabel="Verified neighbor"`; announce map pins as category + label

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

@@ -0,0 +1,343 @@
+# Nextdoor (iOS) — SwiftUI Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file translates Nextdoor'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 (light only — warm cream)
+    static let ndCream     = Color(red: 0.980, green: 0.976, blue: 0.965) // #FAF9F6
+    static let ndSurface1  = Color.white                                  // #FFFFFF
+    static let ndSurface2  = Color(red: 0.949, green: 0.941, blue: 0.922) // #F2F0EB
+    static let ndDivider   = Color(red: 0.894, green: 0.886, blue: 0.867) // #E4E2DD
+
+    // MARK: - Text (warm ink)
+    static let ndText      = Color(red: 0.133, green: 0.118, blue: 0.122) // #221E1F
+    static let ndTextSec   = Color(red: 0.420, green: 0.408, blue: 0.392) // #6B6864
+    static let ndTextTer   = Color(red: 0.612, green: 0.596, blue: 0.576) // #9C9893
+
+    // MARK: - Brand
+    static let ndGreen        = Color(red: 0.0,   green: 0.698, blue: 0.275) // #00B246
+    static let ndGreenPressed = Color(red: 0.0,   green: 0.478, blue: 0.188) // #007A30
+    static let ndLinkForest   = Color(red: 0.0,   green: 0.420, blue: 0.235) // #006B3C
+
+    // MARK: - Semantic / Map categories
+    static let ndAlertAmber = Color(red: 0.898, green: 0.541, blue: 0.0)   // #E58A00
+    static let ndError      = Color(red: 0.851, green: 0.227, blue: 0.169) // #D93A2B
+    static let ndEventBlue  = Color(red: 0.106, green: 0.435, blue: 0.702) // #1B6FB3
+    static let ndForSale    = Color(red: 0.431, green: 0.310, blue: 0.639) // #6E4FA3
+}
+```
+
+## 2. Typography
+
+Nextdoor uses **Lato**. Bundle the TTFs via `Info.plist` (`UIAppFonts`) or register at runtime. Fall back to `.system` (SF Pro) at the same sizes/weights if Lato is unavailable.
+
+```swift
+extension Font {
+    static let ndTitleLarge  = Font.custom("Lato-Bold",    size: 28)
+    static let ndSection     = Font.custom("Lato-Bold",    size: 22)
+    static let ndPostTitle   = Font.custom("Lato-Bold",    size: 18)
+    static let ndName        = Font.custom("Lato-Bold",    size: 16)
+    static let ndBody        = Font.custom("Lato-Regular", size: 16)   // 1.45 line height via lineSpacing
+    static let ndBodySettings = Font.custom("Lato-Regular", size: 15)
+    static let ndMeta        = Font.custom("Lato-Regular", size: 13)
+    static let ndChip        = Font.custom("Lato-Bold",    size: 14)
+    static let ndActionLabel = Font.custom("Lato-Bold",    size: 14)
+    static let ndButton      = Font.custom("Lato-Bold",    size: 16)
+    static let ndTab         = Font.custom("Lato-Bold",    size: 10)
+    static let ndPinLabel    = Font.custom("Lato-Bold",    size: 12)
+
+    // System fallback at aligned sizes if Lato is missing
+    static func nd(_ size: CGFloat, bold: Bool = false) -> Font {
+        .system(size: size, weight: bold ? .bold : .regular)
+    }
+}
+
+// 16pt body at 1.45 → lineSpacing ≈ 16 * 0.45 ≈ 7pt
+extension View {
+    func ndBodyText() -> some View { self.font(.ndBody).lineSpacing(7) }
+}
+```
+
+## 3. Signature Components
+
+### Neighborhood Feed Card (the core unit)
+
+```swift
+struct FeedCard: View {
+    let name: String
+    let verified: Bool
+    let location: String        // "0.3 mi · Maple Heights · 2h"
+    let body: String
+    let avatar: Image
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 10) {
+            HStack(alignment: .top, spacing: 12) {
+                avatar.resizable().frame(width: 44, height: 44).clipShape(Circle())
+                VStack(alignment: .leading, spacing: 2) {
+                    HStack(spacing: 4) {
+                        Text(name).font(.ndName).foregroundStyle(Color.ndText)
+                        if verified {
+                            Image(systemName: "checkmark.seal.fill")
+                                .font(.system(size: 14)).foregroundStyle(Color.ndGreen)
+                        }
+                    }
+                    Text(location).font(.ndMeta).foregroundStyle(Color.ndTextSec)
+                }
+                Spacer()
+                Image(systemName: "ellipsis").foregroundStyle(Color.ndTextSec)
+            }
+
+            Text(body).ndBodyText().foregroundStyle(Color.ndText)
+
+            Divider().overlay(Color.ndDivider)
+
+            HStack {
+                CardAction(symbol: "hand.thumbsup", label: "React")
+                Spacer()
+                CardAction(symbol: "bubble.left", label: "Reply")
+                Spacer()
+                CardAction(symbol: "square.and.arrow.up", label: "Share")
+            }
+        }
+        .padding(16)
+        .background(Color.ndSurface1)
+        .clipShape(RoundedRectangle(cornerRadius: 16))
+        .overlay(RoundedRectangle(cornerRadius: 16).strokeBorder(Color.ndDivider, lineWidth: 1))
+        .shadow(color: Color.ndText.opacity(0.06), radius: 3, y: 1)
+        .padding(.horizontal, 16)
+        .padding(.bottom, 12)
+    }
+}
+
+struct CardAction: View {
+    let symbol: String; let label: String
+    @State private var active = false
+    @State private var scale: CGFloat = 1
+    var body: some View {
+        Button {
+            active.toggle()
+            withAnimation(.easeOut(duration: 0.12)) { scale = 1.12 }
+            DispatchQueue.main.asyncAfter(deadline: .now() + 0.12) {
+                withAnimation(.easeOut) { scale = 1 }
+            }
+        } label: {
+            HStack(spacing: 6) {
+                Image(systemName: symbol).font(.system(size: 20)).scaleEffect(scale)
+                Text(label).font(.ndActionLabel)
+            }
+            .foregroundStyle(active ? Color.ndGreen : Color.ndTextSec)
+        }
+        .frame(minHeight: 44)
+        .sensoryFeedback(.impact(weight: .light), trigger: active)
+    }
+}
+```
+
+### Primary Button & Center Post FAB
+
+```swift
+struct NDPrimaryButton: View {
+    let title: String
+    var style: Style = .filled
+    let action: () -> Void
+    enum Style { case filled, outline }
+
+    var body: some View {
+        Button(action: action) {
+            Text(title)
+                .font(.ndButton)
+                .foregroundStyle(style == .filled ? .white : Color.ndGreen)
+                .padding(.vertical, style == .filled ? 12 : 10)
+                .padding(.horizontal, style == .filled ? 24 : 20)
+                .background(RoundedRectangle(cornerRadius: 24).fill(style == .filled ? Color.ndGreen : .clear))
+                .overlay(RoundedRectangle(cornerRadius: 24)
+                    .strokeBorder(style == .outline ? Color.ndGreen : .clear, lineWidth: 1.5))
+        }
+        .buttonStyle(NDPressable())
+    }
+}
+
+struct CenterPostFAB: View {
+    let action: () -> Void
+    var body: some View {
+        Button(action: action) {
+            Image(systemName: "plus")
+                .font(.system(size: 26, weight: .bold))
+                .foregroundStyle(.white)
+                .frame(width: 56, height: 56)
+                .background(Circle().fill(Color.ndGreen))
+                .shadow(color: Color.ndGreen.opacity(0.32), radius: 18, y: 6)
+        }
+        .buttonStyle(NDPressable(pressedScale: 0.94))
+        .sensoryFeedback(.impact(weight: .soft), trigger: UUID())
+    }
+}
+
+struct NDPressable: ButtonStyle {
+    var pressedScale: CGFloat = 0.98
+    func makeBody(configuration: Configuration) -> some View {
+        configuration.label
+            .scaleEffect(configuration.isPressed ? pressedScale : 1)
+            .animation(.easeOut(duration: 0.2), value: configuration.isPressed)
+    }
+}
+```
+
+### Group Chip Row
+
+```swift
+struct GroupChipRow: View {
+    let groups: [String]
+    @Binding var selected: String
+
+    var body: some View {
+        ScrollView(.horizontal, showsIndicators: false) {
+            HStack(spacing: 8) {
+                ForEach(groups, id: \.self) { g in
+                    Text(g)
+                        .font(.ndChip)
+                        .foregroundStyle(selected == g ? .white : Color.ndText)
+                        .padding(.vertical, 8).padding(.horizontal, 16)
+                        .background(Capsule().fill(selected == g ? Color.ndGreen : Color.ndSurface2))
+                        .onTapGesture { withAnimation(.easeInOut(duration: 0.2)) { selected = g } }
+                }
+            }
+            .padding(.horizontal, 16)
+        }
+    }
+}
+```
+
+## 4. Distinctive System — Hyperlocal Map Pin
+
+```swift
+struct MapPin: View {
+    enum Category { case recommendation, event, forSale, alert
+        var color: Color {
+            switch self {
+            case .recommendation: return .ndGreen
+            case .event:          return .ndEventBlue
+            case .forSale:        return .ndForSale
+            case .alert:          return .ndAlertAmber
+            }
+        }
+    }
+    let category: Category
+    let label: String           // "$45" or a glyph
+    let selected: Bool
+
+    var body: some View {
+        Text(label)
+            .font(.ndPinLabel)
+            .foregroundStyle(.white)
+            .padding(.vertical, 6).padding(.horizontal, 10)
+            .background(Capsule().fill(category.color))
+            .overlay(
+                Capsule().strokeBorder(.white, lineWidth: selected ? 2 : 0)
+            )
+            .overlay(
+                Capsule().strokeBorder(Color.ndGreen, lineWidth: selected ? 2 : 0)
+                    .padding(-3)
+            )
+            .scaleEffect(selected ? 1.15 : 1)
+            .shadow(color: Color.ndText.opacity(0.25), radius: 6, y: 2)
+            .animation(.easeOut(duration: 0.2), value: selected)
+    }
+}
+```
+
+Drop these as `MapAnnotation` content in a SwiftUI `Map` (`MapKit`). Tapping a pin slides up a peek sheet (`.sheet` with `.presentationDetents([.height(220), .large])`).
+
+## 5. Tab Bar
+
+Nextdoor's tab bar is opaque white on cream with a raised green center Post button. A plain `TabView` can't host a center FAB cleanly — use a custom bar overlaying the content.
+
+```swift
+struct RootView: View {
+    @State private var tab = 0
+    var body: some View {
+        ZStack(alignment: .bottom) {
+            Group {
+                switch tab {
+                case 0: HomeView()
+                case 1: MapView()
+                case 3: NotificationsView()
+                default: InboxView()
+                }
+            }
+            HStack {
+                tabButton(0, "house", "Home")
+                tabButton(1, "map", "Map")
+                CenterPostFAB { /* present composer */ }.offset(y: -14)
+                tabButton(3, "bell", "Notifications")
+                tabButton(4, "envelope", "Inbox")
+            }
+            .padding(.horizontal, 12).padding(.top, 8).padding(.bottom, 0)
+            .background(Color.ndSurface1)
+            .overlay(Rectangle().fill(Color.ndDivider).frame(height: 0.5), alignment: .top)
+        }
+    }
+    func tabButton(_ i: Int, _ sys: String, _ label: String) -> some View {
+        Button { tab = i } label: {
+            VStack(spacing: 3) {
+                Image(systemName: sys).font(.system(size: 24))
+                Text(label).font(.ndTab)
+            }
+            .foregroundStyle(tab == i ? Color.ndGreen : Color.ndTextSec)
+            .frame(maxWidth: .infinity)
+        }
+    }
+}
+```
+
+## 6. Motion
+
+```swift
+// FAB press: scale 0.94, #007A30, soft haptic; sheet rises 0.3s ease-out
+.buttonStyle(NDPressable(pressedScale: 0.94))
+.sensoryFeedback(.impact(weight: .soft), trigger: tapped)
+
+// Reaction tap: fade to #00B246 + subtle 1.0 → 1.12 → 1.0 over 250ms, light haptic (see CardAction)
+
+// Card appear: fade + 8pt rise over 0.25s ease-out
+.transition(.opacity.combined(with: .move(edge: .bottom)))
+
+// Map pin select: scale 1.0 → 1.15 + green ring (see MapPin); peek sheet 0.3s ease-out
+
+// Chip switch: 0.2s cross-fade of the feed
+withAnimation(.easeInOut(duration: 0.2)) { selected = group }
+```
+
+## 7. SF Symbols Used
+
+| Component | Symbol | Size |
+|-----------|--------|------|
+| React | `hand.thumbsup` / `hand.thumbsup.fill` | 20pt |
+| Reply | `bubble.left` | 20pt |
+| Share | `square.and.arrow.up` | 20pt |
+| More | `ellipsis` | 20pt |
+| Verified neighbor | `checkmark.seal.fill` | 14pt |
+| Post (center FAB) | `plus` | 26pt |
+| Home (tab) | `house` / `house.fill` | 26pt |
+| Map (tab) | `map` / `map.fill` | 26pt |
+| Notifications (tab) | `bell` / `bell.fill` | 26pt |
+| Inbox (tab) | `envelope` / `envelope.fill` | 26pt |
+| Search | `magnifyingglass` | 22pt |
+| Map recenter | `location.fill` | 20pt |
+| Event pin | `calendar` | 12pt |
+
+## 8. Minimum iOS & Accessibility Notes
+
+- Minimum target: iOS 16 (for `.sensoryFeedback` prefer iOS 17; fall back to `UIImpactFeedbackGenerator`). `MapKit` SwiftUI `Map` annotations are comfortable on iOS 16+.
+- Bundle Lato via `UIAppFonts`; if it fails to load, the `Font.nd(_:bold:)` system fallback keeps sizes/weights aligned
+- Support Dynamic Type generously on post body, names, and headlines — Nextdoor is a reading app; pin only tab labels and map-pin labels
+- VoiceOver: announce a card as "<name>, verified neighbor, <location line>, <body>"; the verified badge needs an explicit label ("Verified neighbor"); map pins should read category + label ("For sale, $45, double-tap to view")
+- Contrast: `#6B6864` secondary on `#FAF9F6` cream passes WCAG AA at 13pt+; verify `#006B3C` link green on cream meets AA (it does at body sizes)
+- This is light-only — do not implement a dark scheme; if the system is in dark mode, keep the cream canvas (it is the brand)
+- Respect Reduce Motion: replace the reaction scale and card rise with instant changes; keep the map-pin selection as a color/ring change without scaling