peelar · peelar · Dec 20, 2025 · Dec 20, 2025 · Dec 20, 2025 · Dec 20, 2025
diff --git a/.changeset/calm-carpets-fry.md b/.changeset/calm-carpets-fry.md
@@ -0,0 +1,5 @@
+---
+"dopeshot-app": patch
+---
+
+Align buttons and typography with the Shadcn theme, including the export CTA styling and subtle header accent.
diff --git a/apps/app/components.json b/apps/app/components.json
@@ -1,18 +1,24 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
+  "style": "base-nova",
   "rsc": true,
   "tsx": true,
   "tailwind": {
     "config": "tailwind.config.ts",
     "css": "src/app/globals.css",
-    "baseColor": "slate",
-    "cssVariables": false,
+    "baseColor": "neutral",
+    "cssVariables": true,
     "prefix": ""
   },
+  "iconLibrary": "lucide",
   "aliases": {
     "components": "@/components",
-    "utils": "@/utils",
-    "ui": "@/components/ui"
-  }
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
 }
diff --git a/apps/app/next-env.d.ts b/apps/app/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
diff --git a/apps/app/package.json b/apps/app/package.json
@@ -19,6 +19,7 @@
     "release": "pnpm -w changeset:version && pnpm check"
   },
   "dependencies": {
+    "@base-ui/react": "^1.0.0",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-icons": "^1.3.2",
@@ -32,7 +33,7 @@
     "bcryptjs": "^3.0.3",
     "better-auth": "^1.4.7",
     "chroma-js": "^3.2.0",
-    "class-variance-authority": "^0.7.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "culori": "^4.0.2",
     "flags": "^4.0.2",
@@ -47,12 +48,15 @@
     "react": "19.2.1",
     "react-dom": "19.2.1",
     "resend": "^6.6.0",
+    "shadcn": "^3.6.2",
     "sharp": "0.32.6",
     "shiki": "^3.19.0",
-    "tailwind-merge": "^2.5.3"
+    "tailwind-merge": "^2.6.0",
+    "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.57.0",
+    "@tailwindcss/postcss": "^4.0.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
@@ -75,7 +79,6 @@
     "postcss-load-config": "^6.0.1",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
-    "@tailwindcss/postcss": "^4.0.0",
     "tailwindcss": "^4.0.0",
     "tsx": "^4.21.0",
     "typescript": "^5.6.3",

diff --git a/apps/app/src/app/(playground)/_components/playground-workspace.tsx b/apps/app/src/app/(playground)/_components/playground-workspace.tsx
@@ -19,6 +19,7 @@ import {
 } from "@/domain/layout-def/definitions";
 import { track } from "@/lib/analytics";
 import { cn } from "@/lib/utils/cn";
+import { Button } from "@/components/ui/button";
 
 /**
  * PlaygroundWorkspace
@@ -131,41 +132,47 @@ export function PlaygroundWorkspace({
           {/* Tiny icon-only orientation toggle - hidden for code snippets - centered against screenshot */}
           {!useFluidLayout ? (
             <div className="flex gap-1 rounded-md border border-border/40 bg-muted/20 p-0.5">
-              <button
+              <Button
                 type="button"
+                variant="ghost"
+                size="icon-sm"
                 onClick={() => handleOrientationChange("desktop")}
                 aria-pressed={orientation === "desktop"}
                 aria-label="Desktop mode (16:9)"
                 className={cn(
-                  "flex h-7 w-7 items-center justify-center rounded transition-colors",
+                  "h-7 w-7 rounded transition-colors",
                   orientation === "desktop"
                     ? "bg-foreground text-background shadow-sm"
                     : "text-muted-foreground hover:text-foreground"
                 )}
               >
                 <Monitor className="h-3.5 w-3.5" />
-              </button>
-              <button
+              </Button>
+              <Button
                 type="button"
+                variant="ghost"
+                size="icon-sm"
                 onClick={() => handleOrientationChange("mobile")}
                 aria-pressed={orientation === "mobile"}
                 aria-label="Mobile mode (9:16)"
                 className={cn(
-                  "flex h-7 w-7 items-center justify-center rounded transition-colors",
+                  "h-7 w-7 rounded transition-colors",
                   orientation === "mobile"
                     ? "bg-foreground text-background shadow-sm"
                     : "text-muted-foreground hover:text-foreground"
                 )}
               >
                 <Smartphone className="h-3.5 w-3.5" />
-              </button>
+              </Button>
             </div>
           ) : null}
 
           {/* Aspect lock positioned absolutely on the right */}
           {shouldShowAspectLock ? (
-            <button
+            <Button
               type="button"
+              variant="ghost"
+              size="sm"
               onClick={onToggleAspect}
               aria-pressed={isAspectLocked}
               className={cn(
@@ -176,7 +183,7 @@ export function PlaygroundWorkspace({
               )}
             >
               {isAspectLocked ? "Locked · 16:9" : "Lock to 16:9"}
-            </button>
+            </Button>
           ) : null}
         </div>
 
@@ -193,7 +200,7 @@ export function PlaygroundWorkspace({
           </PreviewViewport>
           {showFocusHint ? (
             <div className="pointer-events-none absolute inset-x-0 top-4 flex justify-center">
-              <span className="rounded-full bg-background/80 px-3 py-1 text-[11px] font-semibold uppercase tracking-wide text-foreground/80 shadow-sm ring-1 ring-border/70">
+              <span className="rounded-full bg-background/80 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-foreground/80 shadow-sm ring-1 ring-border/70">
                 Screenshot-focused variant active
               </span>
             </div>

diff --git a/apps/app/src/app/globals.css b/apps/app/src/app/globals.css
@@ -1,58 +1,78 @@
 @import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
 
 :root {
-  --background: hsl(0 0% 100%);
-  --foreground: hsl(0 0% 3.9%);
-  --card: hsl(0 0% 100%);
-  --card-foreground: hsl(0 0% 3.9%);
-  --popover: hsl(0 0% 100%);
-  --popover-foreground: hsl(0 0% 3.9%);
-  --primary: hsl(0 0% 9%);
-  --primary-foreground: hsl(0 0% 98%);
-  --secondary: hsl(0 0% 96.1%);
-  --secondary-foreground: hsl(0 0% 9%);
-  --muted: hsl(0 0% 96.1%);
-  --muted-foreground: hsl(0 0% 45.1%);
-  --accent: hsl(0 0% 96.1%);
-  --accent-foreground: hsl(0 0% 9%);
-  --destructive: hsl(0 84.2% 60.2%);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.646 0.222 41.116);
+  --primary-foreground: oklch(0.98 0.016 73.684);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.58 0.22 27);
   --destructive-foreground: hsl(0 0% 98%);
-  --border: hsl(0 0% 89.8%);
-  --input: hsl(0 0% 89.8%);
-  --ring: hsl(0 0% 3.9%);
-  --radius: 0.5rem;
-  --chart-1: hsl(12 76% 61%);
-  --chart-2: hsl(173 58% 39%);
-  --chart-3: hsl(197 37% 24%);
-  --chart-4: hsl(43 74% 66%);
-  --chart-5: hsl(27 87% 67%);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --radius: 0.625rem;
+  --chart-1: oklch(0.837 0.128 66.29);
+  --chart-2: oklch(0.705 0.213 47.604);
+  --chart-3: oklch(0.646 0.222 41.116);
+  --chart-4: oklch(0.553 0.195 38.402);
+  --chart-5: oklch(0.47 0.157 37.304);
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.646 0.222 41.116);
+  --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
 }
 
 .dark {
-  --background: hsl(0 0% 3.9%);
-  --foreground: hsl(0 0% 98%);
-  --card: hsl(0 0% 3.9%);
-  --card-foreground: hsl(0 0% 98%);
-  --popover: hsl(0 0% 3.9%);
-  --popover-foreground: hsl(0 0% 98%);
-  --primary: hsl(0 0% 98%);
-  --primary-foreground: hsl(0 0% 9%);
-  --secondary: hsl(0 0% 14.9%);
-  --secondary-foreground: hsl(0 0% 98%);
-  --muted: hsl(0 0% 14.9%);
-  --muted-foreground: hsl(0 0% 63.9%);
-  --accent: hsl(0 0% 14.9%);
-  --accent-foreground: hsl(0 0% 98%);
-  --destructive: hsl(0 62.8% 30.6%);
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.705 0.213 47.604);
+  --primary-foreground: oklch(0.98 0.016 73.684);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.371 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
   --destructive-foreground: hsl(0 0% 98%);
-  --border: hsl(0 0% 14.9%);
-  --input: hsl(0 0% 14.9%);
-  --ring: hsl(0 0% 83.1%);
-  --chart-1: hsl(220 70% 50%);
-  --chart-2: hsl(160 60% 45%);
-  --chart-3: hsl(30 80% 55%);
-  --chart-4: hsl(280 65% 60%);
-  --chart-5: hsl(340 75% 55%);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.837 0.128 66.29);
+  --chart-2: oklch(0.705 0.213 47.604);
+  --chart-3: oklch(0.646 0.222 41.116);
+  --chart-4: oklch(0.553 0.195 38.402);
+  --chart-5: oklch(0.47 0.157 37.304);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.705 0.213 47.604);
+  --sidebar-primary-foreground: oklch(0.98 0.016 73.684);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
 }
 
 @theme inline {
@@ -83,13 +103,28 @@
   --radius-lg: var(--radius);
   --radius-md: calc(var(--radius) - 2px);
   --radius-sm: calc(var(--radius) - 4px);
+  --font-sans: var(--font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 8px);
+  --radius-3xl: calc(var(--radius) + 12px);
+  --radius-4xl: calc(var(--radius) + 16px);
 }
 
 @layer base {
   * {
     @apply border-border;
+    @apply border-border outline-ring/50;
   }
   body {
     @apply bg-background text-foreground antialiased;
+    @apply bg-background text-foreground;
   }
-}
+}
diff --git a/apps/app/src/app/layout.tsx b/apps/app/src/app/layout.tsx
@@ -15,6 +15,9 @@ import { ThemeProvider } from "@/components/providers/theme-provider";
 import { UmamiProvider } from "@/components/providers/umami-provider";
 import { AuthProvider } from "@/lib/auth";
 
+const inter = Inter({subsets:['latin'],variable:'--font-sans'});
+
+
 // Font definitions with CSS variables
 const geistSans = GeistSans;
 
@@ -127,7 +130,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en" suppressHydrationWarning className={inter.variable}>
       <body
         className={`${fontVariables} min-h-screen bg-background font-sans tracking-tight antialiased`}
         style={

diff --git a/apps/app/src/components/auth/auth-form.tsx b/apps/app/src/components/auth/auth-form.tsx
@@ -321,13 +321,15 @@ export function AuthForm() {
               </div>
             </div>
 
-            <button
+            <Button
               type="button"
+              variant="link"
+              size="sm"
               onClick={toggleAuthMethod}
-              className="w-full text-center text-sm text-muted-foreground transition-colors hover:text-foreground"
+              className="w-full text-center text-sm text-muted-foreground hover:text-foreground"
             >
               {useMagicLink ? "Use email & password instead" : "Send me a magic link"}
-            </button>
+            </Button>
           </>
         )}
       </div>
@@ -337,24 +339,28 @@ export function AuthForm() {
           {mode === "sign-in" ? (
             <>
               Don&apos;t have an account?{" "}
-              <button
+              <Button
                 type="button"
+                variant="link"
+                size="sm"
                 onClick={() => setMode("sign-up")}
-                className="text-foreground underline underline-offset-2 transition-colors hover:text-foreground/80"
+                className="h-auto p-0 text-foreground underline underline-offset-2 hover:text-foreground/80"
               >
                 Sign up
-              </button>
+              </Button>
             </>
           ) : (
             <>
               Already have an account?{" "}
-              <button
+              <Button
                 type="button"
+                variant="link"
+                size="sm"
                 onClick={() => setMode("sign-in")}
-                className="text-foreground underline underline-offset-2 transition-colors hover:text-foreground/80"
+                className="h-auto p-0 text-foreground underline underline-offset-2 hover:text-foreground/80"
               >
                 Sign in
-              </button>
+              </Button>
             </>
           )}
         </div>