# How the Foundation Build Phase Sets Up Fonts, Colors, and Global CSS in AI Website Cloner

> Discover how the foundation build phase in JCodesMore/ai-website-cloner-template sets up fonts, colors, and global CSS using CSS variables, OKLCH tokens, and Tailwind for a solid visual base.

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

---

**The foundation build phase establishes the visual baseline by loading Google Fonts as CSS variables in [`layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/layout.tsx), declaring OKLCH color tokens in [`globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/globals.css), and applying global Tailwind utilities through an `@layer base` rule.**

The foundation build phase in the **ai-website-cloner-template** repository creates a consistent design system before any components render. This initialization sequence configures typography, color schemes, and global styles that propagate throughout the entire application using Next.js font optimization and Tailwind CSS theming.

## Font Initialization in the Foundation Build Phase

The foundation build phase begins by loading the **Geist** font family through Next.js built-in font optimization.

### Loading Geist Fonts via next/font/google

In [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx), the template imports `Geist` and `Geist_Mono` from `next/font/google` and configures them as CSS variables:

```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"],
});

```

The `variable` option exposes each font as a CSS custom property. These variables attach to the HTML element through the class list:

```tsx
<html className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}>

```

This approach makes the fonts globally available without requiring manual `@font-face` declarations.

## Design Token Architecture for Colors and Spacing

The foundation build phase declares a comprehensive design system using CSS variables in [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css).

### Declaring OKLCH Color Variables

The file defines tokens inside a `@theme inline` block that maps high-level properties to concrete values. The `:root` selector supplies perceptually uniform **OKLCH** color values:

```css
@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, monospace;
  /* …additional tokens… */
}

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  /* …more color definitions… */
}

```

### Dark Mode Configuration

The foundation build phase supports dark mode through a `.dark` class selector that overrides the CSS variables:

```css
.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  /* …dark theme overrides… */
}

```

Toggling the `dark` class on the `<html>` element switches the entire color palette without reloading fonts or re-rendering components.

## Applying Global CSS Utilities

After importing Tailwind, `tw-animate-css`, and Shadcn UI styles, the foundation build phase applies these tokens globally.

### The @layer Base Rule

The `@layer base` block in [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) ties design tokens to HTML elements:

```css
@layer base {
  * { @apply border-border outline-ring/50; }
  body { @apply bg-background text-foreground; }
  html { @apply font-sans; }
}

```

- **`bg-background`** and **`text-foreground`** reference the CSS variables defined in the `:root` block
- **`font-sans`** resolves to the Geist font family loaded in the layout
- **`border-border`** applies consistent border coloring across all elements

This ensures every component inherits the foundation's typography and color scheme by default.

## Practical Implementation Examples

### Using Global Fonts in Components

Components automatically inherit the sans-serif font without explicit imports:

```tsx
export function Header() {
  return (
    <header className="flex items-center gap-4 p-4">
      <h1 className="text-2xl font-bold">My Clone</h1>
      {/* The font is already applied via the global "font-sans" rule */}
    </header>
  );
}

```

### Referencing Color Tokens in Tailwind

Access the foundation's color palette through Tailwind utility classes:

```tsx
<div className="bg-primary text-primary-foreground p-4 rounded-lg">
  Primary-themed card
</div>

```

`bg-primary` and `text-primary-foreground` resolve to the CSS variables defined in the foundation build phase.

### Switching to Dark Mode

Programmatically toggle the dark theme using the injected CSS variables:

```tsx
<button
  onClick={() => document.documentElement.classList.toggle('dark')}
  className="px-4 py-2 bg-muted text-foreground"
>
  Toggle Dark
</button>

```

## Summary

- **Font Loading**: The foundation build phase loads Geist and Geist Mono via `next/font/google` in [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx), exposing them as CSS variables `--font-geist-sans` and `--font-geist-mono`.
- **Token Declaration**: [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css) declares design tokens using OKLCH color format in a `@theme inline` block, with concrete values stored in `:root` and `.dark` selectors.
- **Global Application**: The `@layer base` rule applies these tokens to the `html` and `body` elements, ensuring consistent typography, backgrounds, and text colors across the application.
- **Dark Mode Support**: The foundation toggles between light and dark themes by switching CSS variable values through the `.dark` class on the document root.

## Frequently Asked Questions

### What font families does the foundation build phase configure?

The foundation build phase configures **Geist** for sans-serif text and **Geist Mono** for monospace text. These load from Google Fonts via `next/font/google` in [`src/app/layout.tsx`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/layout.tsx) and expose as CSS variables `--font-geist-sans` and `--font-geist-mono`.

### Why does the template use OKLCH instead of Hex or RGB?

The foundation build phase uses **OKLCH** (Oklab Lightness Chroma Hue) for perceptual uniformity. Unlike Hex or RGB, OKLCH maintains consistent perceived brightness across different hues, ensuring the color palette remains visually balanced when switching between light and dark modes.

### How does the foundation build phase support dark mode?

The foundation defines color variables in both `:root` (light mode) and `.dark` (dark mode) selectors within [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css). Toggling the `dark` class on the `<html>` element switches all CSS variable values simultaneously, instantly updating the background, foreground, and accent colors without JavaScript re-renders.

### Where are the global CSS variables actually applied to DOM elements?

The global CSS variables apply through the `@layer base` rule in [`src/app/globals.css`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/src/app/globals.css). Specifically, the `html` element receives `font-sans` (pointing to Geist), while the `body` element receives `bg-background` and `text-foreground` (pointing to the OKLCH color variables). This ensures the foundation styles propagate to every component in the tree.