create-kofi-stack 1.0.0 → 1.1.0

package/dist/index.js

@@ -97,6 +97,18 @@ async function promptIncludeDocs(defaultValue) {
 
 // src/prompts/shadcn.ts
 import * as p2 from "@clack/prompts";
+var colorPresets = {
+  blue: { primary: "221.2 83.2% 53.3%", secondary: "210 40% 96.1%", accent: "210 40% 96.1%" },
+  green: { primary: "142.1 76.2% 36.3%", secondary: "138 76% 97%", accent: "142.1 70.6% 45.3%" },
+  orange: { primary: "24.6 95% 53.1%", secondary: "30 80% 96%", accent: "20.5 90.2% 48.2%" },
+  red: { primary: "0 72.2% 50.6%", secondary: "0 85% 97%", accent: "0 84.2% 60.2%" },
+  violet: { primary: "262.1 83.3% 57.8%", secondary: "260 60% 96%", accent: "263.4 70% 50.4%" },
+  yellow: { primary: "47.9 95.8% 53.1%", secondary: "48 100% 96%", accent: "45.4 93.4% 47.5%" },
+  teal: { primary: "173 80% 40%", secondary: "166 76% 97%", accent: "172 66% 50.4%" },
+  rose: { primary: "346.8 77.2% 49.8%", secondary: "340 80% 97%", accent: "346.8 77.2% 49.8%" },
+  indigo: { primary: "238.7 83.5% 66.7%", secondary: "226 70% 97%", accent: "243.4 75.4% 58.6%" },
+  cyan: { primary: "189 94% 43%", secondary: "185 96% 97%", accent: "188 94.5% 42.7%" }
+};
 async function promptComponentLibrary(defaultValue) {
   const library = await p2.select({
     message: "Component library:",
@@ -194,6 +206,96 @@ async function promptIconLibrary(defaultValue) {
   }
   return iconLibrary;
 }
+async function promptPrimaryColor(defaultValue) {
+  const color = await p2.select({
+    message: "Primary brand color:",
+    options: [
+      { value: "blue", label: "Blue", hint: "Professional, trustworthy" },
+      { value: "green", label: "Green", hint: "Growth, success" },
+      { value: "violet", label: "Violet", hint: "Creative, premium" },
+      { value: "orange", label: "Orange", hint: "Energetic, friendly" },
+      { value: "red", label: "Red", hint: "Bold, urgent" },
+      { value: "teal", label: "Teal", hint: "Calm, modern" },
+      { value: "rose", label: "Rose", hint: "Warm, approachable" },
+      { value: "indigo", label: "Indigo", hint: "Deep, sophisticated" },
+      { value: "cyan", label: "Cyan", hint: "Fresh, tech-forward" }
+    ],
+    initialValue: defaultValue ?? "blue"
+  });
+  if (p2.isCancel(color)) {
+    throw new Error("Operation cancelled");
+  }
+  return colorPresets[color].primary;
+}
+async function promptHeadingFont(defaultValue) {
+  const font = await p2.select({
+    message: "Heading font:",
+    options: [
+      { value: "dm-sans", label: "DM Sans", hint: "Modern, geometric" },
+      { value: "inter", label: "Inter", hint: "Clean, versatile" },
+      { value: "geist", label: "Geist", hint: "Vercel's modern font" },
+      { value: "plus-jakarta", label: "Plus Jakarta Sans", hint: "Friendly, readable" },
+      { value: "outfit", label: "Outfit", hint: "Contemporary, rounded" },
+      { value: "space-grotesk", label: "Space Grotesk", hint: "Technical, distinctive" }
+    ],
+    initialValue: defaultValue ?? "dm-sans"
+  });
+  if (p2.isCancel(font)) {
+    throw new Error("Operation cancelled");
+  }
+  return font;
+}
+async function promptBodyFont(defaultValue) {
+  const font = await p2.select({
+    message: "Body font:",
+    options: [
+      { value: "inter", label: "Inter", hint: "Optimized for screens" },
+      { value: "dm-sans", label: "DM Sans", hint: "Modern, geometric" },
+      { value: "geist", label: "Geist", hint: "Vercel's modern font" },
+      { value: "plus-jakarta", label: "Plus Jakarta Sans", hint: "Friendly, readable" },
+      { value: "outfit", label: "Outfit", hint: "Contemporary, rounded" },
+      { value: "space-grotesk", label: "Space Grotesk", hint: "Technical, distinctive" }
+    ],
+    initialValue: defaultValue ?? "inter"
+  });
+  if (p2.isCancel(font)) {
+    throw new Error("Operation cancelled");
+  }
+  return font;
+}
+async function promptBorderRadius(defaultValue) {
+  const radius = await p2.select({
+    message: "Border radius:",
+    options: [
+      { value: "none", label: "None", hint: "0px - Sharp edges" },
+      { value: "sm", label: "Small", hint: "4px - Subtle rounding" },
+      { value: "md", label: "Medium", hint: "8px - Balanced (default)" },
+      { value: "lg", label: "Large", hint: "12px - More rounded" },
+      { value: "xl", label: "Extra Large", hint: "16px - Very rounded" },
+      { value: "full", label: "Full", hint: "Pill-shaped buttons" }
+    ],
+    initialValue: defaultValue ?? "md"
+  });
+  if (p2.isCancel(radius)) {
+    throw new Error("Operation cancelled");
+  }
+  return radius;
+}
+async function promptSpacingScale(defaultValue) {
+  const spacing = await p2.select({
+    message: "Spacing scale:",
+    options: [
+      { value: "compact", label: "Compact", hint: "Tighter spacing, denser UI" },
+      { value: "default", label: "Default", hint: "Standard spacing" },
+      { value: "relaxed", label: "Relaxed", hint: "More breathing room" }
+    ],
+    initialValue: defaultValue ?? "default"
+  });
+  if (p2.isCancel(spacing)) {
+    throw new Error("Operation cancelled");
+  }
+  return spacing;
+}
 async function promptShadcnConfig(defaults) {
   if (defaults?.componentLibrary && defaults?.styleVariant && defaults?.baseColor && defaults?.themeColor && defaults?.menuAccent && defaults?.iconLibrary) {
     return {
@@ -213,6 +315,38 @@ async function promptShadcnConfig(defaults) {
   const iconLibrary = defaults?.iconLibrary ?? await promptIconLibrary();
   return { componentLibrary, styleVariant, baseColor, themeColor, menuAccent, iconLibrary };
 }
+async function promptDesignSystemConfig(defaults, themeColor) {
+  if (defaults?.primaryColor && defaults?.secondaryColor && defaults?.accentColor && defaults?.headingFont && defaults?.bodyFont && defaults?.borderRadius && defaults?.spacingScale) {
+    return {
+      primaryColor: defaults.primaryColor,
+      secondaryColor: defaults.secondaryColor,
+      accentColor: defaults.accentColor,
+      headingFont: defaults.headingFont,
+      bodyFont: defaults.bodyFont,
+      borderRadius: defaults.borderRadius,
+      spacingScale: defaults.spacingScale
+    };
+  }
+  const defaultColorKey = themeColor ?? "blue";
+  const primaryColor = defaults?.primaryColor ?? await promptPrimaryColor(defaultColorKey);
+  const colorKey = Object.entries(colorPresets).find(([_, v]) => v.primary === primaryColor)?.[0] ?? "blue";
+  const colors = colorPresets[colorKey];
+  const secondaryColor = defaults?.secondaryColor ?? colors.secondary;
+  const accentColor = defaults?.accentColor ?? colors.accent;
+  const headingFont = defaults?.headingFont ?? await promptHeadingFont();
+  const bodyFont = defaults?.bodyFont ?? await promptBodyFont();
+  const borderRadius = defaults?.borderRadius ?? await promptBorderRadius();
+  const spacingScale = defaults?.spacingScale ?? await promptSpacingScale();
+  return {
+    primaryColor,
+    secondaryColor,
+    accentColor,
+    headingFont,
+    bodyFont,
+    borderRadius,
+    spacingScale
+  };
+}
 
 // src/prompts/auth.ts
 import * as p3 from "@clack/prompts";
@@ -348,6 +482,11 @@ function parseOptions(options) {
     themeColor: options.themeColor,
     accent: options.accent,
     iconLibrary: options.iconLibrary,
+    primaryColor: options.primaryColor,
+    headingFont: options.headingFont,
+    bodyFont: options.bodyFont,
+    borderRadius: options.borderRadius,
+    spacingScale: options.spacingScale,
     authProviders: options.authProviders,
     organizations: options.organizations,
     yes: options.yes,
@@ -391,6 +530,34 @@ async function runPrompts(projectName, rawOptions) {
     menuAccent: options.accent,
     iconLibrary: options.iconLibrary
   });
+  let designSystem;
+  if (structure === "monorepo") {
+    let primaryColorHsl = options.primaryColor;
+    if (primaryColorHsl && colorPresets[primaryColorHsl]) {
+      primaryColorHsl = colorPresets[primaryColorHsl].primary;
+    }
+    designSystem = await promptDesignSystemConfig(
+      {
+        primaryColor: primaryColorHsl,
+        headingFont: options.headingFont,
+        bodyFont: options.bodyFont,
+        borderRadius: options.borderRadius,
+        spacingScale: options.spacingScale
+      },
+      shadcn.themeColor
+    );
+  } else {
+    const colors = colorPresets[shadcn.themeColor] || colorPresets.blue;
+    designSystem = {
+      primaryColor: colors.primary,
+      secondaryColor: colors.secondary,
+      accentColor: colors.accent,
+      headingFont: "dm-sans",
+      bodyFont: "inter",
+      borderRadius: "md",
+      spacingScale: "default"
+    };
+  }
   const auth = await promptAuthConfig({
     providers: options.authProviders !== void 0 ? options.authProviders ? options.authProviders.split(",") : [] : void 0,
     organizations: options.organizations
@@ -408,6 +575,7 @@ async function runPrompts(projectName, rawOptions) {
     marketingSite,
     includeDocs,
     shadcn,
+    designSystem,
     auth,
     integrations,
     targetDir
@@ -433,8 +601,19 @@ function getIconLibraryDisplayName(iconLibrary) {
   };
   return names[iconLibrary];
 }
+function getFontDisplayName(font) {
+  const names = {
+    "inter": "Inter",
+    "dm-sans": "DM Sans",
+    "geist": "Geist",
+    "plus-jakarta": "Plus Jakarta Sans",
+    "outfit": "Outfit",
+    "space-grotesk": "Space Grotesk"
+  };
+  return names[font];
+}
 function showConfigSummary(config) {
-  const apps = ["web"];
+  const apps = ["web", "design-system"];
   if (config.structure === "monorepo") {
     if (config.marketingSite !== "none") {
       apps.push(`marketing (${config.marketingSite})`);
@@ -474,12 +653,13 @@ ${config.structure === "monorepo" ? `${pc.bold("Apps:")} ${apps.join(", ")}
 ` : ""}${pc.bold("Auth:")} ${authProviders.join(", ")}${config.auth.organizations ? " + Organizations" : ""}
 ${pc.bold("UI:")} ${getStyleDisplayName(config)} / ${config.shadcn.themeColor} / ${config.shadcn.menuAccent}
 ${pc.bold("Icons:")} ${getIconLibraryDisplayName(config.shadcn.iconLibrary)}
+${pc.bold("Typography:")} ${getFontDisplayName(config.designSystem.headingFont)} / ${getFontDisplayName(config.designSystem.bodyFont)}
 ${extras.length > 0 ? `${pc.bold("Extras:")} ${extras.join(", ")}` : ""}`,
     "Scaffolding project:"
   );
 }
 async function showConfirmation(config) {
-  const apps = ["web"];
+  const apps = ["web", "design-system"];
   if (config.structure === "monorepo") {
     if (config.marketingSite !== "none") {
       apps.push(`marketing (${config.marketingSite})`);
@@ -519,6 +699,7 @@ ${config.structure === "monorepo" ? `${pc.bold("Apps:")} ${apps.join(", ")}
 ` : ""}${pc.bold("Auth:")} ${authProviders.join(", ")}${config.auth.organizations ? " + Organizations" : ""}
 ${pc.bold("UI:")} ${getStyleDisplayName(config)} / ${config.shadcn.themeColor} / ${config.shadcn.menuAccent}
 ${pc.bold("Icons:")} ${getIconLibraryDisplayName(config.shadcn.iconLibrary)}
+${pc.bold("Typography:")} ${getFontDisplayName(config.designSystem.headingFont)} / ${getFontDisplayName(config.designSystem.bodyFont)}
 ${extras.length > 0 ? `${pc.bold("Extras:")} ${extras.join(", ")}` : ""}`,
     "Ready to scaffold your project:"
   );
@@ -532,7 +713,7 @@ ${extras.length > 0 ? `${pc.bold("Extras:")} ${extras.join(", ")}` : ""}`,
 }
 
 // src/generators/index.ts
-import path18 from "path";
+import path19 from "path";
 import * as p6 from "@clack/prompts";
 import pc2 from "picocolors";
 import ora from "ora";
@@ -1812,7 +1993,7 @@ async function generateConvexPackageJson(convexDir) {
     types: "./convex/index.ts",
     dependencies: {
       convex: "^1.17.0",
-      "@convex-dev/better-auth": "^0.1.0"
+      "@convex-dev/better-auth": "^0.10.0"
     },
     devDependencies: {
       typescript: "^5.0.0"
@@ -2929,33 +3110,6 @@ async function generateSharedConfigs(targetDir) {
     path14.join(targetDir, "packages/config-typescript/package.json"),
     tsConfigPackage
   );
-  await ensureDir(path14.join(targetDir, "packages/config-tailwind"));
-  const tailwindConfig = `import type { Config } from 'tailwindcss'
-
-export default {
-  content: [
-    './src/**/*.{js,ts,jsx,tsx,mdx}',
-    '../../packages/ui/src/**/*.{js,ts,jsx,tsx}',
-  ],
-} satisfies Config
-`;
-  const tailwindPackage = {
-    name: "@repo/config-tailwind",
-    version: "0.1.0",
-    private: true,
-    main: "tailwind.config.ts",
-    devDependencies: {
-      tailwindcss: "^4.0.0"
-    }
-  };
-  await writeFile(
-    path14.join(targetDir, "packages/config-tailwind/tailwind.config.ts"),
-    tailwindConfig
-  );
-  await writeJSON(
-    path14.join(targetDir, "packages/config-tailwind/package.json"),
-    tailwindPackage
-  );
   await ensureDir(path14.join(targetDir, "packages/config-biome"));
   const biomeConfigPackage = {
     name: "@repo/config-biome",
@@ -3027,9 +3181,10 @@ async function generateUIPackage(config, targetDir) {
     include: ["src/**/*"]
   };
   await writeJSON(path14.join(uiDir, "tsconfig.json"), tsConfig);
+  const style = `${config.shadcn.componentLibrary}-${config.shadcn.styleVariant}`;
   const componentsJson = {
     $schema: "https://ui.shadcn.com/schema.json",
-    style: config.shadcn.style,
+    style,
     rsc: false,
     tsx: true,
     tailwind: {
@@ -3038,7 +3193,7 @@ async function generateUIPackage(config, targetDir) {
       baseColor: config.shadcn.baseColor,
       cssVariables: true
     },
-    iconLibrary: "hugeicons",
+    iconLibrary: config.shadcn.iconLibrary,
     aliases: {
       components: "@/components",
       utils: "@/lib/utils",
@@ -3099,7 +3254,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",
@@ -3266,9 +3421,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',
@@ -3309,7 +3472,17 @@ export const Pages: CollectionConfig = {
     {
       name: 'layout',
       type: 'blocks',
-      blocks: [HeroBlock, ContentBlock, CTABlock],
+      blocks: [
+        HeroBlock,
+        LogoBannerBlock,
+        FeaturesBlock,
+        BenefitsBlock,
+        PricingBlock,
+        TestimonialsBlock,
+        FAQBlock,
+        ContentBlock,
+        CTABlock,
+      ],
     },
   ],
 }
@@ -3522,6 +3695,7 @@ async function generatePayloadBlocks(marketingDir) {
 
 export const HeroBlock: Block = {
   slug: 'hero',
+  labels: { singular: 'Hero', plural: 'Heroes' },
   fields: [
     {
       name: 'heading',
@@ -3537,74 +3711,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',
         },
@@ -3615,6 +3957,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'
 `;
@@ -4854,6 +5202,1549 @@ 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/generators/index.ts
 async function generateProject(config) {
   const spinner = ora();
@@ -4894,7 +6785,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, path19.join(targetDir, "convex"));
   spinner.succeed("Convex configured");
   spinner.start("Configuring Better-Auth...");
   await generateBetterAuth(config, targetDir);
@@ -4937,7 +6828,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 = path19.join(targetDir, "apps/web");
   spinner.start("Generating web application...");
   await generateBaseNextjs(config, webDir);
   await generateTailwind(config, webDir);
@@ -4947,10 +6838,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 = path19.join(targetDir, "packages/backend");
   spinner.start("Setting up Convex backend...");
   await ensureDir(backendDir);
-  await generateConvex(config, path18.join(backendDir, "convex"));
+  await generateConvex(config, path19.join(backendDir, "convex"));
   spinner.succeed("Convex backend configured");
   if (config.integrations.analytics !== "none") {
     spinner.start(`Setting up ${config.integrations.analytics} analytics...`);
@@ -4973,7 +6864,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 = path19.join(targetDir, "apps/marketing");
     spinner.start(`Generating ${config.marketingSite} marketing site...`);
     if (config.marketingSite === "payload") {
       await generatePayload(config, marketingDir);
@@ -4985,11 +6876,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 = path19.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) {
@@ -5003,7 +6897,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" ? path19.join(targetDir, "packages/ui") : targetDir;
     await runShadcnAdd(shadcnDir);
     spinner.succeed("shadcn/ui components installed");
   } catch (error) {
@@ -5063,7 +6957,7 @@ async function generateBiomeConfig(targetDir) {
     }
   };
   await writeFile(
-    path18.join(targetDir, "biome.json"),
+    path19.join(targetDir, "biome.json"),
     JSON.stringify(biomeJson, null, 2)
   );
 }
@@ -5114,13 +7008,13 @@ yarn-error.log*
 *.pem
 .cache
 `;
-  await writeFile(path18.join(targetDir, ".gitignore"), gitignoreContent);
+  await writeFile(path19.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(path19.join(targetDir, ".husky"));
+  await writeFile(path19.join(targetDir, ".husky/pre-commit"), preCommitContent);
 }
 async function updateWebTsConfig(webDir) {
   const tsConfig = {
@@ -5134,14 +7028,14 @@ async function updateWebTsConfig(webDir) {
     exclude: ["node_modules"]
   };
   await writeFile(
-    path18.join(webDir, "tsconfig.json"),
+    path19.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(path19.join(marketingDir, "src/app"));
+  await ensureDir(path19.join(marketingDir, "src/components"));
+  await ensureDir(path19.join(marketingDir, "public"));
   const packageJson = {
     name: "@repo/marketing",
     version: "0.1.0",
@@ -5172,7 +7066,7 @@ async function generateNextjsMarketing(config, marketingDir) {
     }
   };
   await writeFile(
-    path18.join(marketingDir, "package.json"),
+    path19.join(marketingDir, "package.json"),
     JSON.stringify(packageJson, null, 2)
   );
   const homePageContent = `export default function HomePage() {
@@ -5195,7 +7089,7 @@ async function generateNextjsMarketing(config, marketingDir) {
 }
 `;
   await writeFile(
-    path18.join(marketingDir, "src/app/page.tsx"),
+    path19.join(marketingDir, "src/app/page.tsx"),
     homePageContent
   );
   const layoutContent = `import type { Metadata } from 'next'
@@ -5219,7 +7113,7 @@ export default function RootLayout({
 }
 `;
   await writeFile(
-    path18.join(marketingDir, "src/app/layout.tsx"),
+    path19.join(marketingDir, "src/app/layout.tsx"),
     layoutContent
   );
   const globalsCss = `@import "tailwindcss";
@@ -5231,7 +7125,7 @@ export default function RootLayout({
 }
 `;
   await writeFile(
-    path18.join(marketingDir, "src/app/globals.css"),
+    path19.join(marketingDir, "src/app/globals.css"),
     globalsCss
   );
   const tsConfig = {
@@ -5245,7 +7139,7 @@ export default function RootLayout({
     exclude: ["node_modules"]
   };
   await writeFile(
-    path18.join(marketingDir, "tsconfig.json"),
+    path19.join(marketingDir, "tsconfig.json"),
     JSON.stringify(tsConfig, null, 2)
   );
   const nextConfig = `import type { NextConfig } from 'next'
@@ -5256,14 +7150,14 @@ const nextConfig: NextConfig = {
 
 export default nextConfig
 `;
-  await writeFile(path18.join(marketingDir, "next.config.ts"), nextConfig);
+  await writeFile(path19.join(marketingDir, "next.config.ts"), nextConfig);
   const postcssConfig = `export default {
   plugins: {
     '@tailwindcss/postcss': {},
   },
 }
 `;
-  await writeFile(path18.join(marketingDir, "postcss.config.mjs"), postcssConfig);
+  await writeFile(path19.join(marketingDir, "postcss.config.mjs"), postcssConfig);
 }
 function displaySuccessMessage(config) {
   const apps = ["web"];
@@ -5274,6 +7168,7 @@ function displaySuccessMessage(config) {
     if (config.includeDocs) {
       apps.push("docs");
     }
+    apps.push("design-system");
   }
   console.log();
   p6.outro(pc2.green("Project created successfully!"));