refactor: restructure for better ai comprehension

src/app/api/opengraph-image/route.tsx

@@ -12,7 +12,7 @@ export async function GET(request: NextRequest) {
 
   return new ImageResponse(
     (
-      <div tw="flex h-full w-full flex-col justify-center items-center relative bg-purple-600">
+      <div tw="flex h-full w-full flex-col justify-center items-center relative bg-primary">
         {user?.pfp_url && (
           <div tw="flex w-96 h-96 rounded-full overflow-hidden mb-8 border-8 border-white">
             <img src={user.pfp_url} alt="Profile" tw="w-full h-full object-cover" />

src/app/app.tsx

@@ -4,12 +4,12 @@ import dynamic from "next/dynamic";
 import { APP_NAME } from "~/lib/constants";
 
 // note: dynamic import is required for components that use the Frame SDK
-const Demo = dynamic(() => import("~/components/Demo"), {
+const AppComponent = dynamic(() => import("~/components/App"), {
   ssr: false,
 });
 
 export default function App(
   { title }: { title?: string } = { title: APP_NAME }
 ) {
-  return <Demo title={title} />;
+  return <AppComponent title={title} />;
 }

src/app/globals.css

@@ -1,3 +1,25 @@
+/**
+ * DESIGN SYSTEM - DO NOT EDIT UNLESS NECESSARY
+ * 
+ * This file contains the centralized design system for the mini app.
+ * These component classes establish the visual consistency across all components.
+ * 
+ * ⚠️  AI SHOULD NOT NORMALLY EDIT THIS FILE ⚠️
+ * 
+ * Instead of modifying these classes, AI should:
+ * 1. Use existing component classes (e.g., .btn, .card, .input)
+ * 2. Use Tailwind utilities for one-off styling
+ * 3. Create new React components rather than new CSS classes
+ * 4. Only edit this file for specific bug fixes or accessibility improvements
+ * 
+ * When AI needs to style something:
+ * ✅ Good: <button className="btn btn-primary">Click me</button>
+ * ✅ Good: <div className="bg-primary text-white px-4 py-2 rounded">Custom</div>
+ * ❌ Bad: Adding new CSS classes here for component-specific styling
+ * 
+ * This design system is intentionally minimal to prevent bloat and maintain consistency.
+ */
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
@@ -34,3 +56,63 @@ body {
     --radius: 0.5rem;
   }
 }
+
+@layer components {
+  /* Global container styles for consistent layout */
+  .container {
+    @apply mx-auto max-w-md px-4;
+  }
+  
+  .container-wide {
+    @apply mx-auto max-w-lg px-4;
+  }
+  
+  .container-narrow {
+    @apply mx-auto max-w-sm px-4;
+  }
+
+  /* Global card styles */
+  .card {
+    @apply bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm;
+  }
+  
+  .card-primary {
+    @apply bg-primary/10 border-primary/20;
+  }
+
+  /* Global button styles */
+  .btn {
+    @apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none;
+  }
+  
+  .btn-primary {
+    @apply bg-primary text-white hover:bg-primary-dark focus:ring-primary;
+  }
+  
+  .btn-secondary {
+    @apply bg-secondary text-gray-900 hover:bg-gray-200 focus:ring-gray-500 dark:bg-secondary-dark dark:text-gray-100 dark:hover:bg-gray-600;
+  }
+  
+  .btn-outline {
+    @apply border border-gray-300 bg-transparent hover:bg-gray-50 focus:ring-gray-500 dark:border-gray-600 dark:hover:bg-gray-800;
+  }
+
+  /* Global input styles */
+  .input {
+    @apply block w-full rounded-lg border border-gray-300 bg-white px-3 py-2 text-gray-900 placeholder-gray-500 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400;
+  }
+
+  /* Global loading spinner */
+  .spinner {
+    @apply animate-spin rounded-full border-2 border-gray-300 border-t-primary;
+  }
+  
+  .spinner-primary {
+    @apply animate-spin rounded-full border-2 border-white border-t-transparent;
+  }
+
+  /* Global focus styles */
+  .focus-ring {
+    @apply focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2;
+  }
+}