How the Foundation Phase Updates Fonts, Colors, and Globals in the AI Website Cloner Template

The Foundation phase programmatically extracts the target website's visual design tokens and writes them into src/app/layout.tsx for fonts and src/app/globals.css for colors, spacing, and global CSS utilities, establishing the project's core visual language before any components are built.

The Foundation phase in the JCodesMore/ai-website-cloner-template repository serves as the critical bridge between raw site inspection and component generation. This sequential stage programmatically updates the project's foundational styles by detecting design tokens from the target site and injecting them into Next.js layout files and global CSS.

What the Foundation Phase Configures

The Foundation phase creates the project's core visual language through three sequential operations:

• Fonts: Detects font families from the target site and registers them via Next.js font optimization in layout.tsx
• Colors: Extracts the complete color palette and writes CSS custom properties to globals.css
• Globals: Adds spacing tokens, keyframe animations, and scroll-behavior utilities to the global stylesheet

These steps are non-negotiable prerequisites—nothing can be built until the foundation exists, as documented in the repository's workflow configuration.

How Fonts Are Updated in layout.tsx

The font update process involves extracting fontFamily values from the target site and configuring them using Next.js's built-in font optimization system.

The detected fonts are imported from next/font/google (or next/font/local for self-hosted fonts) and configured with CSS variables:

// src/app/layout.tsx
import { Geist, Geist_Mono } from "next/font/google";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
  weight: ["400", "500", "700"],   // Detected weights from target
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

These variables are then applied to the HTML element:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html
      lang="en"
      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
    >
      <body className="min-h-full flex flex-col">{children}</body>
    </html>
  );
}

Tailwind's font-sans and font-mono utilities automatically reference these CSS variables, making the typography system available across the entire application.

How Colors Are Updated in globals.css

The color extraction process computes every color and backgroundColor value from the target site and maps them to CSS custom properties in src/app/globals.css.

The system writes these values into :root for light mode and .dark for dark mode, aligning them with Shadcn UI token names where possible:

/* src/app/globals.css */
:root {
  --color-primary: #0d6efd;          /* Extracted primary */
  --color-muted: #6c757d;            /* Extracted muted */
  --color-background: #ffffff;
  --color-foreground: #212529;
}

/* Dark mode overrides */
.dark {
  --color-primary: #0d6efd;
  --color-background: #212529;
  --color-foreground: #f8f9fa;
}

/* Shadcn UI token aliases */
.bg-primary { background-color: var(--color-primary); }
.text-primary { color: var(--color-primary); }

Unmatched colors become custom properties while standard tokens map directly to Shadcn's design system, ensuring compatibility with the component library.

How Global CSS and Utilities Are Updated

Beyond colors and fonts, the Foundation phase injects additional global styles into globals.css:

• Spacing tokens: Tailwind-compatible custom properties (--spacing-1, --spacing-2) derived from the target's spacing system
• Keyframe animations: Site-wide animations (fade-in, slide-up) copied verbatim into @keyframes blocks
• Scroll utilities: Detection of libraries like Lenis or Locomotive Scroll triggers the addition of helper classes (.lenis, .smooth-scroll) and CSS resets

These additions ensure that every component can reference consistent spacing, animation, and behavior utilities without additional imports.

The Foundation Phase Workflow Sequence

The Foundation phase executes as Phase 2 of the cloning pipeline, following the initial Reconnaissance stage:

1. Run /clone-website skill → Phase 1 gathers screenshots and design tokens
2. Phase 2: Foundation Build (executed by the orchestrating agent):
   • Update fonts in src/app/layout.tsx with detected families
   • Populate src/app/globals.css with color tokens, spacing values, and animations
   • Generate TypeScript interfaces for content structures
   • Download global assets (fonts, favicons)
   • Verify build integrity with npm run build

According to the workflow documentation in .windsurf/workflows/clone-website.md, this phase must complete successfully before the pipeline proceeds to component specification and parallel building.

Summary

• The Foundation phase updates fonts by configuring Next.js font imports in src/app/layout.tsx with CSS variables that Tailwind references via font-sans and font-mono
• Colors are extracted from the target site and written as CSS custom properties in src/app/globals.css, mapped to Shadcn UI tokens where possible
• Global CSS updates include spacing tokens, keyframe animations, and scroll-behavior utilities in the same stylesheet
• This phase is sequential and mandatory—no components are built until the foundation files are verified through npm run build
• The process ensures every generated component inherits the exact visual language of the target site from the start

Frequently Asked Questions

Where does the Foundation phase store the extracted font configurations?

The Foundation phase writes font configurations to src/app/layout.tsx, importing detected families from next/font/google or next/font/local, assigning them to CSS variables (e.g., --font-geist-sans), and applying these variables to the HTML element's className. This makes the fonts available globally through Tailwind's font utilities.

How does the Foundation phase handle dark mode colors?

The phase writes light mode color tokens to the :root selector and dark mode overrides to the .dark class in src/app/globals.css. Extracted colors are mapped to semantic names like --color-background and --color-foreground, ensuring the application supports theme switching immediately.

What happens if the target site uses custom scroll behaviors?

If the extraction script detects libraries like Lenis or Locomotive Scroll, or identifies smooth-scroll CSS patterns, the Foundation phase adds corresponding utility classes (such as .lenis or .smooth-scroll) and necessary CSS resets directly to src/app/globals.css, making these behaviors available application-wide.

Can the Foundation phase be skipped or run out of order?

No. According to the repository's workflow documentation in .windsurf/workflows/clone-website.md, the Foundation phase is sequential and non-negotiable. The pipeline explicitly requires this phase to complete and pass a build verification (npm run build) before proceeding to component generation, ensuring visual consistency across all subsequent output.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}