Skip to main content
Guidelines and best practices for designing co-branded user interfaces in CreatorCommerce.

​
Overview

Co-branded UI in CreatorCommerce allows creators to customize the look and feel of their storefronts while maintaining brand consistency. This guide covers design principles and patterns for creating effective co-branded interfaces.

​
Design Principles

​
Brand Flexibility

  • Design components that can adapt to different brand colors
  • Use CSS variables for themeable properties
  • Ensure contrast and accessibility across brand variations

​
Creator Identity

  • Allow creators to showcase their unique brand
  • Provide customization options for key visual elements
  • Maintain professional appearance across all brand variations

​
Consistency

  • Keep core functionality consistent across brand variations
  • Maintain usability patterns regardless of branding
  • Ensure responsive design works with all brand themes

​
Design Patterns

​
Color Systems

Design with a flexible color system that supports:
  • Primary brand colors
  • Secondary accent colors
  • Neutral backgrounds and text
  • Accessible contrast ratios

​
Typography

  • Support custom fonts while maintaining readability
  • Provide fallback font stacks
  • Ensure text scales appropriately across devices

​
Components

Design reusable components that:
  • Accept theme variables
  • Maintain functionality across themes
  • Provide clear visual hierarchy

​
Using Figma MCP

When designing co-branded UI with Figma:
  1. Use Figma variables for brand colors
  2. Create component variants for different brand themes
  3. Export design tokens for implementation
  4. Test designs with multiple brand color schemes

​
Implementation Considerations

  • Use CSS custom properties for theming
  • Implement proper fallbacks for missing brand assets
  • Test accessibility with various brand color combinations
  • Ensure mobile responsiveness across all themes