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

# Variables

> Master the design tokens that power your Shadcn UI Kit

Variables are the heart of the **Orbital Shadcn UI Kit**. They control every aspect of your design system, from colors and spacing to radius and typography.

## Collections Overview

The kit includes **six core variable collections**:

1. **Onboarding Info**: Meta-data about your project setup.
2. **Spacing**: A comprehensive spacing scale based on Tailwind CSS (0.5, 1, 2, 4, etc.).
3. **Theme**: Semantic colors (Primary, Secondary, Destructive, Muted, Accent).
4. **Mode**: Light and Dark mode value definitions.
5. **Tailwind CSS**: The raw color palette (Slate, Gray, Zinc, Neutral, Stone, Red, Orange, etc.).
6. **Typography**: Font families, weights, and size scales.

## Customizing Your Theme

To change your brand color:

1. Open the **Variables** modal.
2. Select the **Theme** collection.
3. Locate the `Primary` variable group.
4. Change the value of `DEFAULT` to your brand's hex code.
5. The `foreground` color will automatically adjust if you are using contrast-based plugins, or you can manually set it to ensure readability.

## Radius and Spacing

* **Radius**: The kit uses a semantic radius system (`radius-sm`, `radius-md`, `radius-lg`). Change the `radius` variable to update button and card rounded corners globally.
* **Spacing**: Consistent padding and margins are maintained using the spacing collection.

<Tip>
  Use the **Mode** collection to toggle between Light and Dark themes instantly. Every component is linked to these variables, ensuring a perfect transition.
</Tip>