Skip to main content

Multi-Brand Themes Tutorial

Learn how to use Git branches to manage multiple brand themes in the same design system.

Time: 15 minutes Difficulty: Intermediate

The Challenge​

You need to maintain multiple brand themes:

  • Brand A - Blue primary, rounded corners
  • Brand B - Green primary, sharp corners
  • Brand C - Purple primary, soft shadows

The Solution: Branch Per Theme​

Use Git branches to store different token values:

main (base tokens)
├── theme/brand-a
├── theme/brand-b
└── theme/brand-c

Step 1: Set Up Base Tokens​

On main branch, create your base token structure:

{
  "brand": {
    "primary": { "$value": "#000000", "$type": "color" },
    "secondary": { "$value": "#666666", "$type": "color" }
  },
  "radius": {
    "sm": { "$value": 4, "$type": "number" },
    "md": { "$value": 8, "$type": "number" }
  }
}

Step 2: Create Theme Branches​

In GitFig:

  1. Click branch selector
  2. Click "Create new branch"
  3. Name it theme/brand-a
  4. Repeat for brand-b and brand-c

Step 3: Customize Each Theme​

Switch to Brand A​

  1. Select theme/brand-a branch
  2. Pull tokens
  3. Modify variables:
    • brand/primary → #0066FF
    • radius/sm → 8
  4. Push with message "Brand A: Blue theme"

Switch to Brand B​

  1. Select theme/brand-b branch
  2. Pull tokens
  3. Modify variables:
    • brand/primary → #00AA55
    • radius/sm → 0
  4. Push with message "Brand B: Green theme"

Step 4: Switch Between Themes​

To preview different themes:

  1. Click branch selector
  2. Choose desired theme branch
  3. Pull to load those token values
  4. Your designs update automatically

Best Practices​

  • Keep main as the neutral base
  • Name branches consistently (theme/name)
  • Document theme differences in commit messages
  • Use PRs to review theme changes