# How the Foundation Build Phase Sets Up Global Styling in the AI Website Cloner Template

> Discover how the Foundation Build phase in the AI Website Cloner Template sets up global styling by configuring Google Geist font and design tokens in layout.tsx and globals.css.

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

---

**The Foundation Build phase establishes global styling by updating [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx) with Google Geist font variables and configuring design tokens in [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) through CSS custom properties and Tailwind base layers.**

The Foundation Build represents Phase 2 of the cloning workflow in the **ai-website-cloner-template** repository. During this phase, the system prepares the visual groundwork before generating page-specific components. This article examines exactly how the template implements site-wide aesthetics by modifying two critical files in the Next.js application root.

## What Is the Foundation Build Phase?

According to the workflow definition in [`.windsurf/workflows/clone-website.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.windsurf/workflows/clone-website.md), the Foundation Build step instructs developers to *"Update globals.css with the target's color tokens, spacing values, keyframe animations, utility classes, and any global scroll behaviors."* This phase runs after the initial repository setup but before component generation, ensuring that every subsequent UI element inherits consistent typography, color palettes, and spacing scales.

The implementation focuses on two primary touchpoints:

1. **Font configuration** via the root layout
2. **Design tokens and base styles** via the global stylesheet

## Step 1: Configuring Global Fonts in layout.tsx

The [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx) file serves as the root layout for the Next.js application. During the Foundation Build, this file imports Google’s **Geist** and **Geist_Mono** fonts and exposes them as CSS variables.

The font functions generate CSS custom properties (`--font-geist-sans` and `--font-geist-mono`) that are applied to the `<html>` element:

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

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

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

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html className={`${geistSans.variable} ${geistMono.variable}`}>
      <body>{children}</body>
    </html>
  );
}

```

By updating the font configuration here, the cloned site matches the exact typefaces of the target page. The CSS variables enable Tailwind to reference these fonts throughout the component tree via the `font-sans` and `font-mono` utilities.

## Step 2: Defining Design Tokens in globals.css

The [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) file contains the core styling architecture. The Foundation Build phase populates this file with Tailwind directives, custom variants, and a comprehensive set of CSS custom properties.

### Tailwind Imports and Layers

The file begins with essential imports for the Tailwind CSS framework, animation libraries, and Shadcn UI integration:

```css
/* src/app/globals.css */
@import "tailwindcss";
@import "tw-animate-css";
@layer base, components, utilities;

```

### CSS Custom Properties for Theming

Design tokens are declared within `:root` for light mode and `.dark` for dark mode. These variables define color palettes using the **oklch** color space, border radii, and spacing values:

```css
:root {
  --color-background: oklch(1 0 0);
  --color-foreground: oklch(0.145 0 0);
  --color-primary: oklch(0.205 0 0);
  --radius: 0.625rem;
  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui;
  --font-mono: var(--font-geist-mono), ui-monospace, monospace;
}

.dark {
  --color-background: oklch(0.145 0 0);
  --color-foreground: oklch(0.985 0 0);
}

```

These tokens integrate with the `cn()` utility function used throughout the component library, enabling dynamic class merging based on the current theme.

### Base Layer Normalization

The `@layer base` block establishes global defaults for all elements. This guarantees a consistent baseline before component-specific styles are applied:

```css
@layer base {
  * {
    border-color: var(--color-border);
  }
  
  html {
    color-scheme: light dark;
  }
  
  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
  }
}

```

## Step 3: Adding Custom Utilities and Scroll Behaviors

The Foundation Build phase also accommodates global interactions. Developers can extend the utility layer with scroll behaviors and keyframe animations that match the target website’s user experience.

### Native Smooth Scrolling

To enable site-wide smooth scrolling, add the property to the HTML element:

```css
/* src/app/globals.css */
html {
  scroll-behavior: smooth;
}

```

### Tailwind Utility Extensions

For reusable scroll patterns, define custom utilities within the Tailwind layer:

```css
@layer utilities {
  .scroll-snap-y {
    scroll-snap-type: y mandatory;
  }
  
  .scroll-snap-start {
    scroll-snap-align: start;
  }
}

```

Apply these utilities to container components:

```jsx
<div className="h-screen overflow-y-scroll scroll-snap-y">
  <section className="scroll-snap-start h-screen">Slide 1</section>
  <section className="scroll-snap-start h-screen">Slide 2</section>
</div>

```

### Adding Brand-Specific Tokens

When the target site uses unique accent colors, declare them as custom properties:

```css
:root {
  --brand-accent: oklch(0.45 0.25 260);
  --brand-accent-foreground: oklch(0.985 0 0);
}

```

Reference these tokens in components using standard Tailwind arbitrary value syntax or by extending the theme configuration.

## Summary

- **The Foundation Build phase** configures global styling by editing [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx) and [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) before component generation begins.
- **Font variables** are established in the root layout using Next.js font optimization, exposing `--font-geist-sans` and `--font-geist-mono` to the entire application.
- **Design tokens** are defined as CSS custom properties in [`globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/globals.css), supporting both light and dark modes through `:root` and `.dark` selectors.
- **Base styles** are applied via the `@layer base` directive, ensuring consistent borders, backgrounds, and typography across all elements.
- **Custom utilities** for scroll behavior and animations extend Tailwind’s default set, matching the target site’s interaction patterns.

## Frequently Asked Questions

### Where are font configurations stored in the AI Website Cloner Template?

Font configurations reside in [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx). The file imports `Geist` and `Geist_Mono` from `next/font/google`, initializes them with CSS variable names, and applies those variables to the `<html>` element’s class list. This approach ensures the cloned website uses the same typefaces as the target page while benefiting from Next.js automatic font optimization.

### How does globals.css handle dark mode theming?

The [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) file defines two selector blocks: `:root` for light mode variables and `.dark` for dark mode variants. Each block declares identical custom property names (such as `--color-background` and `--color-foreground`) with different oklch color values. The application toggles these modes by adding or removing the `.dark` class on the HTML element, causing all components referencing these variables to update instantly.

### What is the purpose of the @layer base directive in globals.css?

The `@layer base` directive establishes foundational styles that apply to all HTML elements before component-specific CSS takes effect. In the AI Website Cloner Template, this layer sets global border colors, background colors, text colors, and font families using CSS custom properties. This ensures visual consistency across browsers and provides a standardized canvas for the Shadcn UI component library.

### Can I add custom scroll behaviors during the Foundation Build phase?

Yes. The workflow explicitly mentions adding *"global scroll behaviors"* as part of the Foundation Build tasks. You can implement these by adding `scroll-behavior: smooth` to the `html` selector in [`globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/globals.css), or by creating custom utilities within `@layer utilities` for advanced patterns like scroll-snapping. These definitions integrate with Tailwind’s utility class system and apply site-wide.