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

> Discover how the Foundation phase updates fonts, colors, and globals in the AI Website Cloner Template. Learn how visual design tokens establish the project's core look and feel.

- Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
- Tags: internals
- Published: 2026-07-04

---

**The Foundation phase programmatically extracts the target website's visual design tokens and writes them into [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx) for fonts and [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/layout.tsx)
- **Colors**: Extracts the complete color palette and writes CSS custom properties to [`globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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:

```tsx
// 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:

```tsx
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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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:

```css
/* 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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx) with detected families
   - Populate [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/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`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.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.