designmd-forge 1.2.0

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

@@ -0,0 +1,350 @@
+# Gas (iOS) — Expo / React Native Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file translates Gas's playful purple visual language into paste-ready Expo / React Native code: a design-token module, the brand & choice gradients, themed components, and Reanimated snippets for the poll card and flame currency.
+
+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 = {
+  // Brand
+  gasIndigo:  '#6C5CE7',
+  gasPurple:  '#A06CFF',
+  gasViolet:  '#7B4DFF', // on-white tint
+  indigoPressed: '#5A4AD1',
+
+  // Surfaces
+  cardWhite:   '#FFFFFF',
+  tintSurface: '#F4F2FF',
+  divider:     '#ECE9FB',
+
+  // Text on white cards
+  textPrimary:   '#1A1530',
+  textSecondary: '#6B6588',
+  textTertiary:  '#A29DB8',
+
+  // Currency
+  flame: '#FF7A45',
+
+  // Semantic
+  success: '#2BC48A',
+  error:   '#FF5470',
+} as const;
+
+export type GasColor = keyof typeof colors;
+
+// World background (full-bleed, every screen)
+export const appGradient = ['#6C5CE7', '#A06CFF'] as const;
+
+// Fixed festive choice palette (rotates by slot)
+export const choiceGradients = [
+  { g: ['#6C5CE7', '#8B6CFF'] as const, text: '#FFFFFF' }, // 1 indigo
+  { g: ['#FF6CC8', '#FF9CDB'] as const, text: '#FFFFFF' }, // 2 pink
+  { g: ['#FFC93C', '#FFB13C'] as const, text: '#4A3300' }, // 3 yellow
+  { g: ['#2BC48A', '#4FD9A6'] as const, text: '#FFFFFF' }, // 4 green
+];
+
+export const plumShadow = 'rgba(40,20,90,0.55)';
+```
+
+## 2. Typography
+
+Load **Nunito** via `expo-font` (SIL OFL — free), set HEAVY.
+
+```tsx
+// app/_layout.tsx
+import { useFonts } from 'expo-font';
+
+export default function Root() {
+  const [loaded] = useFonts({
+    'Nunito-SemiBold':  require('../assets/fonts/Nunito-SemiBold.ttf'),
+    'Nunito-Bold':      require('../assets/fonts/Nunito-Bold.ttf'),
+    'Nunito-ExtraBold': require('../assets/fonts/Nunito-ExtraBold.ttf'),
+    'Nunito-Black':     require('../assets/fonts/Nunito-Black.ttf'),
+  });
+  if (!loaded) return null;
+  return <Stack />;
+}
+```
+
+```ts
+// theme/typography.ts
+import type { TextStyle } from 'react-native';
+
+export const typography = {
+  display:   { color: '#FFFFFF', fontFamily: 'Nunito-Black',     fontSize: 32, lineHeight: 37, letterSpacing: -0.4 },
+  screen:    { color: '#FFFFFF', fontFamily: 'Nunito-Black',     fontSize: 26, lineHeight: 31, letterSpacing: -0.3 },
+  question:  { color: '#1A1530', fontFamily: 'Nunito-Black',     fontSize: 23, lineHeight: 29, letterSpacing: -0.2, textAlign: 'center' as const },
+  cardTitle: { color: '#1A1530', fontFamily: 'Nunito-ExtraBold', fontSize: 18, lineHeight: 23 },
+  choice:    { color: '#FFFFFF', fontFamily: 'Nunito-ExtraBold', fontSize: 16, lineHeight: 18, textAlign: 'center' as const },
+  body:      { color: '#6B6588', fontFamily: 'Nunito-Bold',      fontSize: 15, lineHeight: 22 },
+  bigNum:    { color: '#FFFFFF', fontFamily: 'Nunito-Black',     fontSize: 28, lineHeight: 28, letterSpacing: -0.5 },
+  meta:      { color: '#A29DB8', fontFamily: 'Nunito-Bold',      fontSize: 13, lineHeight: 17 },
+  tag:       { color: '#7B4DFF', fontFamily: 'Nunito-ExtraBold', fontSize: 12, lineHeight: 12, letterSpacing: 0.5, textTransform: 'uppercase' as const },
+  button:    { color: '#FFFFFF', fontFamily: 'Nunito-Black',     fontSize: 16, lineHeight: 16, letterSpacing: 0.2 },
+  pill:      { color: '#FFFFFF', fontFamily: 'Nunito-Black',     fontSize: 15, lineHeight: 15 },
+  tab:       { color: '#FFFFFF', fontFamily: 'Nunito-ExtraBold', fontSize: 10, lineHeight: 10, letterSpacing: 0.1 },
+} satisfies Record<string, TextStyle>;
+```
+
+## 3. Signature Components
+
+### App Background (full-bleed gradient world)
+
+```tsx
+// components/GasBackground.tsx
+import { LinearGradient } from 'expo-linear-gradient';
+import { StyleSheet } from 'react-native';
+import { appGradient } from '../theme/colors';
+
+export function GasBackground() {
+  return <LinearGradient colors={appGradient} style={StyleSheet.absoluteFill} />;
+}
+```
+
+### Poll Card
+
+```tsx
+// components/PollCard.tsx
+import { Pressable, Text, View } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
+import * as Haptics from 'expo-haptics';
+import { choiceGradients, colors, plumShadow } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+const APressable = Animated.createAnimatedComponent(Pressable);
+
+type Choice = { id: string; name: string };
+
+export function PollCard({
+  emoji, question, choices, onPick, onShuffle,
+}: {
+  emoji: string; question: string; choices: Choice[];
+  onPick: (c: Choice) => void; onShuffle: () => void;
+}) {
+  return (
+    <View style={{
+      backgroundColor: colors.cardWhite, borderRadius: 28,
+      paddingTop: 26, paddingHorizontal: 20, paddingBottom: 24,
+      shadowColor: '#281450', shadowOpacity: 0.55, shadowRadius: 25,
+      shadowOffset: { width: 0, height: 24 }, elevation: 16,
+    }}>
+      <Text style={{ fontSize: 50, textAlign: 'center' }}>{emoji}</Text>
+      <Text style={[typography.question, { marginTop: 14 }]}>{question}</Text>
+      <Text style={[typography.tag, { textAlign: 'center', marginTop: 8 }]}>Anonymous · be nice</Text>
+
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 12, marginTop: 22 }}>
+        {choices.slice(0, 4).map((c, i) => {
+          const slot = choiceGradients[i];
+          return <ChoiceButton key={c.id} name={c.name} slot={slot} onPress={() => onPick(c)} />;
+        })}
+      </View>
+
+      <Pressable onPress={onShuffle} style={{ marginTop: 20, alignSelf: 'center' }}>
+        <Text style={{ fontFamily: 'Nunito-Bold', fontSize: 14, color: colors.textTertiary }}>🔄 Shuffle names</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+function ChoiceButton({
+  name, slot, onPress,
+}: { name: string; slot: { g: readonly [string, string]; text: string }; onPress: () => void }) {
+  const scale = useSharedValue(1);
+  const style = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }));
+  return (
+    <APressable
+      onPressIn={() => { scale.value = withSpring(1.04, { damping: 6 }); }}
+      onPressOut={() => { scale.value = withSpring(1, { damping: 8 }); }}
+      onPress={() => { Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium); onPress(); }}
+      style={[{ flexGrow: 1, flexBasis: '46%' }, style]}
+    >
+      <LinearGradient
+        colors={slot.g} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }}
+        style={{ borderRadius: 20, paddingVertical: 16, paddingHorizontal: 10 }}
+      >
+        <Text style={[typography.choice, { color: slot.text }]}>{name}</Text>
+      </LinearGradient>
+    </APressable>
+  );
+}
+```
+
+### Flame Pill (currency)
+
+```tsx
+// components/FlamePill.tsx
+import { Text, View } from 'react-native';
+import { colors } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+export function FlamePill({ count, onGradient = true }: { count: number; onGradient?: boolean }) {
+  return (
+    <View style={{
+      flexDirection: 'row', alignItems: 'center', gap: 6,
+      paddingVertical: 7, paddingHorizontal: 14, borderRadius: 999,
+      backgroundColor: onGradient ? 'rgba(255,255,255,0.22)' : 'rgba(255,122,69,0.15)',
+    }}>
+      <Text style={{ fontSize: 16 }}>🔥</Text>
+      <Text style={[typography.pill, { color: onGradient ? '#FFFFFF' : colors.flame }]}>{count}</Text>
+    </View>
+  );
+}
+```
+
+### Progress Dots
+
+```tsx
+// components/PollProgress.tsx
+import { View } from 'react-native';
+
+export function PollProgress({ total, index }: { total: number; index: number }) {
+  return (
+    <View style={{ flexDirection: 'row', gap: 6, justifyContent: 'center' }}>
+      {Array.from({ length: total }).map((_, i) => (
+        <View key={i} style={{
+          width: i === index ? 30 : 22, height: 5, borderRadius: 3,
+          backgroundColor: i === index ? '#FFFFFF' : 'rgba(255,255,255,0.35)',
+        }} />
+      ))}
+    </View>
+  );
+}
+```
+
+### Primary Button
+
+```tsx
+// components/GasPrimaryButton.tsx
+import { Pressable, Text } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { appGradient } from '../theme/colors';
+import { typography } from '../theme/typography';
+
+export function GasPrimaryButton({ title, onPress }: { title: string; onPress: () => void }) {
+  return (
+    <Pressable onPress={onPress}>
+      {({ pressed }) => (
+        <LinearGradient
+          colors={appGradient} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }}
+          style={{
+            borderRadius: 999, paddingVertical: 15, paddingHorizontal: 30,
+            transform: [{ scale: pressed ? 0.97 : 1 }],
+            shadowColor: '#6C5CE7', shadowOpacity: 0.45, shadowRadius: 24,
+            shadowOffset: { width: 0, height: 10 }, elevation: 12,
+          }}
+        >
+          <Text style={typography.button}>{title}</Text>
+        </LinearGradient>
+      )}
+    </Pressable>
+  );
+}
+```
+
+## 4. Bottom Tab Bar
+
+```tsx
+// app/(tabs)/_layout.tsx
+import { Tabs } from 'expo-router';
+import { BlurView } from 'expo-blur';
+import { View } from 'react-native';
+import Ionicons from '@expo/vector-icons/Ionicons';
+import { colors } from '../../theme/colors';
+
+function CenterAdd() {
+  return (
+    <View style={{
+      width: 50, height: 50, borderRadius: 25, marginTop: -16,
+      backgroundColor: '#FFFFFF', alignItems: 'center', justifyContent: 'center',
+      shadowColor: '#281450', shadowOpacity: 0.5, shadowRadius: 20, shadowOffset: { width: 0, height: 8 }, elevation: 14,
+    }}>
+      <Ionicons name="add" size={26} color={colors.gasIndigo} />
+    </View>
+  );
+}
+
+export default function TabsLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        tabBarActiveTintColor: '#FFFFFF',
+        tabBarInactiveTintColor: 'rgba(255,255,255,0.6)',
+        tabBarStyle: { position: 'absolute', borderTopWidth: 0, backgroundColor: 'rgba(255,255,255,0.16)' },
+        tabBarBackground: () => <BlurView intensity={20} tint="light" style={{ flex: 1 }} />,
+        tabBarLabelStyle: { fontFamily: 'Nunito-ExtraBold', fontSize: 10, letterSpacing: 0.1 },
+      }}
+    >
+      <Tabs.Screen name="index"  options={{ title: 'Polls',  tabBarIcon: ({ color }) => <Ionicons name="albums" size={23} color={color} /> }} />
+      <Tabs.Screen name="inbox"  options={{ title: 'Inbox',  tabBarIcon: ({ color }) => <Ionicons name="checkmark-circle" size={23} color={color} /> }} />
+      <Tabs.Screen name="add"    options={{ title: '',       tabBarIcon: () => <CenterAdd /> }} />
+      <Tabs.Screen name="school" options={{ title: 'School', tabBarIcon: ({ color }) => <Ionicons name="business" size={23} color={color} /> }} />
+      <Tabs.Screen name="you"    options={{ title: 'You',    tabBarIcon: ({ color }) => <Ionicons name="person" size={23} color={color} /> }} />
+    </Tabs>
+  );
+}
+```
+
+## 5. Motion
+
+```tsx
+// Choice press — springy scale up
+scale.value = withSpring(1.04, { damping: 6 }); // press in
+scale.value = withSpring(1, { damping: 8 });    // release
+
+// Card transition (vote) — fly out + next springs in
+cardX.value = withTiming(-400, { duration: 280 }); // out
+nextScale.value = withSpring(1, { damping: 7, stiffness: 120 }); // next in from 0.9
+
+// Flame count-up — increment with per-tick haptic
+// useEffect loop: setCount(c => c+1) every ~40ms, Haptics.impactAsync(Soft) per tick
+
+// Milestone confetti
+import ConfettiCannon from 'react-native-confetti-cannon';
+// <ConfettiCannon count={80} origin={{x: W/2, y: 0}} colors={['#FF6CC8','#FFC93C','#2BC48A']} />
+
+// Tab switch — bouncy crossfade; active icon pop scale 1 → 1.15 → 1
+
+// Haptics
+Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);   // vote
+Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Soft);     // each flame tick
+Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success); // milestone
+Haptics.selectionAsync();                                  // skip / shuffle
+```
+
+## 6. Icon Library
+
+Use `@expo/vector-icons` (Ionicons). Emoji (🔥, 🔄, 😄) are first-class — render as `<Text>`, they ARE the brand voice.
+
+| Purpose | Ionicons |
+|---------|----------|
+| Polls (tab) | `albums` / `albums-outline` |
+| Inbox (tab) | `checkmark-circle` / `-outline` |
+| Add (center) | `add` (in raised white circle) |
+| School (tab) | `business` / `business-outline` |
+| You (tab) | `person` / `person-outline` |
+| Flame (currency) | 🔥 emoji (or `flame` tinted) |
+| Shuffle | 🔄 emoji (or `shuffle`) |
+| Skip | `chevron-forward` |
+| Lock (hint) | `lock-closed` |
+| Share / Invite | `share-outline` |
+| Settings | `settings` |
+| Back | `chevron-back` |
+| Close | `close` |
+| Sparkle | `sparkles` |
+
+## 7. Platform Notes
+
+- **Font choice**: Nunito is SIL OFL — free to bundle. Ship SemiBold → Black; Gas runs HEAVY (never below Bold)
+- **Light-by-design**: set `userInterfaceStyle: "light"` in `app.json`; force `<StatusBar style="light" />` (the gradient is dark enough for white status content). Gas has NO dark theme — the bright purple gradient IS the brand; never invert
+- **Safe area**: wrap screens in `SafeAreaView`; the frosted absolute tab bar needs bottom safe-area padding; the raised center circle must clear the home indicator
+- **Phone-shaped on tablet**: cap the poll card at ~440pt max-width and keep it centered even on iPad — never spread to a wide grid
+- **The 2×2 grid is sacred**: render choices with `flexBasis: '46%'` + wrap so they always form 2×2; never a single column or row
+- **Yellow slot contrast**: choice slot 3 MUST use `#4A3300` text (white fails on `#FFC93C`) — enforce via `choiceGradients[2].text`
+- **Confetti**: use `react-native-confetti-cannon` for milestones; pink/yellow/green particles
+- **Accessibility**: each choice button `accessibilityRole="button"` labeled "{name}, choice {n} of 4"; the poll is one group "Poll: {question}"; set `allowFontScaling={false}` on choice labels, tab labels, tags, progress dots
+- **Teen safety**: keep all copy positive; never render real identities in poll context; haptics on by default (part of the joy) but respect Reduce Motion / low-power

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

@@ -0,0 +1,329 @@
+# Gas (iOS) — SwiftUI Implementation Guide
+
+Companion to [DESIGN.md](DESIGN.md) — the framework-neutral spec. This file translates Gas's playful purple visual language into paste-ready SwiftUI code: `Color` extensions, the brand & choice gradients, `Font` extensions, and example views for the poll card, flame pill, and progress dots.
+
+## 1. Color Tokens
+
+```swift
+import SwiftUI
+
+extension Color {
+    // MARK: - Brand
+    static let gasIndigo  = Color(red: 0.424, green: 0.361, blue: 0.906) // #6C5CE7
+    static let gasPurple  = Color(red: 0.627, green: 0.424, blue: 1.0)   // #A06CFF
+    static let gasViolet  = Color(red: 0.482, green: 0.302, blue: 1.0)   // #7B4DFF (on-white tint)
+    static let gasIndigoPressed = Color(red: 0.353, green: 0.290, blue: 0.820) // #5A4AD1
+
+    // MARK: - Surfaces
+    static let gasCardWhite   = Color.white                                   // #FFFFFF
+    static let gasTintSurface = Color(red: 0.957, green: 0.949, blue: 1.0)   // #F4F2FF
+    static let gasDivider     = Color(red: 0.925, green: 0.914, blue: 0.984) // #ECE9FB
+
+    // MARK: - Text (on white cards)
+    static let gasTextPrimary   = Color(red: 0.102, green: 0.082, blue: 0.188) // #1A1530
+    static let gasTextSecondary = Color(red: 0.420, green: 0.396, blue: 0.533) // #6B6588
+    static let gasTextTertiary  = Color(red: 0.635, green: 0.616, blue: 0.722) // #A29DB8
+
+    // MARK: - Currency
+    static let gasFlame     = Color(red: 1.0, green: 0.478, blue: 0.271) // #FF7A45
+
+    // MARK: - Choice palette (fixed slots)
+    static let gasChoice1A = Color(red: 0.424, green: 0.361, blue: 0.906) // #6C5CE7
+    static let gasChoice1B = Color(red: 0.545, green: 0.424, blue: 1.0)   // #8B6CFF
+    static let gasChoice2A = Color(red: 1.0, green: 0.424, blue: 0.784)   // #FF6CC8
+    static let gasChoice2B = Color(red: 1.0, green: 0.612, blue: 0.859)   // #FF9CDB
+    static let gasChoice3A = Color(red: 1.0, green: 0.788, blue: 0.235)   // #FFC93C
+    static let gasChoice3B = Color(red: 1.0, green: 0.694, blue: 0.235)   // #FFB13C
+    static let gasChoice3Text = Color(red: 0.290, green: 0.200, blue: 0.0) // #4A3300
+    static let gasChoice4A = Color(red: 0.169, green: 0.769, blue: 0.541) // #2BC48A
+    static let gasChoice4B = Color(red: 0.310, green: 0.851, blue: 0.651) // #4FD9A6
+
+    // MARK: - Semantic
+    static let gasSuccess = Color(red: 0.169, green: 0.769, blue: 0.541) // #2BC48A
+    static let gasError   = Color(red: 1.0,   green: 0.329, blue: 0.439) // #FF5470
+}
+
+extension LinearGradient {
+    static let gasBrand = LinearGradient(colors: [.gasIndigo, .gasPurple],
+                                         startPoint: .top, endPoint: .bottom)
+    static let gasChoice1 = LinearGradient(colors: [.gasChoice1A, .gasChoice1B], startPoint: .topLeading, endPoint: .bottomTrailing)
+    static let gasChoice2 = LinearGradient(colors: [.gasChoice2A, .gasChoice2B], startPoint: .topLeading, endPoint: .bottomTrailing)
+    static let gasChoice3 = LinearGradient(colors: [.gasChoice3A, .gasChoice3B], startPoint: .topLeading, endPoint: .bottomTrailing)
+    static let gasChoice4 = LinearGradient(colors: [.gasChoice4A, .gasChoice4B], startPoint: .topLeading, endPoint: .bottomTrailing)
+}
+
+let gasPlumShadow = Color(red: 0.157, green: 0.078, blue: 0.353) // rgba(40,20,90)
+```
+
+## 2. Typography
+
+Gas's UI face is **Nunito** (SIL OFL — free to bundle), set HEAVY (800–900). Register the TTFs via `Info.plist` / `UIAppFonts`.
+
+```swift
+extension Font {
+    static func gas(_ size: CGFloat, weight: Font.Weight = .bold) -> Font {
+        let face: String = {
+            switch weight {
+            case .black, .heavy: return "Nunito-Black"
+            case .bold:          return "Nunito-ExtraBold"
+            case .semibold:      return "Nunito-Bold"
+            default:             return "Nunito-SemiBold"
+            }
+        }()
+        return Font.custom(face, size: size)
+    }
+
+    static let gasDisplay   = Font.custom("Nunito-Black",    size: 32)
+    static let gasScreen    = Font.custom("Nunito-Black",    size: 26)
+    static let gasQuestion  = Font.custom("Nunito-Black",    size: 23)
+    static let gasCardTitle = Font.custom("Nunito-ExtraBold", size: 18)
+    static let gasChoice    = Font.custom("Nunito-ExtraBold", size: 16)
+    static let gasBody      = Font.custom("Nunito-Bold",     size: 15)
+    static let gasBigNum    = Font.custom("Nunito-Black",    size: 28)
+    static let gasMeta      = Font.custom("Nunito-Bold",     size: 13)
+    static let gasTag       = Font.custom("Nunito-ExtraBold", size: 12)
+    static let gasButton    = Font.custom("Nunito-Black",    size: 16)
+    static let gasPill      = Font.custom("Nunito-Black",    size: 15)
+    static let gasTab       = Font.custom("Nunito-ExtraBold", size: 10)
+}
+```
+
+## 3. Signature Components
+
+### Poll Card
+
+```swift
+struct PollChoice: Identifiable { let id = UUID(); let name: String }
+
+struct PollCard: View {
+    let emoji: String
+    let question: String
+    let choices: [PollChoice]      // exactly 4
+    let onPick: (PollChoice) -> Void
+    @State private var pressedID: UUID?
+
+    private let slots: [LinearGradient] = [.gasChoice1, .gasChoice2, .gasChoice3, .gasChoice4]
+    private func textColor(_ i: Int) -> Color { i == 2 ? .gasChoice3Text : .white }
+    private let cols = [GridItem(.flexible(), spacing: 12), GridItem(.flexible(), spacing: 12)]
+
+    var body: some View {
+        VStack(spacing: 0) {
+            Text(emoji).font(.system(size: 50))
+            Text(question)
+                .font(.gasQuestion).foregroundStyle(Color.gasTextPrimary)
+                .multilineTextAlignment(.center)
+                .padding(.top, 14)
+            Text("ANONYMOUS · BE NICE")
+                .font(.gasTag).tracking(0.5)
+                .foregroundStyle(Color.gasViolet)
+                .padding(.top, 8)
+
+            LazyVGrid(columns: cols, spacing: 12) {
+                ForEach(Array(choices.enumerated()), id: \.element.id) { i, c in
+                    Button {
+                        onPick(c)
+                    } label: {
+                        Text(c.name)
+                            .font(.gasChoice).foregroundStyle(textColor(i))
+                            .frame(maxWidth: .infinity)
+                            .padding(.vertical, 16).padding(.horizontal, 10)
+                            .background(RoundedRectangle(cornerRadius: 20).fill(slots[i]))
+                    }
+                    .buttonStyle(.plain)
+                    .scaleEffect(pressedID == c.id ? 1.04 : 1.0)
+                    .animation(.spring(response: 0.2, dampingFraction: 0.5), value: pressedID)
+                    .simultaneousGesture(
+                        DragGesture(minimumDistance: 0)
+                            .onChanged { _ in pressedID = c.id }
+                            .onEnded { _ in pressedID = nil }
+                    )
+                }
+            }
+            .padding(.top, 22)
+
+            Button { } label: {
+                Text("🔄 Shuffle names").font(.gas(14, weight: .bold)).foregroundStyle(Color.gasTextTertiary)
+            }
+            .buttonStyle(.plain)
+            .padding(.top, 20)
+        }
+        .padding(.init(top: 26, leading: 20, bottom: 24, trailing: 20))
+        .background(
+            RoundedRectangle(cornerRadius: 28).fill(Color.gasCardWhite)
+                .shadow(color: gasPlumShadow.opacity(0.55), radius: 25, y: 24)
+        )
+    }
+}
+```
+
+### Flame Pill (currency)
+
+```swift
+struct FlamePill: View {
+    let count: Int
+    var onGradient: Bool = true
+
+    var body: some View {
+        HStack(spacing: 6) {
+            Text("🔥").font(.system(size: 16))
+            Text("\(count)").font(.gasPill)
+                .contentTransition(.numericText())
+        }
+        .foregroundStyle(onGradient ? .white : Color.gasFlame)
+        .padding(.vertical, 7).padding(.horizontal, 14)
+        .background(
+            Capsule().fill(onGradient ? Color.white.opacity(0.22) : Color.gasFlame.opacity(0.15))
+        )
+    }
+}
+```
+
+### Progress Dots
+
+```swift
+struct PollProgress: View {
+    let total: Int
+    let index: Int
+    var body: some View {
+        HStack(spacing: 6) {
+            ForEach(0..<total, id: \.self) { i in
+                Capsule()
+                    .fill(i == index ? Color.white : Color.white.opacity(0.35))
+                    .frame(width: i == index ? 30 : 22, height: 5)
+                    .animation(.spring(response: 0.3, dampingFraction: 0.7), value: index)
+            }
+        }
+    }
+}
+```
+
+### Primary Button + App Background
+
+```swift
+struct GasPrimaryButton: View {
+    let title: String
+    let action: () -> Void
+    var body: some View {
+        Button(action: action) {
+            Text(title).font(.gasButton).foregroundStyle(.white)
+                .padding(.vertical, 15).padding(.horizontal, 30)
+                .background(Capsule().fill(LinearGradient.gasBrand))
+                .shadow(color: Color.gasIndigo.opacity(0.45), radius: 24, y: 10)
+        }
+        .buttonStyle(.plain)
+    }
+}
+
+struct GasBackground: View {
+    var body: some View {
+        LinearGradient(colors: [.gasIndigo, .gasPurple], startPoint: .top, endPoint: .bottom)
+            .ignoresSafeArea()
+    }
+}
+```
+
+## 4. Bottom Tab Bar
+
+```swift
+struct GasTabView: View {
+    var body: some View {
+        TabView {
+            PollsView().tabItem { Label("Polls", systemImage: "rectangle.stack.fill") }
+            InboxView().tabItem { Label("Inbox", systemImage: "checkmark.seal.fill") }
+            AddView().tabItem { Label("", systemImage: "plus") }        // center, raised circle
+            SchoolView().tabItem { Label("School", systemImage: "building.2.fill") }
+            YouView().tabItem { Label("You", systemImage: "person.fill") }
+        }
+        .tint(.white) // active = solid white on the gradient
+        // Render the center "+" as a custom raised 50pt white circle overlay if not using stock TabView
+    }
+}
+
+// Center raised action (overlay-style)
+struct GasCenterAdd: View {
+    var body: some View {
+        ZStack {
+            Circle().fill(Color.white).frame(width: 50, height: 50)
+                .shadow(color: gasPlumShadow.opacity(0.5), radius: 20, y: 8)
+            Image(systemName: "plus").font(.system(size: 24, weight: .black))
+                .foregroundStyle(Color.gasIndigo)
+        }
+        .offset(y: -16)
+    }
+}
+```
+
+## 5. Motion
+
+```swift
+// Choice press — springy
+.scaleEffect(pressed ? 1.04 : 1.0)
+.animation(.spring(response: 0.2, dampingFraction: 0.5), value: pressed)
+
+// Card transition (vote): card flies out, next springs in
+withAnimation(.easeIn(duration: 0.28)) { cardOut = true }
+withAnimation(.spring(response: 0.35, dampingFraction: 0.7)) { nextIn = true }
+
+// Flame count-up
+Text("\(count)").contentTransition(.numericText())
+withAnimation(.easeOut(duration: 0.6)) { count = newValue } // + per-tick haptic
+
+// Progress dot
+.animation(.spring(response: 0.3, dampingFraction: 0.7), value: index)
+
+// Milestone confetti — scale the number
+withAnimation(.spring(response: 0.4, dampingFraction: 0.5)) { milestone = true } // 0 → 1.15 → 1.0
+
+// Haptics
+.sensoryFeedback(.impact(weight: .medium), trigger: votedChoice)   // vote
+.sensoryFeedback(.impact(flexibility: .soft), trigger: flameTick)  // each flame increment
+.sensoryFeedback(.success, trigger: milestoneReached)              // milestone
+.sensoryFeedback(.selection, trigger: skipped)                     // skip / shuffle
+```
+
+## 6. SF Symbols Used
+
+| Component | Symbol | Size |
+|-----------|--------|------|
+| Polls (tab) | `rectangle.stack` / `.fill` | 23pt |
+| Inbox (tab) | `checkmark.seal` / `.fill` | 23pt |
+| Add (center) | `plus` | 24pt |
+| School (tab) | `building.2` / `.fill` | 23pt |
+| You (tab) | `person` / `.fill` | 23pt |
+| Flame (currency) | 🔥 emoji (or `flame.fill` tinted `#FF7A45`) | 16pt |
+| Shuffle | `shuffle` (or 🔄 emoji) | 14pt |
+| Skip | `chevron.right` | 14pt |
+| Lock (hint) | `lock.fill` | 16pt |
+| Share / Invite | `square.and.arrow.up` | 22pt |
+| Settings | `gearshape.fill` | 22pt |
+| Back | `chevron.left` | 22pt |
+| Close | `xmark` | 20pt |
+| Confetti accent | `sparkles` | 18pt |
+
+## 7. Light Mode (Gas is light-by-design)
+
+```swift
+struct GasTheme: ViewModifier {
+    func body(content: Content) -> some View {
+        content
+            .background(GasBackground())
+            .foregroundStyle(.white)
+            .preferredColorScheme(.light) // Gas has no dark theme — the brand IS the bright gradient
+    }
+}
+extension View { func gasTheme() -> some View { modifier(GasTheme()) } }
+```
+
+> Gas intentionally has **no dark mode**. The identity is the bright indigo→purple gradient with white cards. Force `.light` and design for it; do not invert to a dark canvas.
+
+## 8. Minimum iOS & Accessibility Notes
+
+- Minimum target: iOS 16 (`.sensoryFeedback` requires iOS 17; fall back to `UIImpactFeedbackGenerator` / `UINotificationFeedbackGenerator`)
+- Bundle Nunito TTFs (SemiBold/Bold/ExtraBold/Black) via `Info.plist` — SIL OFL, free to distribute
+- Gas is light-by-design: force `.preferredColorScheme(.light)`; never ship a dark inversion — the gradient brand must hold
+- Dynamic Type: support on poll questions, card titles, body; keep choice button labels (the 2×2 grid is layout-critical), tab labels, poll tags, progress dots FIXED
+- VoiceOver: read a poll as "Poll: {question}. Four choices."; each name button "{name}, button, choice {n} of 4"; the flame pill "{count} flames"; announce flame earns ("Earned 3 flames, total 24")
+- Color contrast: `#1A1530` on `#FFFFFF` passes WCAG AA; white on the indigo/pink/green choice gradients passes; the YELLOW slot MUST use `#4A3300` text (white fails on `#FFC93C`) — this pairing is mandatory
+- Reduce Motion: replace the card fly-out/spring with a quick crossfade; replace confetti with a static check; keep flame count instant (no per-tick) — but keep the experience cheerful
+- Safety/age: this is a teen app — keep all copy positive; never expose real identities in poll context; respect parental-controls / Screen Time
+- Haptics are part of the joy — keep medium impact on vote and the soft per-flame tick unless Reduce Motion/low-power is on