create-kofi-stack 1.0.2 → 1.2.0

package/dist/index.js

@@ -2,7 +2,7 @@
 
 // src/index.ts
 import { Command } from "commander";
-import pc3 from "picocolors";
+import pc4 from "picocolors";
 import gradient from "gradient-string";
 
 // src/prompts/index.ts
@@ -713,9 +713,9 @@ ${extras.length > 0 ? `${pc.bold("Extras:")} ${extras.join(", ")}` : ""}`,
 }
 
 // src/generators/index.ts
-import path18 from "path";
-import * as p6 from "@clack/prompts";
-import pc2 from "picocolors";
+import path20 from "path";
+import * as p7 from "@clack/prompts";
+import pc3 from "picocolors";
 import ora from "ora";
 
 // src/utils/fs.ts
@@ -735,6 +735,9 @@ async function writeJSON(filePath, data) {
 async function pathExists(filePath) {
   return fs.pathExists(filePath);
 }
+async function readFile(filePath) {
+  return fs.readFile(filePath, "utf-8");
+}
 
 // src/utils/git.ts
 import { execa } from "execa";
@@ -808,19 +811,19 @@ async function generatePackageJson(config, appDir) {
     next: "^16.0.0",
     react: "^19.0.0",
     "react-dom": "^19.0.0",
-    "@convex-dev/better-auth": "^0.10.0",
-    "better-auth": "^1.2.0",
-    convex: "^1.17.0",
+    "@convex-dev/better-auth": "^0.10.9",
+    "better-auth": "^1.4.0",
+    convex: "^1.25.0",
     "@t3-oss/env-nextjs": "^0.11.0",
-    zod: "^3.23.0",
+    zod: "^3.25.0",
     "date-fns": "^4.0.0",
     clsx: "^2.1.0",
     "tailwind-merge": "^2.5.0",
     "@hugeicons/react": "^0.3.0",
-    "@base-ui-components/react": "^1.0.0-rc.0",
+    "@base-ui/react": "^1.0.0",
     "class-variance-authority": "^0.7.0",
     resend: "^4.0.0",
-    "@react-email/components": "^0.0.25"
+    "@react-email/components": "^0.0.31"
   };
   const devDependencies = {
     typescript: "^5.0.0",
@@ -1992,8 +1995,8 @@ async function generateConvexPackageJson(convexDir) {
     main: "./convex/index.ts",
     types: "./convex/index.ts",
     dependencies: {
-      convex: "^1.17.0",
-      "@convex-dev/better-auth": "^0.10.0"
+      convex: "^1.25.0",
+      "@convex-dev/better-auth": "^0.10.9"
     },
     devDependencies: {
       typescript: "^5.0.0"
@@ -3151,7 +3154,7 @@ async function generateUIPackage(config, targetDir) {
       typecheck: "tsc --noEmit"
     },
     dependencies: {
-      "@base-ui-components/react": "^1.0.0-rc.0",
+      "@base-ui/react": "^1.0.0",
       "@hugeicons/react": "^0.3.0",
       "class-variance-authority": "^0.7.0",
       clsx: "^2.1.0",
@@ -3254,7 +3257,7 @@ async function generatePayloadPackageJson(marketingDir) {
       "db:seed": "tsx src/seed.ts"
     },
     dependencies: {
-      next: "^15.0.0",
+      next: "^16.0.0",
       react: "^19.0.0",
       "react-dom": "^19.0.0",
       payload: "^3.0.0",
@@ -3421,9 +3424,17 @@ export const Media: CollectionConfig = {
     mediaContent
   );
   const pagesContent = `import type { CollectionConfig } from 'payload'
-import { HeroBlock } from '../blocks/Hero'
-import { ContentBlock } from '../blocks/Content'
-import { CTABlock } from '../blocks/CTA'
+import {
+  HeroBlock,
+  LogoBannerBlock,
+  FeaturesBlock,
+  BenefitsBlock,
+  PricingBlock,
+  TestimonialsBlock,
+  FAQBlock,
+  ContentBlock,
+  CTABlock,
+} from '../blocks'
 
 export const Pages: CollectionConfig = {
   slug: 'pages',
@@ -3464,7 +3475,17 @@ export const Pages: CollectionConfig = {
     {
       name: 'layout',
       type: 'blocks',
-      blocks: [HeroBlock, ContentBlock, CTABlock],
+      blocks: [
+        HeroBlock,
+        LogoBannerBlock,
+        FeaturesBlock,
+        BenefitsBlock,
+        PricingBlock,
+        TestimonialsBlock,
+        FAQBlock,
+        ContentBlock,
+        CTABlock,
+      ],
     },
   ],
 }
@@ -3677,6 +3698,7 @@ async function generatePayloadBlocks(marketingDir) {
 
 export const HeroBlock: Block = {
   slug: 'hero',
+  labels: { singular: 'Hero', plural: 'Heroes' },
   fields: [
     {
       name: 'heading',
@@ -3692,74 +3714,242 @@ export const HeroBlock: Block = {
       type: 'upload',
       relationTo: 'media',
     },
+    {
+      name: 'buttons',
+      type: 'array',
+      maxRows: 2,
+      fields: [
+        { name: 'label', type: 'text', required: true },
+        { name: 'url', type: 'text', required: true },
+        {
+          name: 'variant',
+          type: 'select',
+          options: [
+            { label: 'Primary', value: 'primary' },
+            { label: 'Secondary', value: 'secondary' },
+          ],
+          defaultValue: 'primary',
+        },
+      ],
+    },
+  ],
+}
+`;
+  await writeFile(path15.join(marketingDir, "src/blocks/Hero.ts"), heroContent);
+  const logoBannerContent = `import type { Block } from 'payload'
+
+export const LogoBannerBlock: Block = {
+  slug: 'logoBanner',
+  labels: { singular: 'Logo Banner', plural: 'Logo Banners' },
+  fields: [
+    { name: 'heading', type: 'text' },
+    {
+      name: 'logos',
+      type: 'array',
+      fields: [
+        { name: 'name', type: 'text', required: true },
+        { name: 'logo', type: 'upload', relationTo: 'media' },
+      ],
+    },
+  ],
+}
+`;
+  await writeFile(path15.join(marketingDir, "src/blocks/LogoBanner.ts"), logoBannerContent);
+  const featuresContent = `import type { Block } from 'payload'
+
+export const FeaturesBlock: Block = {
+  slug: 'features',
+  labels: { singular: 'Features', plural: 'Features' },
+  fields: [
+    { name: 'heading', type: 'text' },
+    { name: 'subheading', type: 'textarea' },
+    {
+      name: 'features',
+      type: 'array',
+      fields: [
+        {
+          name: 'icon',
+          type: 'select',
+          options: [
+            { label: 'Zap', value: 'zap' },
+            { label: 'Shield', value: 'shield' },
+            { label: 'Globe', value: 'globe' },
+            { label: 'Layers', value: 'layers' },
+            { label: 'Settings', value: 'settings' },
+            { label: 'Users', value: 'users' },
+            { label: 'Lock', value: 'lock' },
+            { label: 'Star', value: 'star' },
+          ],
+        },
+        { name: 'title', type: 'text', required: true },
+        { name: 'description', type: 'textarea' },
+      ],
+    },
+  ],
+}
+`;
+  await writeFile(path15.join(marketingDir, "src/blocks/Features.ts"), featuresContent);
+  const benefitsContent = `import type { Block } from 'payload'
+
+export const BenefitsBlock: Block = {
+  slug: 'benefits',
+  labels: { singular: 'Benefits', plural: 'Benefits' },
+  fields: [
+    { name: 'label', type: 'text' },
+    { name: 'heading', type: 'text', required: true },
+    { name: 'description', type: 'textarea' },
+    { name: 'image', type: 'upload', relationTo: 'media' },
+    {
+      name: 'imagePosition',
+      type: 'select',
+      options: [
+        { label: 'Left', value: 'left' },
+        { label: 'Right', value: 'right' },
+      ],
+      defaultValue: 'right',
+    },
+    {
+      name: 'benefits',
+      type: 'array',
+      fields: [{ name: 'text', type: 'text', required: true }],
+    },
     {
       name: 'cta',
       type: 'group',
       fields: [
+        { name: 'label', type: 'text' },
+        { name: 'url', type: 'text' },
+      ],
+    },
+  ],
+}
+`;
+  await writeFile(path15.join(marketingDir, "src/blocks/Benefits.ts"), benefitsContent);
+  const pricingContent = `import type { Block } from 'payload'
+
+export const PricingBlock: Block = {
+  slug: 'pricing',
+  labels: { singular: 'Pricing', plural: 'Pricing' },
+  fields: [
+    { name: 'heading', type: 'text' },
+    { name: 'subheading', type: 'textarea' },
+    {
+      name: 'plans',
+      type: 'array',
+      fields: [
+        { name: 'name', type: 'text', required: true },
+        { name: 'price', type: 'text', required: true },
+        { name: 'period', type: 'text', defaultValue: '/month' },
+        { name: 'description', type: 'textarea' },
+        { name: 'featured', type: 'checkbox', defaultValue: false },
         {
-          name: 'label',
-          type: 'text',
+          name: 'features',
+          type: 'array',
+          fields: [
+            { name: 'feature', type: 'text', required: true },
+            { name: 'included', type: 'checkbox', defaultValue: true },
+          ],
         },
         {
-          name: 'url',
-          type: 'text',
+          name: 'cta',
+          type: 'group',
+          fields: [
+            { name: 'label', type: 'text' },
+            { name: 'url', type: 'text' },
+          ],
         },
       ],
     },
   ],
 }
 `;
-  await writeFile(path15.join(marketingDir, "src/blocks/Hero.ts"), heroContent);
+  await writeFile(path15.join(marketingDir, "src/blocks/Pricing.ts"), pricingContent);
+  const testimonialsContent = `import type { Block } from 'payload'
+
+export const TestimonialsBlock: Block = {
+  slug: 'testimonials',
+  labels: { singular: 'Testimonials', plural: 'Testimonials' },
+  fields: [
+    { name: 'heading', type: 'text' },
+    { name: 'subheading', type: 'textarea' },
+    {
+      name: 'testimonials',
+      type: 'array',
+      fields: [
+        { name: 'quote', type: 'textarea', required: true },
+        { name: 'author', type: 'text', required: true },
+        { name: 'role', type: 'text' },
+        { name: 'company', type: 'text' },
+        { name: 'image', type: 'upload', relationTo: 'media' },
+      ],
+    },
+  ],
+}
+`;
+  await writeFile(path15.join(marketingDir, "src/blocks/Testimonials.ts"), testimonialsContent);
+  const faqContent = `import type { Block } from 'payload'
+
+export const FAQBlock: Block = {
+  slug: 'faq',
+  labels: { singular: 'FAQ', plural: 'FAQs' },
+  fields: [
+    { name: 'heading', type: 'text' },
+    { name: 'subheading', type: 'textarea' },
+    {
+      name: 'items',
+      type: 'array',
+      fields: [
+        { name: 'question', type: 'text', required: true },
+        { name: 'answer', type: 'textarea', required: true },
+      ],
+    },
+  ],
+}
+`;
+  await writeFile(path15.join(marketingDir, "src/blocks/FAQ.ts"), faqContent);
   const contentContent = `import type { Block } from 'payload'
 
 export const ContentBlock: Block = {
   slug: 'content',
+  labels: { singular: 'Content', plural: 'Content' },
   fields: [
-    {
-      name: 'content',
-      type: 'richText',
-    },
+    { name: 'content', type: 'richText' },
   ],
 }
 `;
-  await writeFile(
-    path15.join(marketingDir, "src/blocks/Content.ts"),
-    contentContent
-  );
+  await writeFile(path15.join(marketingDir, "src/blocks/Content.ts"), contentContent);
   const ctaContent = `import type { Block } from 'payload'
 
 export const CTABlock: Block = {
   slug: 'cta',
+  labels: { singular: 'CTA', plural: 'CTAs' },
   fields: [
+    { name: 'heading', type: 'text' },
+    { name: 'description', type: 'textarea' },
     {
-      name: 'heading',
-      type: 'text',
-    },
-    {
-      name: 'description',
-      type: 'textarea',
+      name: 'style',
+      type: 'select',
+      options: [
+        { label: 'Light', value: 'light' },
+        { label: 'Dark', value: 'dark' },
+        { label: 'Primary', value: 'primary' },
+      ],
+      defaultValue: 'dark',
     },
     {
       name: 'buttons',
       type: 'array',
       maxRows: 2,
       fields: [
-        {
-          name: 'label',
-          type: 'text',
-          required: true,
-        },
-        {
-          name: 'url',
-          type: 'text',
-          required: true,
-        },
+        { name: 'label', type: 'text', required: true },
+        { name: 'url', type: 'text', required: true },
         {
           name: 'variant',
           type: 'select',
           options: [
             { label: 'Primary', value: 'primary' },
             { label: 'Secondary', value: 'secondary' },
+            { label: 'Outline', value: 'outline' },
           ],
           defaultValue: 'primary',
         },
@@ -3770,6 +3960,12 @@ export const CTABlock: Block = {
 `;
   await writeFile(path15.join(marketingDir, "src/blocks/CTA.ts"), ctaContent);
   const indexContent = `export { HeroBlock } from './Hero'
+export { LogoBannerBlock } from './LogoBanner'
+export { FeaturesBlock } from './Features'
+export { BenefitsBlock } from './Benefits'
+export { PricingBlock } from './Pricing'
+export { TestimonialsBlock } from './Testimonials'
+export { FAQBlock } from './FAQ'
 export { ContentBlock } from './Content'
 export { CTABlock } from './CTA'
 `;
@@ -3921,17 +4117,23 @@ async function generatePayloadTsConfig(marketingDir) {
   await writeJSON(path15.join(marketingDir, "tsconfig.json"), tsConfig);
 }
 async function generatePayloadEnv(marketingDir) {
-  const envContent = `# Database
+  const envContent = `# Database (Supabase PostgreSQL)
 DATABASE_URL=postgresql://postgres:[PASSWORD]@db.[PROJECT].supabase.co:5432/postgres
 
-# Payload
-PAYLOAD_SECRET=
+# Payload CMS
+PAYLOAD_SECRET=  # Generate with: openssl rand -base64 32
+
+# Scheduled Jobs
+CRON_SECRET=  # Generate with: openssl rand -base64 32
 
-# S3 Storage (Supabase)
-S3_BUCKET=
+# Draft Previews
+PREVIEW_SECRET=  # Generate with: openssl rand -base64 32
+
+# S3 Storage (Supabase Storage)
+S3_BUCKET=media
 S3_ACCESS_KEY_ID=
 S3_SECRET_ACCESS_KEY=
-S3_REGION=
+S3_REGION=auto
 S3_ENDPOINT=https://[PROJECT].supabase.co/storage/v1/s3
 `;
   await writeFile(path15.join(marketingDir, ".env.example"), envContent);
@@ -3965,12 +4167,12 @@ async function generateFumadocsPackageJson(docsDir) {
       typecheck: "tsc --noEmit"
     },
     dependencies: {
-      next: "^15.0.0",
+      next: "^16.0.0",
       react: "^19.0.0",
       "react-dom": "^19.0.0",
-      "fumadocs-core": "^14.0.0",
-      "fumadocs-mdx": "^10.0.0",
-      "fumadocs-ui": "^14.0.0",
+      "fumadocs-core": "^15.0.0",
+      "fumadocs-mdx": "^15.0.0",
+      "fumadocs-ui": "^15.0.0",
       "@repo/ui": "workspace:*"
     },
     devDependencies: {
@@ -4148,48 +4350,11 @@ export default function HomePage() {
 }
 `;
   await writeFile(path16.join(docsDir, "src/app/page.tsx"), homePageContent);
-  const globalCssContent = `@import 'fumadocs-ui/style.css';
-@import "tailwindcss";
+  const globalCssContent = `@import 'tailwindcss';
+@import 'fumadocs-ui/css/neutral.css';
+@import 'fumadocs-ui/css/preset.css';
 
-:root {
-  --fd-background: 0 0% 100%;
-  --fd-foreground: 0 0% 3.9%;
-  --fd-muted: 0 0% 96.1%;
-  --fd-muted-foreground: 0 0% 45.1%;
-  --fd-popover: 0 0% 100%;
-  --fd-popover-foreground: 0 0% 3.9%;
-  --fd-card: 0 0% 100%;
-  --fd-card-foreground: 0 0% 3.9%;
-  --fd-border: 0 0% 89.8%;
-  --fd-input: 0 0% 89.8%;
-  --fd-primary: 0 0% 9%;
-  --fd-primary-foreground: 0 0% 98%;
-  --fd-secondary: 0 0% 96.1%;
-  --fd-secondary-foreground: 0 0% 9%;
-  --fd-accent: 0 0% 96.1%;
-  --fd-accent-foreground: 0 0% 9%;
-  --fd-ring: 0 0% 63.9%;
-}
-
-.dark {
-  --fd-background: 0 0% 3.9%;
-  --fd-foreground: 0 0% 98%;
-  --fd-muted: 0 0% 14.9%;
-  --fd-muted-foreground: 0 0% 63.9%;
-  --fd-popover: 0 0% 3.9%;
-  --fd-popover-foreground: 0 0% 98%;
-  --fd-card: 0 0% 3.9%;
-  --fd-card-foreground: 0 0% 98%;
-  --fd-border: 0 0% 14.9%;
-  --fd-input: 0 0% 14.9%;
-  --fd-primary: 0 0% 98%;
-  --fd-primary-foreground: 0 0% 9%;
-  --fd-secondary: 0 0% 14.9%;
-  --fd-secondary-foreground: 0 0% 98%;
-  --fd-accent: 0 0% 14.9%;
-  --fd-accent-foreground: 0 0% 98%;
-  --fd-ring: 0 0% 14.9%;
-}
+@source '../node_modules/fumadocs-ui/dist/**/*.js';
 `;
   await writeFile(path16.join(docsDir, "src/app/global.css"), globalCssContent);
   const sourceConfigContent = `import { defineCollections, defineConfig } from 'fumadocs-mdx/config'
@@ -4315,7 +4480,7 @@ ${config.name} uses Better-Auth with Convex for authentication.
 
 - Email/Password (always enabled)
 - Google OAuth (always enabled)
-${config.auth.providers.map((p7) => `- ${p7.charAt(0).toUpperCase() + p7.slice(1)}`).join("\n")}
+${config.auth.providers.map((p8) => `- ${p8.charAt(0).toUpperCase() + p8.slice(1)}`).join("\n")}
 
 ## Configuration
 
@@ -5009,19 +5174,1913 @@ Follow our blog for updates on new features and best practices.
   );
 }
 
+// src/generators/design-system.ts
+import path18 from "path";
+var fontImports = {
+  inter: {
+    import: "import { Inter } from 'next/font/google'",
+    variable: "--font-inter",
+    config: `const inter = Inter({
+  variable: '--font-inter',
+  subsets: ['latin'],
+})`
+  },
+  "dm-sans": {
+    import: "import { DM_Sans } from 'next/font/google'",
+    variable: "--font-dm-sans",
+    config: `const dmSans = DM_Sans({
+  variable: '--font-dm-sans',
+  subsets: ['latin'],
+  weight: ['400', '500', '600', '700'],
+})`
+  },
+  geist: {
+    import: "import { Geist } from 'next/font/google'",
+    variable: "--font-geist",
+    config: `const geist = Geist({
+  variable: '--font-geist',
+  subsets: ['latin'],
+})`
+  },
+  "plus-jakarta": {
+    import: "import { Plus_Jakarta_Sans } from 'next/font/google'",
+    variable: "--font-plus-jakarta",
+    config: `const plusJakarta = Plus_Jakarta_Sans({
+  variable: '--font-plus-jakarta',
+  subsets: ['latin'],
+  weight: ['400', '500', '600', '700'],
+})`
+  },
+  outfit: {
+    import: "import { Outfit } from 'next/font/google'",
+    variable: "--font-outfit",
+    config: `const outfit = Outfit({
+  variable: '--font-outfit',
+  subsets: ['latin'],
+})`
+  },
+  "space-grotesk": {
+    import: "import { Space_Grotesk } from 'next/font/google'",
+    variable: "--font-space-grotesk",
+    config: `const spaceGrotesk = Space_Grotesk({
+  variable: '--font-space-grotesk',
+  subsets: ['latin'],
+  weight: ['400', '500', '600', '700'],
+})`
+  }
+};
+var radiusValues = {
+  none: "0px",
+  sm: "4px",
+  md: "8px",
+  lg: "12px",
+  xl: "16px",
+  full: "9999px"
+};
+var spacingMultipliers = {
+  compact: 0.875,
+  default: 1,
+  relaxed: 1.125
+};
+async function generateDesignSystemApp(config, targetDir) {
+  const appDir = path18.join(targetDir, "apps/design-system");
+  await ensureDir(path18.join(appDir, "src/app"));
+  await ensureDir(path18.join(appDir, "src/app/colors"));
+  await ensureDir(path18.join(appDir, "src/app/typography"));
+  await ensureDir(path18.join(appDir, "src/app/spacing"));
+  await ensureDir(path18.join(appDir, "src/app/brand"));
+  await ensureDir(path18.join(appDir, "src/app/blocks"));
+  await ensureDir(path18.join(appDir, "src/app/components"));
+  await ensureDir(path18.join(appDir, "src/lib"));
+  await ensureDir(path18.join(appDir, "public/brand"));
+  await generatePackageJson2(config, appDir);
+  await generateTsConfig2(appDir);
+  await generateNextConfig2(appDir);
+  await generatePostCssConfig2(appDir);
+  await generateGlobalsCss2(config, appDir);
+  await generateLayoutTsx(config, appDir);
+  await generateHomePage(config, appDir);
+  await generateColorsPage(config, appDir);
+  await generateTypographyPage(config, appDir);
+  await generateSpacingPage(config, appDir);
+  await generateBrandPage(config, appDir);
+  await generateBlocksPage(appDir);
+  await generateComponentsPage(appDir);
+  await generateUtils(appDir);
+}
+async function generatePackageJson2(config, appDir) {
+  const packageJson = {
+    name: "@repo/design-system",
+    version: "0.1.0",
+    private: true,
+    scripts: {
+      dev: "next dev --port 3003",
+      build: "next build",
+      start: "next start",
+      lint: "biome check .",
+      "lint:fix": "biome check --write .",
+      typecheck: "tsc --noEmit"
+    },
+    dependencies: {
+      "@repo/ui": "workspace:*",
+      "class-variance-authority": "^0.7.1",
+      clsx: "^2.1.1",
+      next: "^16.0.0",
+      "next-themes": "^0.4.6",
+      react: "^19.0.0",
+      "react-dom": "^19.0.0",
+      recharts: "^2.15.0",
+      sonner: "^2.0.0",
+      "tailwind-merge": "^3.0.0",
+      "tw-animate-css": "^1.3.0"
+    },
+    devDependencies: {
+      "@repo/config-typescript": "workspace:*",
+      "@tailwindcss/postcss": "^4.0.0",
+      "@types/node": "^20.0.0",
+      "@types/react": "^19.0.0",
+      "@types/react-dom": "^19.0.0",
+      tailwindcss: "^4.0.0",
+      typescript: "^5.0.0"
+    }
+  };
+  await writeJSON(path18.join(appDir, "package.json"), packageJson);
+}
+async function generateTsConfig2(appDir) {
+  const tsConfig = {
+    extends: "@repo/config-typescript/nextjs.json",
+    compilerOptions: {
+      jsx: "preserve",
+      paths: {
+        "@/*": ["./src/*"],
+        "@repo/ui": ["../../packages/ui/src"],
+        "@repo/ui/*": ["../../packages/ui/src/*"]
+      }
+    },
+    include: ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+    exclude: ["node_modules"]
+  };
+  await writeJSON(path18.join(appDir, "tsconfig.json"), tsConfig);
+}
+async function generateNextConfig2(appDir) {
+  const content = `import type { NextConfig } from 'next'
+
+const nextConfig: NextConfig = {
+  transpilePackages: ['@repo/ui'],
+}
+
+export default nextConfig
+`;
+  await writeFile(path18.join(appDir, "next.config.ts"), content);
+}
+async function generatePostCssConfig2(appDir) {
+  const content = `export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
+`;
+  await writeFile(path18.join(appDir, "postcss.config.mjs"), content);
+}
+async function generateGlobalsCss2(config, appDir) {
+  const { designSystem } = config;
+  const radiusValue = radiusValues[designSystem.borderRadius];
+  const spacingMult = spacingMultipliers[designSystem.spacingScale];
+  const content = `@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+/* Design System - CSS Variables */
+
+:root {
+  /* Border Radius */
+  --radius: ${radiusValue};
+  --radius-xs: calc(${radiusValue} * 0.5);
+  --radius-sm: calc(${radiusValue} * 0.75);
+  --radius-md: ${radiusValue};
+  --radius-lg: calc(${radiusValue} * 1.5);
+  --radius-pill: 9999px;
+
+  /* Spacing Scale Multiplier: ${designSystem.spacingScale} (${spacingMult}x) */
+
+  /* Color Tokens - Light Mode */
+  --background: #ffffff;
+  --card: #ffffff;
+  --popover: #ffffff;
+  --muted: #f5f7fa;
+
+  /* Foreground tokens */
+  --foreground: hsl(${designSystem.primaryColor.replace("%", "").split(" ").map((v, i) => i === 2 ? "10%" : v).join(" ")});
+  --card-foreground: hsl(${designSystem.primaryColor.replace("%", "").split(" ").map((v, i) => i === 2 ? "10%" : v).join(" ")});
+  --popover-foreground: hsl(${designSystem.primaryColor.replace("%", "").split(" ").map((v, i) => i === 2 ? "10%" : v).join(" ")});
+  --muted-foreground: hsl(${designSystem.primaryColor.replace("%", "").split(" ").map((v, i) => i === 2 ? "40%" : i === 1 ? "20%" : v).join(" ")});
+
+  /* Brand colors */
+  --primary: hsl(${designSystem.primaryColor});
+  --primary-foreground: #ffffff;
+  --secondary: hsl(${designSystem.secondaryColor});
+  --secondary-foreground: hsl(${designSystem.primaryColor.replace("%", "").split(" ").map((v, i) => i === 2 ? "10%" : v).join(" ")});
+  --accent: hsl(${designSystem.accentColor});
+  --accent-foreground: hsl(${designSystem.primaryColor.replace("%", "").split(" ").map((v, i) => i === 2 ? "10%" : v).join(" ")});
+
+  /* Semantic colors */
+  --success: #22c55e;
+  --warning: #f59e0b;
+  --destructive: #ef4444;
+  --destructive-foreground: #ffffff;
+
+  /* Border and input */
+  --border: #e2e8f0;
+  --input: #e2e8f0;
+  --ring: hsl(${designSystem.primaryColor});
+
+  /* Chart colors */
+  --chart-1: hsl(${designSystem.primaryColor});
+  --chart-2: #22c55e;
+  --chart-3: hsl(${designSystem.accentColor});
+  --chart-4: #ef4444;
+  --chart-5: #6b7280;
+
+  /* Sidebar tokens */
+  --sidebar: #ffffff;
+  --sidebar-foreground: hsl(${designSystem.primaryColor.replace("%", "").split(" ").map((v, i) => i === 2 ? "10%" : v).join(" ")});
+  --sidebar-primary: hsl(${designSystem.primaryColor});
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: hsla(${designSystem.primaryColor}, 0.1);
+  --sidebar-accent-foreground: hsl(${designSystem.primaryColor.replace("%", "").split(" ").map((v, i) => i === 2 ? "10%" : v).join(" ")});
+  --sidebar-border: #e2e8f0;
+  --sidebar-ring: hsl(${designSystem.primaryColor});
+}
+
+.dark {
+  /* Color Tokens - Dark Mode */
+  --background: #0b0d11;
+  --card: #111418;
+  --popover: #111418;
+  --muted: #161a20;
+
+  --foreground: #f5f7fa;
+  --card-foreground: #f5f7fa;
+  --popover-foreground: #f5f7fa;
+  --muted-foreground: #9ba3b0;
+
+  --primary: hsl(${designSystem.primaryColor.replace("%", "").split(" ").map((v, i) => i === 2 ? "60%" : v).join(" ")});
+  --primary-foreground: #ffffff;
+  --secondary: #1e293b;
+  --secondary-foreground: #f8fafc;
+  --accent: #1e293b;
+  --accent-foreground: #f8fafc;
+
+  --success: #4ade80;
+  --warning: #fbbf24;
+  --destructive: #fca5a5;
+  --destructive-foreground: #0f172a;
+
+  --border: rgba(255, 255, 255, 0.1);
+  --input: rgba(255, 255, 255, 0.1);
+  --ring: hsl(${designSystem.primaryColor.replace("%", "").split(" ").map((v, i) => i === 2 ? "60%" : v).join(" ")});
+
+  --chart-1: hsl(${designSystem.primaryColor.replace("%", "").split(" ").map((v, i) => i === 2 ? "60%" : v).join(" ")});
+  --chart-2: #4ade80;
+  --chart-3: hsl(${designSystem.accentColor.replace("%", "").split(" ").map((v, i) => i === 2 ? "60%" : v).join(" ")});
+  --chart-4: #fca5a5;
+  --chart-5: #9ba3b0;
+
+  --sidebar: #0b0d11;
+  --sidebar-foreground: #f5f7fa;
+  --sidebar-primary: hsl(${designSystem.primaryColor.replace("%", "").split(" ").map((v, i) => i === 2 ? "60%" : v).join(" ")});
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: hsla(${designSystem.primaryColor.replace("%", "").split(" ").map((v, i) => i === 2 ? "60%" : v).join(" ")}, 0.1);
+  --sidebar-accent-foreground: #f5f7fa;
+  --sidebar-border: rgba(255, 255, 255, 0.08);
+  --sidebar-ring: hsl(${designSystem.primaryColor.replace("%", "").split(" ").map((v, i) => i === 2 ? "60%" : v).join(" ")});
+}
+
+/* Tailwind Theme Mapping */
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+/* Typography */
+@theme {
+  --font-size-display-hero: 3.5rem;
+  --font-size-display-02: 3rem;
+  --font-size-display-01: 2.5rem;
+  --font-size-h1: 2rem;
+  --font-size-h2: 1.5rem;
+  --font-size-h3: 1.25rem;
+  --font-size-h4: 1.125rem;
+  --font-size-body-lg: 1.125rem;
+  --font-size-body: 1rem;
+  --font-size-body-sm: 0.875rem;
+
+  --line-height-display-hero: 1.1;
+  --line-height-display: 1.2;
+  --line-height-heading: 1.2;
+  --line-height-body: 1.5;
+  --line-height-body-relaxed: 1.75;
+}
+
+/* Base styles */
+html, body {
+  min-height: 100%;
+  overflow-x: hidden;
+  max-width: 100vw;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-heading), system-ui, sans-serif;
+}
+
+/* Typography Utility Classes */
+.text-display-hero {
+  font-size: var(--font-size-display-hero);
+  line-height: var(--line-height-display-hero);
+  font-weight: 600;
+}
+
+.text-display-02 {
+  font-size: var(--font-size-display-02);
+  line-height: var(--line-height-display);
+  font-weight: 600;
+}
+
+.text-display-01 {
+  font-size: var(--font-size-display-01);
+  line-height: var(--line-height-display);
+  font-weight: 600;
+}
+
+.text-h1 {
+  font-size: var(--font-size-h1);
+  line-height: var(--line-height-heading);
+  font-weight: 600;
+}
+
+.text-h2 {
+  font-size: var(--font-size-h2);
+  line-height: var(--line-height-heading);
+  font-weight: 600;
+}
+
+.text-h3 {
+  font-size: var(--font-size-h3);
+  line-height: var(--line-height-heading);
+  font-weight: 500;
+}
+
+.text-h4 {
+  font-size: var(--font-size-h4);
+  line-height: var(--line-height-heading);
+  font-weight: 500;
+}
+
+.text-body-lg {
+  font-size: var(--font-size-body-lg);
+  line-height: var(--line-height-body-relaxed);
+}
+
+.text-body {
+  font-size: var(--font-size-body);
+  line-height: var(--line-height-body);
+}
+
+.text-body-sm {
+  font-size: var(--font-size-body-sm);
+  line-height: var(--line-height-body);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+`;
+  await writeFile(path18.join(appDir, "src/app/globals.css"), content);
+}
+async function generateLayoutTsx(config, appDir) {
+  const { designSystem } = config;
+  const headingFont = fontImports[designSystem.headingFont];
+  const bodyFont = fontImports[designSystem.bodyFont];
+  const imports = [];
+  const fontConfigs = [];
+  const fontVars = [];
+  if (headingFont) {
+    imports.push(headingFont.import);
+    fontConfigs.push(headingFont.config.replace(/const \w+/, "const headingFont"));
+    fontVars.push("${headingFont.variable}");
+  }
+  if (bodyFont && bodyFont.variable !== headingFont?.variable) {
+    imports.push(bodyFont.import);
+    fontConfigs.push(bodyFont.config.replace(/const \w+/, "const bodyFont"));
+    fontVars.push("${bodyFont.variable}");
+  }
+  const uniqueImports = [...new Set(imports)];
+  const content = `import type { Metadata } from 'next'
+${uniqueImports.join("\n")}
+import { ThemeProvider } from 'next-themes'
+import './globals.css'
+
+${fontConfigs.join("\n\n")}
+
+export const metadata: Metadata = {
+  title: '${config.name} Design System',
+  description: 'Design system documentation for ${config.name}',
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body
+        className={\`\${headingFont.variable}${bodyFont && bodyFont.variable !== headingFont?.variable ? " ${bodyFont.variable}" : ""} font-sans antialiased bg-background text-foreground\`}
+        style={{ '--font-heading': 'var(${headingFont.variable})' } as React.CSSProperties}
+      >
+        <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
+          <div className="min-h-screen flex">
+            <Sidebar projectName="${config.name}" />
+            <main className="flex-1 overflow-auto">{children}</main>
+          </div>
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}
+
+const components = [
+  'Accordion', 'Alert', 'Alert Dialog', 'Aspect Ratio', 'Avatar', 'Badge',
+  'Breadcrumb', 'Button', 'Calendar', 'Card', 'Carousel', 'Chart', 'Checkbox',
+  'Collapsible', 'Command', 'Context Menu', 'Dialog', 'Drawer', 'Dropdown Menu',
+  'Form', 'Hover Card', 'Input', 'Input OTP', 'Label', 'Menubar', 'Navigation Menu',
+  'Pagination', 'Popover', 'Progress', 'Radio Group', 'Resizable', 'Scroll Area',
+  'Select', 'Separator', 'Sheet', 'Sidebar', 'Skeleton', 'Slider', 'Sonner',
+  'Switch', 'Table', 'Tabs', 'Textarea', 'Toast', 'Toggle', 'Toggle Group', 'Tooltip',
+]
+
+function Sidebar({ projectName }: { projectName: string }) {
+  const foundationItems = [
+    { href: '/', label: 'Overview', icon: 'home' },
+    { href: '/colors', label: 'Colors', icon: 'palette' },
+    { href: '/typography', label: 'Typography', icon: 'type' },
+    { href: '/spacing', label: 'Spacing', icon: 'ruler' },
+    { href: '/brand', label: 'Brand', icon: 'badge' },
+  ]
+
+  return (
+    <aside className="w-64 border-r border-border bg-card hidden md:flex md:flex-col h-screen sticky top-0">
+      <div className="p-6">
+        <a href="/" className="flex items-center gap-3">
+          <div className="h-8 w-8 rounded-lg bg-primary flex items-center justify-center text-primary-foreground font-semibold">
+            {projectName.charAt(0).toUpperCase()}
+          </div>
+          <span className="text-h4 font-semibold text-foreground">
+            {projectName} Design
+          </span>
+        </a>
+      </div>
+      <nav className="flex-1 overflow-y-auto px-3 pb-6">
+        <div className="mb-4">
+          <p className="px-3 mb-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+            Foundation
+          </p>
+          <div className="space-y-0.5">
+            {foundationItems.map((item) => (
+              <a
+                key={item.href}
+                href={item.href}
+                className="flex items-center gap-3 px-3 py-2 rounded-md text-sm text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+              >
+                <NavIcon name={item.icon} />
+                <span>{item.label}</span>
+              </a>
+            ))}
+          </div>
+        </div>
+
+        <div className="mb-4">
+          <p className="px-3 mb-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+            Blocks
+          </p>
+          <div className="space-y-0.5">
+            <a
+              href="/blocks"
+              className="flex items-center gap-3 px-3 py-2 rounded-md text-sm text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+            >
+              <NavIcon name="grid" />
+              <span>All Blocks</span>
+            </a>
+          </div>
+        </div>
+
+        <div>
+          <p className="px-3 mb-2 text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+            Components
+          </p>
+          <div className="space-y-0.5">
+            {components.map((component) => {
+              const slug = component.toLowerCase().replace(/\\s+/g, '-')
+              return (
+                <a
+                  key={slug}
+                  href={\`/components/\${slug}\`}
+                  className="block px-3 py-1.5 rounded-md text-sm text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
+                >
+                  {component}
+                </a>
+              )
+            })}
+          </div>
+        </div>
+      </nav>
+      <div className="p-4 border-t border-border">
+        <ThemeToggle />
+      </div>
+    </aside>
+  )
+}
+
+function NavIcon({ name }: { name: string }) {
+  const icons: Record<string, React.ReactNode> = {
+    home: (
+      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+      </svg>
+    ),
+    palette: (
+      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+      </svg>
+    ),
+    type: (
+      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 6h16M4 12h16m-7 6h7" />
+      </svg>
+    ),
+    ruler: (
+      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+      </svg>
+    ),
+    badge: (
+      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
+      </svg>
+    ),
+    grid: (
+      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
+      </svg>
+    ),
+  }
+  return icons[name] || null
+}
+
+function ThemeToggle() {
+  return (
+    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+      <button className="p-2 rounded-lg hover:bg-muted transition-colors" title="Light mode">
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+        </svg>
+      </button>
+      <button className="p-2 rounded-lg hover:bg-muted transition-colors" title="Dark mode">
+        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+        </svg>
+      </button>
+    </div>
+  )
+}
+`;
+  await writeFile(path18.join(appDir, "src/app/layout.tsx"), content);
+}
+async function generateHomePage(config, appDir) {
+  const content = `export default function DesignSystemHome() {
+  return (
+    <div className="p-8 max-w-4xl">
+      <header className="mb-12">
+        <h1 className="text-display-01 text-foreground mb-4">
+          ${config.name} Design System
+        </h1>
+        <p className="text-body-lg text-muted-foreground max-w-2xl">
+          A comprehensive design system for building consistent, accessible, and
+          beautiful interfaces across all ${config.name} products.
+        </p>
+      </header>
+
+      <section className="mb-12">
+        <h2 className="text-h2 text-foreground mb-6">Quick Start</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <QuickLink
+            href="/colors"
+            title="Colors"
+            description="Brand colors, semantic tokens, and usage guidelines"
+            icon="palette"
+          />
+          <QuickLink
+            href="/typography"
+            title="Typography"
+            description="Font families, type scale, and text styles"
+            icon="type"
+          />
+          <QuickLink
+            href="/spacing"
+            title="Spacing"
+            description="Spacing scale, layout guidelines, and border radius"
+            icon="ruler"
+          />
+          <QuickLink
+            href="/components"
+            title="Components"
+            description="UI components with examples and code"
+            icon="box"
+          />
+        </div>
+      </section>
+
+      <section className="mb-12">
+        <h2 className="text-h2 text-foreground mb-6">Design Principles</h2>
+        <div className="space-y-4">
+          <Principle
+            title="Consistency"
+            description="Use the defined design tokens consistently across all interfaces for a cohesive experience."
+          />
+          <Principle
+            title="Accessibility"
+            description="All color combinations meet WCAG AA contrast requirements. Design for everyone."
+          />
+          <Principle
+            title="Simplicity"
+            description="Keep interfaces clean and focused. Every element should serve a purpose."
+          />
+          <Principle
+            title="Flexibility"
+            description="Components are designed to be adaptable while maintaining visual harmony."
+          />
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-h2 text-foreground mb-6">Resources</h2>
+        <div className="flex flex-wrap gap-4">
+          <a
+            href="/brand"
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-border hover:bg-muted transition-colors text-sm"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+            Brand Assets
+          </a>
+          <a
+            href="/blocks"
+            className="inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-border hover:bg-muted transition-colors text-sm"
+          >
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6z" />
+            </svg>
+            UI Blocks
+          </a>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+function QuickLink({
+  href,
+  title,
+  description,
+  icon,
+}: {
+  href: string
+  title: string
+  description: string
+  icon: string
+}) {
+  const icons: Record<string, React.ReactNode> = {
+    palette: (
+      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+      </svg>
+    ),
+    type: (
+      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 6h16M4 12h16m-7 6h7" />
+      </svg>
+    ),
+    ruler: (
+      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+      </svg>
+    ),
+    box: (
+      <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+      </svg>
+    ),
+  }
+
+  return (
+    <a
+      href={href}
+      className="group block p-6 rounded-xl border border-border hover:border-primary/30 hover:bg-muted/50 transition-all"
+    >
+      <div className="flex items-start gap-4">
+        <div className="p-2 rounded-lg bg-primary/10 text-primary">
+          {icons[icon]}
+        </div>
+        <div>
+          <h3 className="text-h4 text-foreground group-hover:text-primary transition-colors">
+            {title}
+          </h3>
+          <p className="text-body-sm text-muted-foreground mt-1">
+            {description}
+          </p>
+        </div>
+      </div>
+    </a>
+  )
+}
+
+function Principle({
+  title,
+  description,
+}: {
+  title: string
+  description: string
+}) {
+  return (
+    <div className="p-4 rounded-lg border border-border">
+      <h3 className="text-h4 text-foreground mb-1">{title}</h3>
+      <p className="text-body-sm text-muted-foreground">{description}</p>
+    </div>
+  )
+}
+`;
+  await writeFile(path18.join(appDir, "src/app/page.tsx"), content);
+}
+async function generateColorsPage(config, appDir) {
+  const content = `export default function ColorsPage() {
+  return (
+    <div className="p-8 max-w-5xl">
+      <header className="mb-12">
+        <h1 className="text-display-01 text-foreground mb-4">Colors</h1>
+        <p className="text-body-lg text-muted-foreground max-w-2xl">
+          The color system is built on a foundation of brand colors
+          with semantic tokens for consistent application across all interfaces.
+        </p>
+      </header>
+
+      <section className="mb-12">
+        <h2 className="text-h2 text-foreground mb-6">Brand Colors</h2>
+        <p className="text-body text-muted-foreground mb-6">
+          Core brand colors used across all products.
+        </p>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <ColorCard
+            name="Primary"
+            cssVar="--primary"
+            usage="CTAs, buttons, links, interactive elements"
+          />
+          <ColorCard
+            name="Secondary"
+            cssVar="--secondary"
+            usage="Secondary buttons, subtle backgrounds"
+          />
+          <ColorCard
+            name="Accent"
+            cssVar="--accent"
+            usage="Highlights, badges, special elements"
+          />
+        </div>
+      </section>
+
+      <section className="mb-12">
+        <h2 className="text-h2 text-foreground mb-6">Semantic Colors</h2>
+        <p className="text-body text-muted-foreground mb-6">
+          Colors with specific meaning used for feedback and status indication.
+        </p>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <ColorCard
+            name="Success"
+            cssVar="--success"
+            usage="Success states, confirmations"
+          />
+          <ColorCard
+            name="Warning"
+            cssVar="--warning"
+            usage="Warnings, caution states"
+          />
+          <ColorCard
+            name="Destructive"
+            cssVar="--destructive"
+            usage="Errors, destructive actions"
+          />
+        </div>
+      </section>
+
+      <section className="mb-12">
+        <h2 className="text-h2 text-foreground mb-6">Background Colors</h2>
+        <p className="text-body text-muted-foreground mb-6">
+          Surface colors for different elevation levels and contexts.
+        </p>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <ColorCard
+            name="Background"
+            cssVar="--background"
+            usage="Page background"
+          />
+          <ColorCard
+            name="Card"
+            cssVar="--card"
+            usage="Card surfaces"
+          />
+          <ColorCard
+            name="Muted"
+            cssVar="--muted"
+            usage="Subtle backgrounds"
+          />
+        </div>
+      </section>
+
+      <section className="mb-12">
+        <h2 className="text-h2 text-foreground mb-6">Text Colors</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <ColorCard
+            name="Foreground"
+            cssVar="--foreground"
+            usage="Primary text, headings"
+          />
+          <ColorCard
+            name="Muted Foreground"
+            cssVar="--muted-foreground"
+            usage="Secondary text, descriptions"
+          />
+          <ColorCard
+            name="Primary"
+            cssVar="--primary"
+            usage="Links, emphasis"
+          />
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-h2 text-foreground mb-6">CSS Variables</h2>
+        <p className="text-body text-muted-foreground mb-4">
+          Use these CSS variables in your styles for consistent theming:
+        </p>
+        <div className="bg-muted rounded-lg p-4 overflow-x-auto">
+          <pre className="text-sm text-foreground">
+{\`/* Primary colors */
+var(--primary)
+var(--secondary)
+var(--accent)
+
+/* Backgrounds */
+var(--background)
+var(--card)
+var(--muted)
+
+/* Text */
+var(--foreground)
+var(--muted-foreground)
+
+/* Semantic */
+var(--success)
+var(--warning)
+var(--destructive)
+
+/* Borders */
+var(--border)
+var(--ring)\`}
+          </pre>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+function ColorCard({
+  name,
+  cssVar,
+  usage,
+}: {
+  name: string
+  cssVar: string
+  usage: string
+}) {
+  return (
+    <div className="rounded-xl border border-border overflow-hidden">
+      <div
+        className="h-24"
+        style={{ backgroundColor: \`var(\${cssVar})\` }}
+      />
+      <div className="p-4 bg-card">
+        <h3 className="text-h4 text-foreground mb-1">{name}</h3>
+        <p className="text-xs text-muted-foreground mb-2">
+          <code className="bg-muted px-1 rounded">{cssVar}</code>
+        </p>
+        <p className="text-xs text-muted-foreground">{usage}</p>
+      </div>
+    </div>
+  )
+}
+`;
+  await writeFile(path18.join(appDir, "src/app/colors/page.tsx"), content);
+}
+async function generateTypographyPage(config, appDir) {
+  const { designSystem } = config;
+  const headingFontName = designSystem.headingFont.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+  const bodyFontName = designSystem.bodyFont.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+  const content = `export default function TypographyPage() {
+  return (
+    <div className="p-8 max-w-5xl">
+      <header className="mb-12">
+        <h1 className="text-display-01 text-foreground mb-4">Typography</h1>
+        <p className="text-body-lg text-muted-foreground max-w-2xl">
+          The typography system uses ${headingFontName} for headings and ${bodyFontName}
+          for body text, creating a modern and professional aesthetic.
+        </p>
+      </header>
+
+      <section className="mb-12">
+        <h2 className="text-h2 text-foreground mb-6">Font Families</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <FontFamilyCard
+            name="${headingFontName}"
+            variable="--font-heading"
+            usage="Headings, display text"
+            sample="The quick brown fox jumps over the lazy dog"
+          />
+          <FontFamilyCard
+            name="${bodyFontName}"
+            variable="--font-body"
+            usage="Body text, UI elements"
+            sample="The quick brown fox jumps over the lazy dog"
+          />
+        </div>
+      </section>
+
+      <section className="mb-12">
+        <h2 className="text-h2 text-foreground mb-6">Type Scale</h2>
+        <p className="text-body text-muted-foreground mb-6">
+          A comprehensive scale from display headings down to small body text.
+        </p>
+        <div className="space-y-6">
+          <TypeScaleItem name="Display Hero" size="56px (3.5rem)" className="text-display-hero" />
+          <TypeScaleItem name="Display 02" size="48px (3rem)" className="text-display-02" />
+          <TypeScaleItem name="Display 01" size="40px (2.5rem)" className="text-display-01" />
+          <TypeScaleItem name="Heading 1" size="32px (2rem)" className="text-h1" />
+          <TypeScaleItem name="Heading 2" size="24px (1.5rem)" className="text-h2" />
+          <TypeScaleItem name="Heading 3" size="20px (1.25rem)" className="text-h3" />
+          <TypeScaleItem name="Heading 4" size="18px (1.125rem)" className="text-h4" />
+          <TypeScaleItem name="Body Large" size="18px (1.125rem)" className="text-body-lg" />
+          <TypeScaleItem name="Body" size="16px (1rem)" className="text-body" />
+          <TypeScaleItem name="Body Small" size="14px (0.875rem)" className="text-body-sm" />
+        </div>
+      </section>
+
+      <section className="mb-12">
+        <h2 className="text-h2 text-foreground mb-6">Font Weights</h2>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <WeightCard weight="400" name="Regular" />
+          <WeightCard weight="500" name="Medium" />
+          <WeightCard weight="600" name="Semibold" />
+          <WeightCard weight="700" name="Bold" />
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-h2 text-foreground mb-6">CSS Classes</h2>
+        <p className="text-body text-muted-foreground mb-4">
+          Use these utility classes for consistent typography:
+        </p>
+        <div className="bg-muted rounded-lg p-4 overflow-x-auto">
+          <pre className="text-sm text-foreground">
+{\`/* Display & Headings */
+.text-display-hero  /* 56px, weight 600 */
+.text-display-02    /* 48px, weight 600 */
+.text-display-01    /* 40px, weight 600 */
+.text-h1            /* 32px, weight 600 */
+.text-h2            /* 24px, weight 600 */
+.text-h3            /* 20px, weight 500 */
+.text-h4            /* 18px, weight 500 */
+
+/* Body Text */
+.text-body-lg       /* 18px, line-height 175% */
+.text-body          /* 16px, line-height 150% */
+.text-body-sm       /* 14px, line-height 150% */
+
+/* Colors */
+.text-foreground         /* Primary text color */
+.text-muted-foreground   /* Secondary text color */
+.text-primary            /* Brand primary color */\`}
+          </pre>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+function FontFamilyCard({
+  name,
+  variable,
+  usage,
+  sample,
+}: {
+  name: string
+  variable: string
+  usage: string
+  sample: string
+}) {
+  return (
+    <div className="rounded-xl border border-border p-6">
+      <h3 className="text-h3 text-foreground mb-2">{name}</h3>
+      <p className="text-body-sm text-muted-foreground mb-4">{usage}</p>
+      <div className="p-4 bg-muted rounded-lg mb-4">
+        <p className="text-xl text-foreground">{sample}</p>
+      </div>
+      <code className="text-xs text-muted-foreground bg-muted px-2 py-1 rounded">
+        {variable}
+      </code>
+    </div>
+  )
+}
+
+function TypeScaleItem({
+  name,
+  size,
+  className,
+}: {
+  name: string
+  size: string
+  className: string
+}) {
+  return (
+    <div className="flex flex-col md:flex-row md:items-center gap-4 pb-6 border-b border-border">
+      <div className="md:w-48 shrink-0">
+        <p className="text-body-sm font-medium text-foreground">{name}</p>
+        <p className="text-xs text-muted-foreground">{size}</p>
+      </div>
+      <div className="flex-1 overflow-hidden">
+        <p className={\`text-foreground truncate \${className}\`}>
+          The quick brown fox jumps
+        </p>
+      </div>
+    </div>
+  )
+}
+
+function WeightCard({ weight, name }: { weight: string; name: string }) {
+  return (
+    <div className="rounded-lg border border-border p-4 text-center">
+      <p className="text-2xl text-foreground mb-2" style={{ fontWeight: weight }}>
+        Aa
+      </p>
+      <p className="text-body-sm font-medium text-foreground">{name}</p>
+      <p className="text-xs text-muted-foreground">{weight}</p>
+    </div>
+  )
+}
+`;
+  await writeFile(path18.join(appDir, "src/app/typography/page.tsx"), content);
+}
+async function generateSpacingPage(config, appDir) {
+  const { designSystem } = config;
+  const radiusValue = radiusValues[designSystem.borderRadius];
+  const content = `export default function SpacingPage() {
+  return (
+    <div className="p-8 max-w-5xl">
+      <header className="mb-12">
+        <h1 className="text-display-01 text-foreground mb-4">Spacing</h1>
+        <p className="text-body-lg text-muted-foreground max-w-2xl">
+          Consistent spacing creates visual harmony and improves readability.
+          Uses Tailwind&apos;s default spacing scale with specific guidelines for common patterns.
+        </p>
+      </header>
+
+      <section className="mb-12">
+        <h2 className="text-h2 text-foreground mb-6">Spacing Scale</h2>
+        <p className="text-body text-muted-foreground mb-6">
+          Based on a 4px base unit. Use these values for margins, padding, and gaps.
+        </p>
+        <div className="space-y-3">
+          <SpacingRow value="1" pixels="4px" />
+          <SpacingRow value="2" pixels="8px" />
+          <SpacingRow value="3" pixels="12px" />
+          <SpacingRow value="4" pixels="16px" />
+          <SpacingRow value="6" pixels="24px" />
+          <SpacingRow value="8" pixels="32px" />
+          <SpacingRow value="12" pixels="48px" />
+          <SpacingRow value="16" pixels="64px" />
+          <SpacingRow value="24" pixels="96px" />
+        </div>
+      </section>
+
+      <section className="mb-12">
+        <h2 className="text-h2 text-foreground mb-6">Border Radius</h2>
+        <p className="text-body text-muted-foreground mb-6">
+          Default border radius: <code className="bg-muted px-1 rounded">${radiusValue}</code>
+        </p>
+        <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
+          <RadiusCard name="XS" value="calc(var(--radius) * 0.5)" />
+          <RadiusCard name="SM" value="calc(var(--radius) * 0.75)" />
+          <RadiusCard name="Default" value="var(--radius)" />
+          <RadiusCard name="LG" value="calc(var(--radius) * 1.5)" />
+          <RadiusCard name="Pill" value="9999px" />
+        </div>
+      </section>
+
+      <section className="mb-12">
+        <h2 className="text-h2 text-foreground mb-6">Common Patterns</h2>
+        <div className="space-y-6">
+          <PatternCard
+            title="Page Padding"
+            description="Standard page content padding"
+            code="p-8 or px-8 py-12"
+          />
+          <PatternCard
+            title="Section Spacing"
+            description="Space between major sections"
+            code="mb-12 or space-y-12"
+          />
+          <PatternCard
+            title="Card Padding"
+            description="Internal card padding"
+            code="p-4 or p-6"
+          />
+          <PatternCard
+            title="Grid Gap"
+            description="Space between grid items"
+            code="gap-4 or gap-6"
+          />
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-h2 text-foreground mb-6">CSS Variables</h2>
+        <div className="bg-muted rounded-lg p-4 overflow-x-auto">
+          <pre className="text-sm text-foreground">
+{\`/* Border Radius */
+--radius: ${radiusValue};
+--radius-xs: calc(var(--radius) * 0.5);
+--radius-sm: calc(var(--radius) * 0.75);
+--radius-lg: calc(var(--radius) * 1.5);
+--radius-pill: 9999px;\`}
+          </pre>
+        </div>
+      </section>
+    </div>
+  )
+}
+
+function SpacingRow({ value, pixels }: { value: string; pixels: string }) {
+  return (
+    <div className="flex items-center gap-4">
+      <div className="w-16 text-right">
+        <code className="text-sm text-muted-foreground">{value}</code>
+      </div>
+      <div className="flex-1 flex items-center gap-2">
+        <div className="h-6 bg-primary rounded" style={{ width: pixels }} />
+        <span className="text-sm text-muted-foreground">{pixels}</span>
+      </div>
+    </div>
+  )
+}
+
+function RadiusCard({ name, value }: { name: string; value: string }) {
+  return (
+    <div className="text-center">
+      <div className="h-20 w-full bg-primary mb-3" style={{ borderRadius: value }} />
+      <p className="text-body-sm font-medium text-foreground">{name}</p>
+      <code className="text-xs text-muted-foreground">{value}</code>
+    </div>
+  )
+}
+
+function PatternCard({
+  title,
+  description,
+  code,
+}: {
+  title: string
+  description: string
+  code: string
+}) {
+  return (
+    <div className="rounded-lg border border-border p-4">
+      <h3 className="text-h4 text-foreground mb-1">{title}</h3>
+      <p className="text-body-sm text-muted-foreground mb-2">{description}</p>
+      <code className="text-xs text-primary bg-primary/10 px-2 py-1 rounded">{code}</code>
+    </div>
+  )
+}
+`;
+  await writeFile(path18.join(appDir, "src/app/spacing/page.tsx"), content);
+}
+async function generateBrandPage(config, appDir) {
+  const content = `export default function BrandPage() {
+  return (
+    <div className="p-8 max-w-5xl">
+      <header className="mb-12">
+        <h1 className="text-display-01 text-foreground mb-4">Brand</h1>
+        <p className="text-body-lg text-muted-foreground max-w-2xl">
+          Brand assets and guidelines for ${config.name}. Download logos, icons,
+          and learn about proper usage.
+        </p>
+      </header>
+
+      <section className="mb-12">
+        <h2 className="text-h2 text-foreground mb-6">Logo</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div className="rounded-xl border border-border p-8 bg-white flex items-center justify-center">
+            <div className="h-16 w-16 rounded-xl bg-primary flex items-center justify-center text-primary-foreground text-2xl font-bold">
+              ${config.name.charAt(0).toUpperCase()}
+            </div>
+          </div>
+          <div className="rounded-xl border border-border p-8 bg-zinc-900 flex items-center justify-center">
+            <div className="h-16 w-16 rounded-xl bg-primary flex items-center justify-center text-primary-foreground text-2xl font-bold">
+              ${config.name.charAt(0).toUpperCase()}
+            </div>
+          </div>
+        </div>
+        <p className="text-body-sm text-muted-foreground mt-4">
+          The logo should maintain adequate spacing from other elements. Minimum clear space
+          equals the height of the logo mark.
+        </p>
+      </section>
+
+      <section className="mb-12">
+        <h2 className="text-h2 text-foreground mb-6">Logo Usage</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <UsageCard
+            title="Do"
+            items={[
+              'Use the logo on clean backgrounds',
+              'Maintain the aspect ratio',
+              'Use approved color variants',
+              'Keep adequate clear space',
+            ]}
+            type="do"
+          />
+          <UsageCard
+            title="Don\\'t"
+            items={[
+              'Stretch or distort the logo',
+              'Add effects like shadows or gradients',
+              'Place on busy backgrounds',
+              'Change the logo colors',
+            ]}
+            type="dont"
+          />
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-h2 text-foreground mb-6">Downloads</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <DownloadCard
+            title="Logo Pack"
+            description="SVG, PNG in various sizes"
+            icon="image"
+          />
+          <DownloadCard
+            title="Icon Set"
+            description="App icons for all platforms"
+            icon="grid"
+          />
+          <DownloadCard
+            title="Brand Guidelines"
+            description="Complete brand documentation"
+            icon="file"
+          />
+        </div>
+      </section>
+    </div>
+  )
+}
+
+function UsageCard({
+  title,
+  items,
+  type,
+}: {
+  title: string
+  items: string[]
+  type: 'do' | 'dont'
+}) {
+  const borderColor = type === 'do' ? 'border-l-success' : 'border-l-destructive'
+
+  return (
+    <div className={\`rounded-lg border border-border border-l-4 \${borderColor} p-4\`}>
+      <h3 className="text-h4 text-foreground mb-3">{title}</h3>
+      <ul className="space-y-2">
+        {items.map((item, i) => (
+          <li key={i} className="flex items-start gap-2 text-body-sm text-muted-foreground">
+            <span className={type === 'do' ? 'text-success' : 'text-destructive'}>
+              {type === 'do' ? '\u2713' : '\u2717'}
+            </span>
+            {item}
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+function DownloadCard({
+  title,
+  description,
+  icon,
+}: {
+  title: string
+  description: string
+  icon: string
+}) {
+  return (
+    <button className="rounded-lg border border-border p-4 text-left hover:bg-muted transition-colors w-full">
+      <div className="flex items-center gap-3">
+        <div className="p-2 rounded-lg bg-primary/10 text-primary">
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
+          </svg>
+        </div>
+        <div>
+          <h3 className="text-h4 text-foreground">{title}</h3>
+          <p className="text-body-sm text-muted-foreground">{description}</p>
+        </div>
+      </div>
+    </button>
+  )
+}
+`;
+  await writeFile(path18.join(appDir, "src/app/brand/page.tsx"), content);
+}
+async function generateBlocksPage(appDir) {
+  const content = `export default function BlocksPage() {
+  return (
+    <div className="p-8 max-w-5xl">
+      <header className="mb-12">
+        <h1 className="text-display-01 text-foreground mb-4">Blocks</h1>
+        <p className="text-body-lg text-muted-foreground max-w-2xl">
+          Pre-built UI blocks for common patterns. Copy and paste into your projects.
+        </p>
+      </header>
+
+      <section className="mb-12">
+        <h2 className="text-h2 text-foreground mb-6">Marketing</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <BlockCard title="Hero" description="Hero sections with CTA" />
+          <BlockCard title="Features" description="Feature grids and lists" />
+          <BlockCard title="Pricing" description="Pricing tables and cards" />
+          <BlockCard title="Testimonials" description="Customer testimonials" />
+          <BlockCard title="CTA" description="Call-to-action sections" />
+          <BlockCard title="FAQ" description="FAQ accordions" />
+        </div>
+      </section>
+
+      <section className="mb-12">
+        <h2 className="text-h2 text-foreground mb-6">Dashboard</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <BlockCard title="Stats" description="Metric and stat cards" />
+          <BlockCard title="Tables" description="Data tables with actions" />
+          <BlockCard title="Charts" description="Chart components" />
+          <BlockCard title="Sidebar" description="Navigation sidebars" />
+          <BlockCard title="Header" description="Dashboard headers" />
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-h2 text-foreground mb-6">Widgets</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+          <BlockCard title="Chat" description="Chat windows and bubbles" />
+          <BlockCard title="Forms" description="Contact and input forms" />
+          <BlockCard title="Cards" description="Content cards" />
+        </div>
+      </section>
+    </div>
+  )
+}
+
+function BlockCard({ title, description }: { title: string; description: string }) {
+  return (
+    <a
+      href="#"
+      className="group block rounded-lg border border-border p-4 hover:border-primary/30 hover:bg-muted/50 transition-all"
+    >
+      <h3 className="text-h4 text-foreground group-hover:text-primary transition-colors">
+        {title}
+      </h3>
+      <p className="text-body-sm text-muted-foreground mt-1">{description}</p>
+    </a>
+  )
+}
+`;
+  await writeFile(path18.join(appDir, "src/app/blocks/page.tsx"), content);
+}
+async function generateComponentsPage(appDir) {
+  const content = `export default function ComponentsPage() {
+  return (
+    <div className="p-8 max-w-5xl">
+      <header className="mb-12">
+        <h1 className="text-display-01 text-foreground mb-4">Components</h1>
+        <p className="text-body-lg text-muted-foreground max-w-2xl">
+          A collection of reusable UI components built with shadcn/ui.
+          Browse the sidebar to explore individual components.
+        </p>
+      </header>
+
+      <section className="mb-12">
+        <h2 className="text-h2 text-foreground mb-6">Getting Started</h2>
+        <div className="bg-muted rounded-lg p-6">
+          <p className="text-body text-muted-foreground mb-4">
+            Components are available from the @repo/ui package. Import them directly:
+          </p>
+          <pre className="text-sm text-foreground bg-background rounded p-4 overflow-x-auto">
+{\`import { Button } from '@repo/ui/button'
+import { Card, CardHeader, CardContent } from '@repo/ui/card'\`}
+          </pre>
+        </div>
+      </section>
+
+      <section>
+        <h2 className="text-h2 text-foreground mb-6">Categories</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <CategoryCard
+            title="Inputs"
+            components={['Button', 'Input', 'Textarea', 'Select', 'Checkbox', 'Radio Group', 'Switch', 'Slider']}
+          />
+          <CategoryCard
+            title="Display"
+            components={['Card', 'Badge', 'Avatar', 'Alert', 'Progress', 'Skeleton', 'Table']}
+          />
+          <CategoryCard
+            title="Navigation"
+            components={['Tabs', 'Breadcrumb', 'Pagination', 'Navigation Menu', 'Sidebar']}
+          />
+          <CategoryCard
+            title="Overlays"
+            components={['Dialog', 'Drawer', 'Sheet', 'Popover', 'Tooltip', 'Dropdown Menu']}
+          />
+        </div>
+      </section>
+    </div>
+  )
+}
+
+function CategoryCard({
+  title,
+  components,
+}: {
+  title: string
+  components: string[]
+}) {
+  return (
+    <div className="rounded-xl border border-border p-6">
+      <h3 className="text-h3 text-foreground mb-4">{title}</h3>
+      <div className="flex flex-wrap gap-2">
+        {components.map((component) => {
+          const slug = component.toLowerCase().replace(/\\s+/g, '-')
+          return (
+            <a
+              key={slug}
+              href={\`/components/\${slug}\`}
+              className="px-3 py-1 rounded-full bg-muted text-sm text-muted-foreground hover:text-foreground hover:bg-muted/80 transition-colors"
+            >
+              {component}
+            </a>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+`;
+  await writeFile(path18.join(appDir, "src/app/components/page.tsx"), content);
+}
+async function generateUtils(appDir) {
+  const content = `import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+`;
+  await writeFile(path18.join(appDir, "src/lib/utils.ts"), content);
+}
+
+// src/setup/env-wizard.ts
+import * as p6 from "@clack/prompts";
+import pc2 from "picocolors";
+import { exec } from "child_process";
+import { promisify } from "util";
+import path19 from "path";
+var execAsync = promisify(exec);
+async function runEnvSetupWizard(config) {
+  console.log();
+  p6.intro(pc2.bgMagenta(pc2.black(" Environment Setup ")));
+  const shouldSetup = await p6.confirm({
+    message: "Would you like to set up environment variables now?",
+    initialValue: true
+  });
+  if (p6.isCancel(shouldSetup) || !shouldSetup) {
+    p6.log.info("Skipping environment setup. You can configure .env.local manually later.");
+    return;
+  }
+  const envValues = {};
+  await setupSecrets(config, envValues);
+  await setupConvex(config, envValues);
+  if (config.marketingSite === "payload") {
+    await setupSupabase(config, envValues);
+  }
+  await showOAuthSetupGuide(config);
+  await showRemainingEnvGuide(config);
+  await writeEnvFiles(config, envValues);
+  p6.outro(pc2.green("Environment setup complete!"));
+}
+async function setupSecrets(config, envValues) {
+  p6.log.step("Generating secure secrets...");
+  try {
+    const { stdout: authSecret } = await execAsync("openssl rand -base64 32");
+    envValues.BETTER_AUTH_SECRET = authSecret.trim();
+    p6.log.success("Generated BETTER_AUTH_SECRET");
+    if (config.marketingSite === "payload") {
+      const { stdout: payloadSecret } = await execAsync("openssl rand -base64 32");
+      envValues.PAYLOAD_SECRET = payloadSecret.trim();
+      p6.log.success("Generated PAYLOAD_SECRET");
+      const { stdout: cronSecret } = await execAsync("openssl rand -base64 32");
+      envValues.CRON_SECRET = cronSecret.trim();
+      p6.log.success("Generated CRON_SECRET");
+      const { stdout: previewSecret } = await execAsync("openssl rand -base64 32");
+      envValues.PREVIEW_SECRET = previewSecret.trim();
+      p6.log.success("Generated PREVIEW_SECRET");
+    }
+  } catch (error) {
+    p6.log.warn("Could not generate secrets automatically. Please generate them manually:");
+    p6.log.info("Run: openssl rand -base64 32");
+  }
+}
+async function setupConvex(config, envValues) {
+  console.log();
+  p6.log.step("Convex Setup");
+  const convexChoice = await p6.select({
+    message: "How would you like to set up Convex?",
+    options: [
+      {
+        value: "new",
+        label: "Create a new Convex project",
+        hint: "Will open Convex dashboard in browser"
+      },
+      {
+        value: "existing",
+        label: "Connect to an existing Convex project",
+        hint: "Enter your Convex deployment URL"
+      },
+      {
+        value: "skip",
+        label: "Skip for now",
+        hint: "Configure manually later"
+      }
+    ]
+  });
+  if (p6.isCancel(convexChoice) || convexChoice === "skip") {
+    p6.log.info("Skipping Convex setup. Run `pnpm convex dev` to set up later.");
+    return;
+  }
+  if (convexChoice === "new") {
+    p6.log.info(`
+${pc2.bold("To create a new Convex project:")}
+
+1. Run ${pc2.cyan("pnpm convex dev")} in your project directory
+2. It will open your browser to create a new project
+3. Follow the prompts to set up your Convex project
+4. The CLI will automatically add the deployment URL to .env.local
+
+${pc2.dim("Note: Make sure you have a Convex account at https://convex.dev")}
+`);
+  } else if (convexChoice === "existing") {
+    const deploymentName = await p6.text({
+      message: "Enter your Convex deployment name (e.g., my-app-123):",
+      placeholder: "my-app-123",
+      validate: (value) => {
+        if (!value) return "Deployment name is required";
+        return void 0;
+      }
+    });
+    if (!p6.isCancel(deploymentName)) {
+      envValues.CONVEX_DEPLOYMENT = `prod:${deploymentName}`;
+      envValues.NEXT_PUBLIC_CONVEX_URL = `https://${deploymentName}.convex.cloud`;
+      p6.log.success("Convex deployment configured");
+    }
+  }
+}
+async function setupSupabase(config, envValues) {
+  console.log();
+  p6.log.step("Supabase Database Setup (for Payload CMS)");
+  const supabaseChoice = await p6.select({
+    message: "How would you like to set up Supabase?",
+    options: [
+      {
+        value: "guide",
+        label: "Show setup guide",
+        hint: "Step-by-step instructions"
+      },
+      {
+        value: "existing",
+        label: "Enter existing Supabase credentials",
+        hint: "I already have a Supabase project"
+      },
+      {
+        value: "skip",
+        label: "Skip for now",
+        hint: "Configure manually later"
+      }
+    ]
+  });
+  if (p6.isCancel(supabaseChoice) || supabaseChoice === "skip") {
+    p6.log.info("Skipping Supabase setup. Configure DATABASE_URL in .env.local later.");
+    return;
+  }
+  if (supabaseChoice === "guide") {
+    p6.log.info(`
+${pc2.bold("To set up Supabase for Payload CMS:")}
+
+1. Go to ${pc2.cyan("https://supabase.com")} and create/sign in to your account
+2. Create a new project (or select an existing one)
+3. Go to ${pc2.bold("Project Settings > Database")}
+4. Under ${pc2.bold("Connection string")}, select ${pc2.bold("URI")} tab
+5. Copy the connection string (starts with postgresql://)
+6. Replace ${pc2.dim("[YOUR-PASSWORD]")} with your database password
+
+${pc2.bold("For S3 Storage (images/media):")}
+1. Go to ${pc2.bold("Project Settings > Storage")}
+2. Create a new bucket called "media"
+3. Go to ${pc2.bold("Project Settings > API")}
+4. Copy the ${pc2.bold("service_role key")} for S3_SECRET_ACCESS_KEY
+5. Note your project reference for the S3 endpoint
+
+${pc2.dim("Add these to your apps/marketing/.env.local file")}
+`);
+    const enterNow = await p6.confirm({
+      message: "Would you like to enter your Supabase credentials now?",
+      initialValue: false
+    });
+    if (!p6.isCancel(enterNow) && enterNow) {
+      await collectSupabaseCredentials(envValues);
+    }
+  } else if (supabaseChoice === "existing") {
+    await collectSupabaseCredentials(envValues);
+  }
+}
+async function collectSupabaseCredentials(envValues) {
+  const databaseUrl = await p6.text({
+    message: "Enter your DATABASE_URL (PostgreSQL connection string):",
+    placeholder: "postgresql://postgres:[PASSWORD]@db.[PROJECT].supabase.co:5432/postgres",
+    validate: (value) => {
+      if (!value) return "Database URL is required";
+      if (!value.startsWith("postgresql://")) return "Must be a PostgreSQL connection string";
+      return void 0;
+    }
+  });
+  if (!p6.isCancel(databaseUrl)) {
+    envValues.DATABASE_URL = databaseUrl;
+    p6.log.success("Database URL configured");
+  }
+  const setupS3 = await p6.confirm({
+    message: "Would you like to configure S3 storage for media uploads?",
+    initialValue: false
+  });
+  if (!p6.isCancel(setupS3) && setupS3) {
+    const projectRef = await p6.text({
+      message: "Enter your Supabase project reference (e.g., abcdefghijklmnop):",
+      placeholder: "abcdefghijklmnop"
+    });
+    if (!p6.isCancel(projectRef)) {
+      envValues.S3_ENDPOINT = `https://${projectRef}.supabase.co/storage/v1/s3`;
+      envValues.S3_REGION = "auto";
+      envValues.S3_BUCKET = "media";
+      const accessKeyId = await p6.text({
+        message: "Enter your S3 Access Key ID (from Supabase API settings):",
+        placeholder: "your-access-key-id"
+      });
+      if (!p6.isCancel(accessKeyId)) {
+        envValues.S3_ACCESS_KEY_ID = accessKeyId;
+      }
+      const secretKey = await p6.password({
+        message: "Enter your S3 Secret Access Key (service_role key):"
+      });
+      if (!p6.isCancel(secretKey)) {
+        envValues.S3_SECRET_ACCESS_KEY = secretKey;
+      }
+      p6.log.success("S3 storage configured");
+    }
+  }
+}
+async function showOAuthSetupGuide(config) {
+  console.log();
+  p6.log.step("OAuth Provider Setup");
+  const allProviders = ["google", ...config.auth.providers];
+  p6.log.info(`
+${pc2.bold("Configure OAuth providers for authentication:")}
+
+${pc2.cyan("Google OAuth")} (required):
+  1. Go to ${pc2.dim("https://console.cloud.google.com")}
+  2. Create a new project or select existing
+  3. Go to APIs & Services > Credentials
+  4. Create OAuth 2.0 Client ID (Web application)
+  5. Add authorized redirect: ${pc2.dim("http://localhost:3000/api/auth/callback/google")}
+  6. Copy Client ID and Client Secret to .env.local
+`);
+  for (const provider of config.auth.providers) {
+    const guides = {
+      github: `${pc2.cyan("GitHub OAuth")}:
+  1. Go to ${pc2.dim("https://github.com/settings/developers")}
+  2. Create a new OAuth App
+  3. Set callback URL: ${pc2.dim("http://localhost:3000/api/auth/callback/github")}`,
+      discord: `${pc2.cyan("Discord OAuth")}:
+  1. Go to ${pc2.dim("https://discord.com/developers/applications")}
+  2. Create a new application
+  3. Go to OAuth2 and add redirect: ${pc2.dim("http://localhost:3000/api/auth/callback/discord")}`,
+      twitter: `${pc2.cyan("Twitter/X OAuth")}:
+  1. Go to ${pc2.dim("https://developer.twitter.com/en/portal/dashboard")}
+  2. Create a project and app
+  3. Set callback URL: ${pc2.dim("http://localhost:3000/api/auth/callback/twitter")}`,
+      apple: `${pc2.cyan("Apple OAuth")}:
+  1. Go to ${pc2.dim("https://developer.apple.com")}
+  2. Create an App ID and Service ID
+  3. Configure Sign in with Apple`,
+      microsoft: `${pc2.cyan("Microsoft OAuth")}:
+  1. Go to ${pc2.dim("https://portal.azure.com")}
+  2. Register a new application in Azure AD
+  3. Add redirect: ${pc2.dim("http://localhost:3000/api/auth/callback/microsoft")}`,
+      linkedin: `${pc2.cyan("LinkedIn OAuth")}:
+  1. Go to ${pc2.dim("https://www.linkedin.com/developers")}
+  2. Create a new app
+  3. Add redirect: ${pc2.dim("http://localhost:3000/api/auth/callback/linkedin")}`
+    };
+    if (guides[provider]) {
+      console.log(guides[provider]);
+      console.log();
+    }
+  }
+}
+async function showRemainingEnvGuide(config) {
+  console.log();
+  p6.log.step("Additional Configuration");
+  const guides = [];
+  guides.push(`${pc2.cyan("Resend (Email)")}:
+  1. Sign up at ${pc2.dim("https://resend.com")}
+  2. Create an API key
+  3. Add RESEND_API_KEY to .env.local`);
+  if (config.integrations.analytics === "posthog") {
+    guides.push(`${pc2.cyan("PostHog Analytics")}:
+  1. Sign up at ${pc2.dim("https://posthog.com")}
+  2. Create a project and get your API key
+  3. Add NEXT_PUBLIC_POSTHOG_KEY and NEXT_PUBLIC_POSTHOG_HOST`);
+  }
+  if (config.integrations.uploads === "uploadthing") {
+    guides.push(`${pc2.cyan("Uploadthing")}:
+  1. Sign up at ${pc2.dim("https://uploadthing.com")}
+  2. Create an app and get your credentials
+  3. Add UPLOADTHING_SECRET and UPLOADTHING_APP_ID`);
+  }
+  if (config.integrations.uploads === "s3") {
+    guides.push(`${pc2.cyan("AWS S3")}:
+  1. Create an S3 bucket in AWS Console
+  2. Create an IAM user with S3 access
+  3. Add AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, AWS_REGION, AWS_BUCKET_NAME`);
+  }
+  if (config.integrations.rateLimiting === "arcjet") {
+    guides.push(`${pc2.cyan("Arcjet")}:
+  1. Sign up at ${pc2.dim("https://arcjet.com")}
+  2. Create a site and get your API key
+  3. Add ARCJET_KEY to .env.local`);
+  }
+  if (config.integrations.rateLimiting === "upstash") {
+    guides.push(`${pc2.cyan("Upstash Redis")}:
+  1. Sign up at ${pc2.dim("https://upstash.com")}
+  2. Create a Redis database
+  3. Add UPSTASH_REDIS_REST_URL and UPSTASH_REDIS_REST_TOKEN`);
+  }
+  if (config.integrations.monitoring === "sentry") {
+    guides.push(`${pc2.cyan("Sentry")}:
+  1. Sign up at ${pc2.dim("https://sentry.io")}
+  2. Create a project (Next.js)
+  3. Add SENTRY_DSN and SENTRY_AUTH_TOKEN`);
+  }
+  if (guides.length > 0) {
+    p6.log.info(`
+${pc2.bold("Configure these services to complete your setup:")}
+
+${guides.join("\n\n")}
+`);
+  }
+}
+async function writeEnvFiles(config, envValues) {
+  if (Object.keys(envValues).length === 0) {
+    return;
+  }
+  p6.log.step("Writing environment files...");
+  const webEnvPath = config.structure === "monorepo" ? path19.join(config.targetDir, "apps/web/.env.local") : path19.join(config.targetDir, ".env.local");
+  if (await pathExists(webEnvPath)) {
+    let content = await readFile(webEnvPath);
+    for (const [key, value] of Object.entries(envValues)) {
+      if (["PAYLOAD_SECRET", "DATABASE_URL", "S3_ENDPOINT", "S3_REGION", "S3_BUCKET", "S3_ACCESS_KEY_ID", "S3_SECRET_ACCESS_KEY", "CRON_SECRET", "PREVIEW_SECRET"].includes(key)) {
+        continue;
+      }
+      const regex = new RegExp(`^${key}=.*$`, "m");
+      if (regex.test(content)) {
+        content = content.replace(regex, `${key}=${value}`);
+      } else {
+        content += `
+${key}=${value}`;
+      }
+    }
+    await writeFile(webEnvPath, content);
+    p6.log.success(`Updated ${config.structure === "monorepo" ? "apps/web/.env.local" : ".env.local"}`);
+  }
+  if (config.marketingSite === "payload" && config.structure === "monorepo") {
+    const marketingEnvPath = path19.join(config.targetDir, "apps/marketing/.env.local");
+    if (await pathExists(marketingEnvPath)) {
+      let content = await readFile(marketingEnvPath);
+      const payloadEnvKeys = ["PAYLOAD_SECRET", "DATABASE_URL", "S3_ENDPOINT", "S3_REGION", "S3_BUCKET", "S3_ACCESS_KEY_ID", "S3_SECRET_ACCESS_KEY", "CRON_SECRET", "PREVIEW_SECRET"];
+      for (const [key, value] of Object.entries(envValues)) {
+        if (!payloadEnvKeys.includes(key)) continue;
+        const regex = new RegExp(`^${key}=.*$`, "m");
+        if (regex.test(content)) {
+          content = content.replace(regex, `${key}=${value}`);
+        } else {
+          content += `
+${key}=${value}`;
+        }
+      }
+      await writeFile(marketingEnvPath, content);
+      p6.log.success("Updated apps/marketing/.env.local");
+    }
+  }
+}
+
 // src/generators/index.ts
 async function generateProject(config) {
   const spinner = ora();
   if (!await isPnpmInstalled()) {
-    p6.cancel("pnpm is not installed. Please install pnpm first: npm install -g pnpm");
+    p7.cancel("pnpm is not installed. Please install pnpm first: npm install -g pnpm");
     process.exit(1);
   }
   if (await pathExists(config.targetDir)) {
-    p6.cancel(`Directory ${config.name} already exists`);
+    p7.cancel(`Directory ${config.name} already exists`);
     process.exit(1);
   }
   console.log();
-  p6.log.info(`Creating project in ${pc2.cyan(config.targetDir)}`);
+  p7.log.info(`Creating project in ${pc3.cyan(config.targetDir)}`);
   console.log();
   try {
     if (config.structure === "monorepo") {
@@ -5030,6 +7089,7 @@ async function generateProject(config) {
       await generateSingleProject(config, spinner);
     }
     await runPostGenerationSteps(config, spinner);
+    await runEnvSetupWizard(config);
     displaySuccessMessage(config);
   } catch (error) {
     spinner.fail("An error occurred during project generation");
@@ -5049,7 +7109,7 @@ async function generateSingleProject(config, spinner) {
   await generateShadcn(config, targetDir);
   spinner.succeed("shadcn/ui configured");
   spinner.start("Setting up Convex...");
-  await generateConvex(config, path18.join(targetDir, "convex"));
+  await generateConvex(config, path20.join(targetDir, "convex"));
   spinner.succeed("Convex configured");
   spinner.start("Configuring Better-Auth...");
   await generateBetterAuth(config, targetDir);
@@ -5092,7 +7152,7 @@ async function generateMonorepoProject(config, spinner) {
   spinner.start("Creating shared UI package...");
   await generateUIPackage(config, targetDir);
   spinner.succeed("Shared UI package created");
-  const webDir = path18.join(targetDir, "apps/web");
+  const webDir = path20.join(targetDir, "apps/web");
   spinner.start("Generating web application...");
   await generateBaseNextjs(config, webDir);
   await generateTailwind(config, webDir);
@@ -5102,10 +7162,10 @@ async function generateMonorepoProject(config, spinner) {
   await generateEmail(config, webDir);
   await updateWebTsConfig(webDir);
   spinner.succeed("Web application generated");
-  const backendDir = path18.join(targetDir, "packages/backend");
+  const backendDir = path20.join(targetDir, "packages/backend");
   spinner.start("Setting up Convex backend...");
   await ensureDir(backendDir);
-  await generateConvex(config, path18.join(backendDir, "convex"));
+  await generateConvex(config, path20.join(backendDir, "convex"));
   spinner.succeed("Convex backend configured");
   if (config.integrations.analytics !== "none") {
     spinner.start(`Setting up ${config.integrations.analytics} analytics...`);
@@ -5128,7 +7188,7 @@ async function generateMonorepoProject(config, spinner) {
     spinner.succeed(`${config.integrations.monitoring} monitoring configured`);
   }
   if (config.marketingSite !== "none") {
-    const marketingDir = path18.join(targetDir, "apps/marketing");
+    const marketingDir = path20.join(targetDir, "apps/marketing");
     spinner.start(`Generating ${config.marketingSite} marketing site...`);
     if (config.marketingSite === "payload") {
       await generatePayload(config, marketingDir);
@@ -5140,11 +7200,14 @@ async function generateMonorepoProject(config, spinner) {
     spinner.succeed(`${config.marketingSite} marketing site generated`);
   }
   if (config.includeDocs) {
-    const docsDir = path18.join(targetDir, "apps/docs");
+    const docsDir = path20.join(targetDir, "apps/docs");
     spinner.start("Generating Fumadocs documentation site...");
     await generateFumadocs(config, docsDir);
     spinner.succeed("Fumadocs documentation site generated");
   }
+  spinner.start("Generating design system app...");
+  await generateDesignSystemApp(config, targetDir);
+  spinner.succeed("Design system app generated");
   await generateGitignore(targetDir);
 }
 async function runPostGenerationSteps(config, spinner) {
@@ -5158,7 +7221,7 @@ async function runPostGenerationSteps(config, spinner) {
   }
   spinner.start("Installing shadcn/ui components...");
   try {
-    const shadcnDir = config.structure === "monorepo" ? path18.join(targetDir, "packages/ui") : targetDir;
+    const shadcnDir = config.structure === "monorepo" ? path20.join(targetDir, "packages/ui") : targetDir;
     await runShadcnAdd(shadcnDir);
     spinner.succeed("shadcn/ui components installed");
   } catch (error) {
@@ -5218,7 +7281,7 @@ async function generateBiomeConfig(targetDir) {
     }
   };
   await writeFile(
-    path18.join(targetDir, "biome.json"),
+    path20.join(targetDir, "biome.json"),
     JSON.stringify(biomeJson, null, 2)
   );
 }
@@ -5269,13 +7332,13 @@ yarn-error.log*
 *.pem
 .cache
 `;
-  await writeFile(path18.join(targetDir, ".gitignore"), gitignoreContent);
+  await writeFile(path20.join(targetDir, ".gitignore"), gitignoreContent);
 }
 async function generateHuskyHooks(targetDir) {
   const preCommitContent = `pnpm lint-staged
 `;
-  await ensureDir(path18.join(targetDir, ".husky"));
-  await writeFile(path18.join(targetDir, ".husky/pre-commit"), preCommitContent);
+  await ensureDir(path20.join(targetDir, ".husky"));
+  await writeFile(path20.join(targetDir, ".husky/pre-commit"), preCommitContent);
 }
 async function updateWebTsConfig(webDir) {
   const tsConfig = {
@@ -5289,14 +7352,14 @@ async function updateWebTsConfig(webDir) {
     exclude: ["node_modules"]
   };
   await writeFile(
-    path18.join(webDir, "tsconfig.json"),
+    path20.join(webDir, "tsconfig.json"),
     JSON.stringify(tsConfig, null, 2)
   );
 }
 async function generateNextjsMarketing(config, marketingDir) {
-  await ensureDir(path18.join(marketingDir, "src/app"));
-  await ensureDir(path18.join(marketingDir, "src/components"));
-  await ensureDir(path18.join(marketingDir, "public"));
+  await ensureDir(path20.join(marketingDir, "src/app"));
+  await ensureDir(path20.join(marketingDir, "src/components"));
+  await ensureDir(path20.join(marketingDir, "public"));
   const packageJson = {
     name: "@repo/marketing",
     version: "0.1.0",
@@ -5327,7 +7390,7 @@ async function generateNextjsMarketing(config, marketingDir) {
     }
   };
   await writeFile(
-    path18.join(marketingDir, "package.json"),
+    path20.join(marketingDir, "package.json"),
     JSON.stringify(packageJson, null, 2)
   );
   const homePageContent = `export default function HomePage() {
@@ -5350,7 +7413,7 @@ async function generateNextjsMarketing(config, marketingDir) {
 }
 `;
   await writeFile(
-    path18.join(marketingDir, "src/app/page.tsx"),
+    path20.join(marketingDir, "src/app/page.tsx"),
     homePageContent
   );
   const layoutContent = `import type { Metadata } from 'next'
@@ -5374,7 +7437,7 @@ export default function RootLayout({
 }
 `;
   await writeFile(
-    path18.join(marketingDir, "src/app/layout.tsx"),
+    path20.join(marketingDir, "src/app/layout.tsx"),
     layoutContent
   );
   const globalsCss = `@import "tailwindcss";
@@ -5386,7 +7449,7 @@ export default function RootLayout({
 }
 `;
   await writeFile(
-    path18.join(marketingDir, "src/app/globals.css"),
+    path20.join(marketingDir, "src/app/globals.css"),
     globalsCss
   );
   const tsConfig = {
@@ -5400,7 +7463,7 @@ export default function RootLayout({
     exclude: ["node_modules"]
   };
   await writeFile(
-    path18.join(marketingDir, "tsconfig.json"),
+    path20.join(marketingDir, "tsconfig.json"),
     JSON.stringify(tsConfig, null, 2)
   );
   const nextConfig = `import type { NextConfig } from 'next'
@@ -5411,14 +7474,14 @@ const nextConfig: NextConfig = {
 
 export default nextConfig
 `;
-  await writeFile(path18.join(marketingDir, "next.config.ts"), nextConfig);
+  await writeFile(path20.join(marketingDir, "next.config.ts"), nextConfig);
   const postcssConfig = `export default {
   plugins: {
     '@tailwindcss/postcss': {},
   },
 }
 `;
-  await writeFile(path18.join(marketingDir, "postcss.config.mjs"), postcssConfig);
+  await writeFile(path20.join(marketingDir, "postcss.config.mjs"), postcssConfig);
 }
 function displaySuccessMessage(config) {
   const apps = ["web"];
@@ -5429,39 +7492,40 @@ function displaySuccessMessage(config) {
     if (config.includeDocs) {
       apps.push("docs");
     }
+    apps.push("design-system");
   }
   console.log();
-  p6.outro(pc2.green("Project created successfully!"));
+  p7.outro(pc3.green("Project created successfully!"));
   console.log();
-  console.log(pc2.bold("Next steps:"));
+  console.log(pc3.bold("Next steps:"));
   console.log();
-  console.log(`  ${pc2.cyan("cd")} ${config.name}`);
+  console.log(`  ${pc3.cyan("cd")} ${config.name}`);
   console.log();
-  console.log(`  ${pc2.dim("# Set up your environment variables")}`);
-  console.log(`  ${pc2.cyan("cp")} .env.example .env.local`);
+  console.log(`  ${pc3.dim("# Set up your environment variables")}`);
+  console.log(`  ${pc3.cyan("cp")} .env.example .env.local`);
   console.log();
-  console.log(`  ${pc2.dim("# Start Convex development server")}`);
-  console.log(`  ${pc2.cyan("pnpm")} convex dev`);
+  console.log(`  ${pc3.dim("# Start Convex development server")}`);
+  console.log(`  ${pc3.cyan("pnpm")} convex dev`);
   console.log();
-  console.log(`  ${pc2.dim("# In another terminal, start the app")}`);
-  console.log(`  ${pc2.cyan("pnpm")} dev`);
+  console.log(`  ${pc3.dim("# In another terminal, start the app")}`);
+  console.log(`  ${pc3.cyan("pnpm")} dev`);
   if (config.marketingSite === "payload") {
     console.log();
-    console.log(pc2.dim("# If using Payload CMS:"));
-    console.log(pc2.dim("# 1. Create a Supabase project at https://supabase.com"));
-    console.log(pc2.dim("# 2. Copy your database connection strings to .env.local"));
-    console.log(pc2.dim("# 3. Run migrations: pnpm --filter marketing db:push"));
+    console.log(pc3.dim("# If using Payload CMS:"));
+    console.log(pc3.dim("# 1. Create a Supabase project at https://supabase.com"));
+    console.log(pc3.dim("# 2. Copy your database connection strings to .env.local"));
+    console.log(pc3.dim("# 3. Run migrations: pnpm --filter marketing db:push"));
   }
   console.log();
-  console.log(pc2.bold("Documentation:"));
-  console.log(`  ${pc2.dim("-")} Convex: ${pc2.cyan("https://docs.convex.dev")}`);
-  console.log(`  ${pc2.dim("-")} Better-Auth: ${pc2.cyan("https://www.better-auth.com")}`);
-  console.log(`  ${pc2.dim("-")} shadcn/ui: ${pc2.cyan("https://ui.shadcn.com")}`);
+  console.log(pc3.bold("Documentation:"));
+  console.log(`  ${pc3.dim("-")} Convex: ${pc3.cyan("https://docs.convex.dev")}`);
+  console.log(`  ${pc3.dim("-")} Better-Auth: ${pc3.cyan("https://www.better-auth.com")}`);
+  console.log(`  ${pc3.dim("-")} shadcn/ui: ${pc3.cyan("https://ui.shadcn.com")}`);
   if (config.marketingSite === "payload") {
-    console.log(`  ${pc2.dim("-")} Payload CMS: ${pc2.cyan("https://payloadcms.com/docs")}`);
+    console.log(`  ${pc3.dim("-")} Payload CMS: ${pc3.cyan("https://payloadcms.com/docs")}`);
   }
   if (config.includeDocs) {
-    console.log(`  ${pc2.dim("-")} Fumadocs: ${pc2.cyan("https://fumadocs.vercel.app")}`);
+    console.log(`  ${pc3.dim("-")} Fumadocs: ${pc3.cyan("https://fumadocs.vercel.app")}`);
   }
   console.log();
 }
@@ -5479,7 +7543,7 @@ var kofiGradient = gradient(["#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4"]);
 function printBanner() {
   console.log(kofiGradient(BANNER));
   console.log(
-    pc3.dim("  Scaffold opinionated full-stack projects with ease\n")
+    pc4.dim("  Scaffold opinionated full-stack projects with ease\n")
   );
 }
 var program = new Command();
@@ -5513,10 +7577,10 @@ program.name("create-kofi-stack").description(
     await generateProject(config);
   } catch (error) {
     if (error instanceof Error && error.message.includes("cancelled")) {
-      console.log(pc3.yellow("\nOperation cancelled."));
+      console.log(pc4.yellow("\nOperation cancelled."));
       process.exit(0);
     }
-    console.error(pc3.red("\nAn error occurred:"), error);
+    console.error(pc4.red("\nAn error occurred:"), error);
     process.exit(1);
   }
 });