Multi-Brand Token Architecture

Created a sophisticated token system with clear separation of concerns:

{
  "brand": {
    "primary": "#0066CC",    //Airlines primary brand color
    "secondary": "#FF6B35",  //Airlines accent color
    "neutral": "#2D3748"     //Airlines neutral palette
  },
  "semantic": {
    "action": "{brand.primary}",
    "surface": "{brand.neutral}",
    "accent": "{brand.secondary}"
  },
  "component": {
    "button-background": "{semantic.action}",
    "card-surface": "{semantic.surface}"

Figma Variables & Modes Implementation

Built the design system in Figma using Variables and Modes:

9+ Theme Modes:

• Light and dark variants for each airline

• High-contrast accessibility modes

• Preview mode for stakeholder presentations

Variable Collections:

• Colors: Brand palette, semantic colors, component colors

• Typography: Scale, weights, line-heights

• Spacing: 8px base grid with consistent increments

• Borders: Radii, widths, styles

  
  

  Mode Switching: Designers toggle between airline brands instantly to validate cross-brand consistency

  

Component Design Patterns

Every component built with multi-brand support from the start:

Button example:

• Structure identical across brands

• Colors reference semantic tokens

• Hover/active states use brand-relative calculations

• Accessibility (contrast ratios) validated per brand

  
  

Card example:

• Layout system brand-agnostic

• Surface colors map to brand tokens

• Borders and shadows scale with brand intensity

• Typography follows brand type scale

Build Pipeline & Tooling

Created automated tooling to maintain brand-code alignment:

Style Dictionary transformation:

// Token transformation pipeline
StyleDictionary.extend({
  source: ['tokens/brands/**/*.json'],
  platforms: {
    scss: {
      transformGroup: 'scss',
      buildPath: 'build/scss/',
      files: [{
        destination: '_variables.scss',
        format: 'scss/variables'
      }]
    }
  }
});

CI/CD validation:

• Automated contrast ratio checking per brand

• Visual regression tests across all brand modes

• Token naming convention enforcement

• Breaking change detection

  
  

Technical Implementation

Architecture Decisions

Why Figma Variables over separate files:

• Single source of truth for designers

• Mode switching shows brand impact immediately

• Variables export to tokens automatically

• Easier maintenance than managing 9+ separate Figma files

Why three-tier token hierarchy:

• Brand tier: Makes adding new airlines trivial (just define brand palette)

• Semantic tier: Provides meaning and context

• Component tier: Isolates component-specific decisions

Why Style Dictionary:

• Transforms tokens to multiple formats (SCSS, CSS, JS)

• Validates token references at build time

• Platform-agnostic output

• Supports complex transformations

  
  

Brand Implementation Pattern

Adding a new airline brand follows this process:

1. Receive brand guidelines (colors, typography, logos)

2. Define brand tokens in Figma Variables

3. Create mode for the new airline

4. Validate components across all screens

5. Export tokens via Figma plugin

6. Transform to code via Style Dictionary

7. Deploy - new brand live without code changes

Time: 3 days vs. 3 weeks previously

Example: Button Component

// Brand tokens (airline-specific)
$brand-primary-airline-a: #0066CC;
$brand-primary-airline-b: #E21836;

// Semantic tokens
$action-primary: var(--brand-primary);

// Component tokens
.button {
  background: var(--action-primary);
  color: var(--action-contrast);
  border-radius: var(--radius-medium);
  padding: var(--spacing-2) var(--spacing-4);
  
  &:hover {
    background: var(--action-primary-hover);
  }
}

Same component, different brand token values = unique airline identity.