> ## Documentation Index > Fetch the complete documentation index at: https://docs.builderbox.ai/llms.txt > Use this file to discover all available pages before exploring further. # Global Styles & Theming Overview This guide gives you the essentials on how global styles and themes work in the **Ultimate Cursor AI Boilerplate**. We keep things simple, modern, and fully customizable. *** ## 🎯 Why `index.css` Exists Our `index.css` file: * Sets up **base styles** (font, spacing, resets) * Defines **design tokens** (colors, radii, fonts) as CSS variables * Enables **dark mode** with one toggle * Supports **custom animations** (like marquees) * Powers all Tailwind utility classes *** ## 🔧 How It Works (Core Concepts) ### 1. Tailwind + Custom Layers We start by importing the basics: ```css theme={null} @import "tailwindcss"; @import "tw-animate-css"; /* optional animations */ ``` *** ### 2. CSS Variables (Design Tokens) Global theme variables live under `:root`, like: ```css theme={null} :root { --background: oklch(1 0 0); --foreground: oklch(0.27 0 0); --primary: oklch(0.76 0.16 70); --radius: 6px; --font-sans: Inter, sans-serif; . . } ``` Then they’re reused like: ```css theme={null} body { background: var(--background); color: var(--foreground); font-family: var(--font-sans); } ``` or ```tsx theme={null}