feat(ui): add 5 high-end design systems to registry and fix auth logo styling

vibn-frontend/app/components/NextAuthComponent.tsx

@@ -105,7 +105,19 @@ function NextAuthForm() {
           >
             <span
               className="logo-mark"
-              style={{ width: "32px", height: "32px" }}
+              style={{
+                width: "32px",
+                height: "32px",
+                borderRadius: "50%",
+                background:
+                  "linear-gradient(135deg, var(--accent) 0%, oklch(0.65 0.20 18) 100%)",
+                boxShadow:
+                  "0 0 22px var(--accent-glow), inset 0 1px 0 oklch(1 0 0 / 0.25)",
+                display: "grid",
+                placeItems: "center",
+                color: "var(--accent-fg)",
+                flexShrink: 0,
+              }}
             >
               <svg
                 viewBox="0 0 36 32"

vibn-frontend/lib/design-kits/registry.ts

@@ -178,6 +178,81 @@ export const STARTER_KITS: StarterKitDefinition[] = [
     foundationNotesForAi:
       "Premium editorial mood — tokens only. Dark chrome often pairs with subtle borders; respect existing stack.",
   },
+  {
+    id: "anthropic-claude",
+    name: "Anthropic / Claude",
+    tagline: "Warm terracotta accent · clean editorial layout · serif headers",
+    defaults: {
+      accentHex: "#d97757",
+      radiusMdPx: 8,
+      fontPreset: "system",
+      density: "comfortable",
+    },
+    customizeFields: ["accent", "radius", "font"],
+    uiFoundation: "agnostic",
+    foundationNotesForAi:
+      "Claude Design System — Editorial, warm terracotta accent (#d97757), off-white backgrounds (#f9f8f6). Use serif fonts (like Recoleta or a strong serif fallback) for primary headers and clean sans-serif for body. Buttons are rounded, surfaces are separated by subtle hairlines instead of heavy shadows. Read github.com/VoltAgent/awesome-claude-design/blob/main/design-systems/claude/DESIGN.md for specific token semantics.",
+  },
+  {
+    id: "stripe-fintech",
+    name: "Stripe / Fintech",
+    tagline: "Signature purple gradients · weight-300 elegance · crisp utility",
+    defaults: {
+      accentHex: "#635bff",
+      radiusMdPx: 6,
+      fontPreset: "inter",
+      density: "comfortable",
+    },
+    customizeFields: ["accent", "radius", "font", "density"],
+    uiFoundation: "agnostic",
+    foundationNotesForAi:
+      "Stripe Design System — Crisp precision. Signature blurple accent (#635bff). Use incredibly soft, large shadows (0 50px 100px -20px rgba(50,50,93,0.25)) and crisp borders. Typography is tightly tracked, favoring font-weight 400 and 500. Gradients should be used sparingly but impactfully on active states. See github.com/VoltAgent/awesome-claude-design/blob/main/design-systems/stripe/DESIGN.md.",
+  },
+  {
+    id: "vercel-dev",
+    name: "Vercel / Developer",
+    tagline: "Black and white precision · Geist font · maximum contrast",
+    defaults: {
+      accentHex: "#000000",
+      radiusMdPx: 6,
+      fontPreset: "system",
+      density: "compact",
+    },
+    customizeFields: ["accent", "radius", "font", "density"],
+    uiFoundation: "agnostic",
+    foundationNotesForAi:
+      "Vercel Design System — Monochrome, high-contrast, developer-oriented. Use Geist or Geist Mono. The primary accent is solid black (#000) on white, or white on black in dark mode. Extremely sparse use of color, only for status (success, error, warning). Layouts are boxy, defined by 1px solid #eaeaea borders. See github.com/VoltAgent/awesome-claude-design/blob/main/design-systems/vercel/DESIGN.md.",
+  },
+  {
+    id: "linear-app",
+    name: "Linear / Productivity",
+    tagline: "Ultra-minimal · precise dark UI · purple glow",
+    defaults: {
+      accentHex: "#5e6ad2",
+      radiusMdPx: 8,
+      fontPreset: "system",
+      density: "compact",
+    },
+    customizeFields: ["accent", "radius", "font", "density"],
+    uiFoundation: "agnostic",
+    foundationNotesForAi:
+      "Linear Design System — Dark mode first. Very subtle, single-pixel inner borders (box-shadow inset) on surfaces to give them depth. Primary accent is a muted indigo/purple. Backgrounds are deep gray (#111214) rather than pure black. Typography is highly structured, slightly smaller (13px/14px base) for density. See github.com/VoltAgent/awesome-claude-design/blob/main/design-systems/linear.app/DESIGN.md.",
+  },
+  {
+    id: "airbnb-marketplace",
+    name: "Airbnb / Marketplace",
+    tagline: "Warm coral accent · photography-driven · large rounded UI",
+    defaults: {
+      accentHex: "#ff385c",
+      radiusMdPx: 12,
+      fontPreset: "system",
+      density: "comfortable",
+    },
+    customizeFields: ["accent", "radius", "font"],
+    uiFoundation: "agnostic",
+    foundationNotesForAi:
+      "Airbnb Design System — Friendly, consumer-focused. Large touch targets, heavy border-radius (12px+), and a stark contrast between pure white backgrounds and the vibrant 'Rausch' coral accent (#ff385c). Minimal borders, using white space and soft, dispersed shadows for elevation. See github.com/VoltAgent/awesome-claude-design/blob/main/design-systems/airbnb/DESIGN.md.",
+  },
 ];
 
 export function getStarterKit(id: string): StarterKitDefinition | undefined {