> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Styling

> Customize your project's global styles, including colors and fonts.

Sabo uses **Tailwind CSS v4** for styling. This guide covers how to customize the core elements of your project's visual theme: the color palette and typography.

All global style variables are defined in `src/app/globals.css`.

## Color Palette

The project uses a CSS variable-based color system, inspired by shadcn/ui. This makes it easy to apply your own brand colors across all components.

<Tip icon="paintbrush-vertical">
  **Easily Generate a New Theme**

  Instead of manually editing CSS variables, you can use a visual tool like [tweakcn](https://tweakcn.com/) to generate a complete theme for your `shadcn/ui` components.

  Simply use the color pickers on the site to create your theme, then copy the generated CSS code and paste it into your `src/app/globals.css` file, replacing the existing `:root` and `.dark` blocks.
</Tip>

<Steps>
  <Step title="Understand the Color Variables">
    Open `src/app/globals.css`. You'll find two main color blocks: `:root` for the light theme and `.dark` for the dark theme.

    Key variables to change are:

    * `--background`: The main page background color.
    * `--foreground`: The main text color.
    * `--primary`: The primary color for interactive elements like buttons.
    * `--primary-foreground`: The text color used on top of primary elements.
    * `--secondary`: A secondary color for less prominent elements.
    * `--accent`: A color for highlighted or active elements.
    * `--destructive`: A color for dangerous actions, like delete buttons.
    * `--border`: The color for borders and dividers.

    ```css src/app/globals.css theme={null}
    :root {
      --background: oklch(1 0 0);       /* White */
      --foreground: oklch(0.145 0 0);  /* Almost Black */
      --primary: oklch(0.205 0 0);     /* Dark Gray */
      --primary-foreground: oklch(0.985 0 0); /* Light Gray */
      /* ... and more */
    }

    .dark {
      --background: oklch(0.145 0 0);  /* Almost Black */
      --foreground: oklch(0.985 0 0);  /* Light Gray */
      --primary: oklch(0.922 0 0);     /* Light Gray */
      --primary-foreground: oklch(0.205 0 0); /* Dark Gray */
      /* ... and more */
    }
    ```

    <Info>
      The colors are defined using `oklch()`, a modern CSS color function that allows for intuitive adjustments. You can use online tools like [Oklch Color Converter](https://oklch.com/) to find the `oklch` values for your brand's hex codes.

      **Alternatively, you can use standard hex codes directly.** The following examples will use hex codes for simplicity.
    </Info>
  </Step>

  <Step title="Change the Primary Color">
    While the boilerplate uses `oklch()` for its benefits in theme modification, you can simply use standard hex codes.

    Let's say your brand's primary color is a blue, like `#3b82f6`. You can update the `--primary` variable directly with this value. Remember to also choose a readable foreground color (like `#ffffff` for white).

    ```css src/app/globals.css theme={null}
    :root {
      --primary: #3b82f6; /* Your new blue */
      --primary-foreground: #ffffff; /* White text */
      /* ... */
    }

    /* You might want a different primary color for dark mode */
    .dark {
      --primary: #60a5fa; /* A lighter blue for dark backgrounds */
      --primary-foreground: #020817; /* Dark text */
      /* ... */
    }
    ```
  </Step>

  <Step title="See Your Changes Apply Globally">
    The true power of this system is its global reach. A single change to a color variable in `globals.css` cascades throughout your entire application, ensuring brand consistency.

    This works because components are built using Tailwind's utility classes (like `bg-primary`), which are linked to your color variables.

    Let's look at the **`<Button>` component as a specific example**. Inside `src/components/ui/button.tsx`, you can see its default style is defined using `bg-primary`:

    ```tsx src/components/ui/button.tsx theme={null}
    const buttonVariants = cva(
      // ...
      {
        variants: {
          variant: {
            default: "bg-primary text-primary-foreground hover:bg-primary/90",
            // ... other variants
          },
        },
      }
    );
    ```

    This means when you use the `<Button>`, it automatically reflects your changes.

    <Check>
      Your new brand colors will be reflected not just on buttons, but consistently across many other components like toggles, badges, and input fields.
    </Check>
  </Step>
</Steps>

## Typography

Fonts are managed using `next/font` for optimal performance. The default fonts are Geist Sans and Geist Mono.

<Steps>
  <Step title="Find the Font Configuration">
    Font settings are located in `src/app/layout.tsx`.

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

    const geistSans = Geist({
      variable: "--font-geist-sans",
      subsets: ["latin"],
    });
    // ...
    ```
  </Step>

  <Step title="Update the Font">
    To change the font, simply import a new one from `next/font/google` and assign it to the `--font-geist-sans` variable.

    ```tsx src/app/layout.tsx theme={null}
    import { Inter, Geist_Mono } from "next/font/google"; // 1. Change import

    // 2. Configure the new font and assign to the same variable
    const inter = Inter({
      variable: "--font-geist-sans",
      subsets: ["latin"],
    });

    // 3. Apply the new font's variable to the body className
    <body className={`${inter.variable} ${geistMono.variable} antialiased`}>
    ```
  </Step>
</Steps>

<Accordion title="Why does this work? Understanding the Font System">
  The system is built on a three-step connection. By reassigning the `--font-geist-sans` variable, you only change the "source" font, and the rest updates automatically.

  1. **Tailwind Class (`font-sans`)**: Applied in your `.tsx` components.
  2. **CSS Variable (`--font-geist-sans`)**: Acts as a bridge, linked to `font-sans` in `globals.css`.
  3. **Font File (e.g., `Inter`)**: The actual font assigned to the variable in `layout.tsx`. This is the only part you change.
</Accordion>