Skip to main content
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.
Example: update client name once, and it changes everywhere.

​
2. Proposals

  • A dedicated collection for proposal design variations.
  • Contains string variables for typography and color variables.
  • Each mode = one proposal (3 in total).
Switch between proposals in the “Appearance” panel in one click to preview different styles.

​
3. Primitives

  • Foundation layer of the system (desktop & mobile modes).
  • Groups:
    • Size
    • Column-width
    • Font-size
Connect directly to typography styles and layout components.

​
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).
Modes: Client and Your Brand → switch between brand palettes instantly.

​
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 → Learn how to define and manage brand palettes, shadows, and typography.
  • Typography → Explore how variable-based type styles flow into components.
  • Light/Dark Mode → See how to toggle between themes without losing brand consistency.