Branding & Themes

Customize Quix with your organization’s branding, colors, and logos.

Overview

Branding profiles allow you to:

Upload custom logos
Set brand colors
Add sponsor logos
Apply wallpaper backgrounds
Choose light or dark theme

Creating a Branding Profile

Navigate to Admin Panel → Branding → Create Profile

Required Fields

Field	Description	Format
Profile Name	Internal identifier	Text
Primary Color	Main brand color	Hex (#RRGGBB)
Theme	Base theme	Light / Dark

Optional Fields

Field	Description	Format
Logo	Main brand logo	PNG, SVG (max 2MB)
Wallpaper	Background image	JPG, PNG (max 5MB)
Secondary Color	Accent color	Hex (#RRGGBB)
Sponsor Logos	Event sponsors	Array of images

Color Customization

Primary Color

Used for:

Navigation bar
Buttons
Active states
Links

Secondary Color

Used for:

Hover states
Accents
Progress bars
Charts

Example Color Schemes

{
  "primary": "#1E40AF",
  "secondary": "#3B82F6",
  "theme": "light"
}

Professional, trustworthy appearance for corporate events.

{
  "primary": "#DC2626",
  "secondary": "#F87171",
  "theme": "dark"
}

Energetic, exciting feel for entertainment events.

{
  "primary": "#059669",
  "secondary": "#34D399",
  "theme": "light"
}

Fresh, calming aesthetic for educational sessions.

Logo Guidelines

Main Logo

Requirement	Specification
Format	PNG or SVG (transparent background)
Size	200x60 pixels recommended
Max File Size	2MB
Placement	Top-left corner

Best Practices

Use horizontal logo version if available
Ensure good contrast against theme background
Include padding in the image file
Test visibility on both light and dark backgrounds

┌─────────────────────────────────────────────────┐
│  ✓ GOOD                  ✗ BAD                  │
├─────────────────────────────────────────────────┤
│  [Logo with padding]     [Logo touching edges]  │
│  Transparent background  White box background   │
│  High contrast           Low contrast           │
└─────────────────────────────────────────────────┘

Add sponsor logos for events:

Configuration

{
  "sponsorLogos": [
    {
      "name": "Sponsor 1",
      "url": "https://cdn.example.com/sponsor1.png",
      "link": "https://sponsor1.com"
    },
    {
      "name": "Sponsor 2",
      "url": "https://cdn.example.com/sponsor2.png",
      "link": "https://sponsor2.com"
    }
  ]
}

Display Placement

Sponsor logos appear:

Bottom of display screen
Waiting room screen
Final results screen

Wallpaper Backgrounds

Supported Formats

JPEG: Best for photos (smaller file size)
PNG: Best for graphics with transparency
Max Size: 5MB
Resolution: 1920x1080 or higher

Wallpaper Tips

Use subtle patterns or gradients
Ensure text remains readable
Avoid busy or distracting images
Test on actual display device

Overlay Options

Overlay	Description
None	Full wallpaper visibility
Light (20%)	Slight darkening
Medium (40%)	Moderate darkening
Heavy (60%)	Strong darkening

Theme Settings

Light Theme

/* Light theme colors */
--background: #ffffff;
--text: #1f2937;
--card: #f9fafb;
--border: #e5e7eb;

Best for:

Well-lit rooms
Projector displays
Daytime events

Dark Theme

/* Dark theme colors */
--background: #111827;
--text: #f9fafb;
--card: #1f2937;
--border: #374151;