Setting Up Brand Logos in Konfiwear
Brand logos are fixed, non-interactive graphics that appear on every garment your customers configure your company logo, a league badge, or a certification mark. customers cannot move, resize, or remove brand logos.
Before You Begin
Make sure you have:
An active Konfiwear account with admin or owner access
Your brand logo in two variants:
Light version — used on dark backgrounds
Dark version — used on light backgrounds
Both variants as image files (PNG, SVG, JPEG, or WebP recommended)
At least one position configured in Assets → Positions that defines where the logo appears
⚠️ Important: Brand logos are fixed and locked on the canvas. Customers cannot interact with them in any way. They appear above the design base layer but below all user-placed content (zone graphics, freeform graphics, text).
Setup Instructions
1. Navigate to Brand Logos
Go to Graphics → Brand Logos from the sidebar tab navigation.
The Brand Logos page shows a card-based layout with two slots — not a table, since each account supports a maximum of two logos.
Caption: The Brand Logos page with Slot 1 configured and Slot 2 locked until Slot 1 is saved.
2. Configure Slot 1
Click the Slot 1 card to open the configuration form.
3. Fill in the logo details
Field | Description | Required |
Name | Display name for internal reference (e.g., "Company Logo", "League Badge") | Yes |
Position | Select a position from your Positions library that defines where the logo appears on the canvas | Yes |
Light Variant | Upload the light version of your logo (shown on dark garment backgrounds) | Yes |
Dark Variant | Upload the dark version of your logo (shown on light garment backgrounds) | Yes |
Scale | Size multiplier (default 1.0). Increase for a larger logo, decrease for smaller. | No |
Opacity | Transparency from 0 (invisible) to 1 (fully opaque). Default is 1.0. | No |
Active | Whether the logo renders in the customizer | Yes |
4. Upload both variants
Click the Light upload area and select your light logo file
Click the Dark upload area and select your dark logo file
Both files upload to cloud storage via presigned URLs
💡 Tip: Always provide both variants. The customizer automatically selects the right one based on WCAG relative luminance of the background color at render time. If you only provide one, the logo may be invisible against certain color choices.
Caption: Slot 1 configured with both light and dark logo variants, position assigned, and scale/opacity set.
5. Assign to products and categories (optional)
Use the product and category pill selectors to control which products display this logo. If no assignments are made, the logo appears on all products by default.
6. Save the logo
Click Save. The logo is active and will render in the customizer.
7. Configure Slot 2 (optional)
Once Slot 1 is saved, Slot 2 unlocks. Follow the same steps to configure a second brand logo.
Common use case: Slot 1 for your company logo on the front chest, Slot 2 for a league or certification badge on a sleeve.
⚠️ Important: Maximum two brand logos per account, enforced at the database level. If you need more fixed graphics, consider integrating them directly into your design SVGs.
How Automatic Variant Selection Works
Konfiwear automatically picks the light or dark variant based on the garment's background color:
The customizer evaluates the WCAG relative luminance of the zone color behind the logo position
If the luminance is above the threshold (L > 0.179) — the background is light → dark logo is shown
If the luminance is at or below the threshold — the background is dark → light logo is shown
This happens at render time, not at configuration time. As the customer changes garment colors, the logo variant updates automatically.
Example: On a white jersey (high luminance), the dark logo appears. The customer switches to a navy jersey (low luminance), and the light logo appears — no manual switching needed.
Verify It Works
Open the customizer with a product assigned to this brand logo
Verify the logo appears at the configured position
Change the garment's zone color between a light and dark option
Confirm the logo variant switches automatically (dark logo on light background, light logo on dark background)
Verify the logo cannot be selected, moved, or resized by clicking on it
✅ Done! Your brand logo is configured and rendering automatically with the correct variant based on garment colors.
Tips & Best Practices
Use transparent backgrounds (PNG or SVG) for your logo files — they blend naturally onto the garment texture
Test both variants with multiple garment colors to ensure readability at all times
Keep logo scale reasonable — a scale of 0.5–1.5 works for most placements. Very large logos can obscure the garment design.
Use SVG format for the crispest rendering at any scale
Position logos at common placement points — front chest, sleeve, collar, or back neck are standard positions for brand marks