> ## 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

> Customize your entire Brandbook instantly

The **Brandbook** is powered by a robust variable system. Variables control colors, typography, spacing, shadows, and even text strings — allowing you to customize the entire document in seconds. Instead of editing each component manually, you simply adjust the variables and see changes cascade across the whole file.

## Collections Overview

The file includes several variable collections, each serving a different purpose:

### 1. Onboarding Info

* **String variables** that store client/studio information.
* Propagates automatically through the entire document.

<Note>Example: update client name once, and it changes everywhere.</Note>

### 2. Proposals

* A dedicated collection for **proposal design variations**.
* Contains **string variables for typography** and **color variables**.
* Each **mode = one proposal** (3 in total).

<Note>Switch between proposals in the “Appearance” panel in one click to preview different styles.</Note>

### 3. Primitives

* Foundation layer of the system (desktop & mobile modes).
* Groups:
  * **Size**
  * **Column-width**
  * **Font-size**

<Note>Connect directly to typography styles and layout components.</Note>

### 4. Spacing

* Defines all spacing rules across the document.
* Groups include:
  * Document-width
  * Document-height
  * Padding-horizontal
  * Padding-vertical
  * Space
  * Card-padding
  * Grid-gap

### 5. Theme

* Where each brand’s look & feel is defined.
* Groups:
  * **Colors** (with *light* and *dark* sub-groups → base \[neutrals, accent, card] + shadow colors).
  * **Font** (numeric variables for font families & weights).
  * **Radius** (numeric).
  * **Border-width** (numeric).
  * **Shadow** (numeric variables that map to shadow effects: 2xs, xs, sm, md, lg, xl).

<Note>Modes: **Client** and **Your Brand** → switch between brand palettes instantly.</Note>

### 6. Mode

* Handles **light/dark mode** switching.
* Groups mirror those in *Theme* (base + shadow).
* Connects directly to the Theme variables with the same names.
* Modes: **Light** and **Dark** → toggle without losing brand palettes.

## How Variables Work

### Proposals

* Contain compact sets of variables (typography + color).
* Each mode = one proposal design → lets you swap brand proposals with a single click.

### Colors

* Managed in *Theme* (per brand).
* Divided into Light/Dark groups.
* Connected to *Mode*, enabling instant light/dark switching while keeping brand palettes intact.

### Typography

* *Primitives → font-size* and *Theme → font-family & font-weight* connect to typography styles.
* Typography styles then feed into components like headings and body text.

### Shadows

* *Theme → numeric shadow variables* connect to shadow fields (x, y, blur, offset).
* *Theme → shadow color variables* connect to shadow styles (2xs → xl).

## Editing Variables

* **Use the editor whenever possible** → it lets you adjust variables visually and preview combinations (colors, typography, sizing, radius, shadow) across the different components in seconds.
* Variables can also be edited manually in Figma.

## Best Practices

* **Never unlink Mode variables from their Theme tokens.** This breaks the Light/Dark switching system.
* **Don’t apply Theme modes to individual components.** Always apply them at the outermost layer (entire slide or page) to visualize changes instantly.
* **Always use the correct variable type.**
  * Example: don’t apply a background variable to text or a text color variable to backgrounds.
* **Keep changes at the variable level.** Direct edits to components will break consistency.
* **Check color contrasts.** When customizing palettes, ensure accessibility and balance are preserved.

## Next Steps

* [Theming](/brand-book/theming) → Learn how to define and manage brand palettes, shadows, and typography.
* [Typography](/brand-book/typography) → Explore how variable-based type styles flow into components.
* [Light/Dark Mode](/brand-book/light-dark-mode) → See how to toggle between themes without losing brand consistency.