# Brand Customization
URL: /en/docs/user-guide/brand
Last Updated: 2026-07-30T21:15:44.542Z
## Description
Customize your Trust Center appearance with white-label branding, logos, colors, and themes for a professional customer experience
## Available Actions
- Navigate to related topics
- View step-by-step instructions
- Get best practices
## Content
import { Image, Palette, Users } from "lucide-react";
# Brand Customization
Brand customization is essential for creating a professional, cohesive Trust Center experience that reflects your organization's identity. This comprehensive guide covers all aspects of branding and visual customization available in the Admin Center.
## What You'll Learn
* How to access and navigate brand settings
* Uploading and managing logos and visual assets
* Configuring color schemes and themes
* Customizing typography and visual elements
* White-label configuration best practices
## Prerequisites
* **Admin** role required for brand management
* Brand assets ready for upload (logos, images)
* Understanding of your organization's brand guidelines
* Basic knowledge of color codes and web design principles
## Brand Settings Overview
The Brand section provides comprehensive control over your Trust Center's visual appearance, ensuring a consistent, professional experience that aligns with your organization's identity.
### Brand Management Interface
**Main Sections:**
* **Logo Management**: Upload and configure primary and secondary logos
* **Color Scheme**: Define primary, secondary, and accent colors
* **Typography**: Configure fonts and text styling
* **Advanced Styling**: Custom CSS and layout options
* **Preview**: Real-time preview of brand changes
*The main brand customization interface with all configuration options*
### White-Label Features
**Complete Brand Control:**
* Remove all Orbiq/platform branding
* Apply your organization's visual identity
* Customize every aspect of the Trust Center appearance
* Ensure consistent branding across all customer touchpoints
**Professional Appearance:**
* High-quality, professional design templates
* Responsive design for all devices
* Accessibility compliance (WCAG 2.1)
* Fast loading and optimized performance
## Logo Management
### Primary Logo Configuration
**Logo Requirements:**
* **Format**: PNG, SVG, or JPG (SVG recommended for scalability)
* **Size**: Maximum 2MB per file
* **Dimensions**: Recommended 300x100px for horizontal layouts
* **Background**: Transparent PNG or SVG for best results
* **Quality**: High resolution for crisp display
**Upload Process:**
1. **Access Logo Settings**: Navigate to Brand → Logo Management
2. **Select Logo Type**: Choose primary logo upload
3. **Upload File**: Drag and drop or browse for logo file
4. **Adjust Positioning**: Configure logo placement and sizing
5. **Preview Changes**: Review logo appearance in different contexts
6. **Save Configuration**: Apply logo changes to Trust Center
*Logo upload interface with preview and positioning controls*
### Logo Variations
**Multiple Logo Support:**
* **Primary Logo**: Main logo used in headers and prominent locations
* **Secondary Logo**: Alternative logo for different contexts
* **Icon/Favicon**: Small icon version for browser tabs and bookmarks
* **Dark Mode Logo**: Optimized version for dark theme usage
**Logo Contexts:**
* **Header Logo**: Appears in Trust Center navigation
* **Footer Logo**: Displayed in page footers
* **Email Logo**: Used in automated notifications
* **Print Logo**: Optimized for PDF documents and print materials
### Hero Image Banner
Create a high-impact visual introduction for your Trust Center with a full-width hero banner.
**Hero Image Requirements:**
* **Format**: JPG, PNG, WebP, or SVG
* **Size**: Maximum 2MB per file
* **Aspect Ratio**: 16:9 or wider (e.g., 1600×900) for best fit
* **Focus Area**: Keep key visuals or copy centered to avoid cropping
**Upload Process:**
1. Open **Brand → General** and locate the **Hero Image** section.
2. Select **Upload Hero Image** to choose a new banner.
3. Preview updates instantly within the Admin Center.
4. Use the remove button to revert to a text-only hero layout.
5. Save changes to publish across the Trust Center.
**Design Tips:**
* Use photography or illustrations that reinforce trust and professionalism.
* Include subtle gradients or overlays to keep hero text legible.
* Optimize files for web delivery to maintain fast page loads.
### Logo Best Practices
**Design Guidelines:**
* Use vector formats (SVG) when possible for scalability
* Ensure logos work on both light and dark backgrounds
* Maintain consistent aspect ratios across variations
* Test logos at different sizes for clarity
* Follow your organization's brand guidelines
**Technical Considerations:**
* Optimize file sizes for web performance
* Use appropriate color modes (RGB for web)
* Ensure sufficient contrast for accessibility
* Test on various devices and screen sizes
*Different logo variations and their usage contexts*
## Color Scheme Configuration
### Primary Color Settings
**Brand Colors:**
* **Primary Color**: Main brand color used for buttons, links, and key elements
* **Secondary Color**: Supporting color for accents and highlights
* **Background Colors**: Page and section background colors
* **Text Colors**: Primary and secondary text color options
**Color Input Methods:**
* **Hex Codes**: Direct entry of hexadecimal color codes (#FF5733)
* **RGB Values**: Red, Green, Blue numeric values
* **Color Picker**: Visual color selection tool
* **Brand Palette**: Pre-defined organizational color sets
*Color scheme configuration with multiple input methods*
### Advanced Color Options
**Semantic Colors:**
* **Success Colors**: Green tones for positive actions and confirmations
* **Warning Colors**: Yellow/orange for alerts and cautions
* **Error Colors**: Red tones for errors and critical alerts
* **Info Colors**: Blue tones for informational content
**Color Applications:**
* **Interactive Elements**: Buttons, links, form controls
* **Status Indicators**: Document states, account statuses
* **Navigation Elements**: Menu items, breadcrumbs
* **Content Sections**: Headers, cards, containers
### Color Accessibility
**Accessibility Compliance:**
* **Contrast Ratios**: Ensure WCAG 2.1 AA compliance (4.5:1 minimum)
* **Color Blindness**: Test colors for colorblind accessibility
* **High Contrast Mode**: Support for high contrast displays
* **Alternative Indicators**: Don't rely solely on color for meaning
**Testing Tools:**
* Built-in contrast checker
* Color blindness simulation
* Accessibility validation
* Cross-device color testing
*Color accessibility testing and validation tools*
## Typography and Fonts
### Font Configuration
**Typography Options:**
* **Heading Fonts**: Font families for H1, H2, H3, etc.
* **Body Text**: Primary font for content and documentation
* **UI Fonts**: Fonts for interface elements and navigation
* **Monospace Fonts**: Code and technical content fonts
**Supported Font Sources:**
* **Web-Safe Fonts**: Standard system fonts (Arial, Times, etc.)
* **Google Fonts**: Extensive library of web fonts
* **Custom Fonts**: Upload your organization's branded fonts
* **Font Stacks**: Fallback font configurations
### Font Upload and Management
**Custom Font Upload:**
1. **Prepare Font File**: Export your brand typeface as WOFF, WOFF2, OTF, or TTF (max 1 MB).
2. **Upload in Brand → General**: Click **Upload Font** to add the file and store it securely in Directus.
3. **Define the Font Stack**: Use the **Font Family (CSS)** input to set the display name and fallbacks (example: `'Acme Sans', ui-sans-serif, system-ui, sans-serif`).
4. **Preview Instantly**: The live preview loads the uploaded font and applies it across headings, body text, and navigation.
5. **Publish Changes**: Save to propagate fonts to the public Trust Center and trust emails.
**Management Tools:**
* Remove the font at any time to revert to the default system stack.
* Combine the font upload with color and hero updates for a cohesive launch.
* The Admin Center automatically injects `@font-face` definitions and caches fonts for fast delivery.
4. **Test Typography**: Preview fonts in different contexts
5. **Apply Font Configuration**: Update Trust Center typography
**Font Optimization:**
* Use web-optimized font formats (WOFF2)
* Include only necessary font weights and styles
* Configure font loading strategies
* Test performance impact
*Typography configuration with font preview and testing*
### Text Styling Options
**Styling Controls:**
* **Font Sizes**: Responsive sizing for different screen sizes
* **Line Heights**: Optimal spacing for readability
* **Letter Spacing**: Fine-tune character spacing
* **Font Weights**: Bold, normal, light weight options
**Typography Hierarchy:**
* **Headings**: H1-H6 styling configuration
* **Body Text**: Paragraph and content styling
* **Lists**: Ordered and unordered list styling
* **Links**: Link styling and hover states
## Advanced Customization
### Custom CSS
**CSS Override Capabilities:**
* **Custom Stylesheets**: Upload additional CSS files
* **CSS Variables**: Modify CSS custom properties
* **Component Styling**: Target specific UI components
* **Responsive Overrides**: Custom styles for different screen sizes
**CSS Best Practices:**
* Use CSS specificity carefully to avoid conflicts
* Test custom styles across different browsers
* Maintain responsive design principles
* Document custom styling for future reference
*Custom CSS editor with syntax highlighting and validation*
### Layout Customization
**Layout Options:**
* **Header Layout**: Configure navigation and logo placement
* **Footer Content**: Customize footer information and links
* **Page Structure**: Modify content layout and spacing
* **Sidebar Configuration**: Customize navigation and content areas
**Responsive Design:**
* **Mobile Optimization**: Ensure excellent mobile experience
* **Tablet Adaptation**: Optimize for medium-sized screens
* **Desktop Layout**: Full-featured desktop experience
* **Print Styles**: Optimize appearance for printing
### Theme Management
**Theme Presets:**
* **Light Theme**: Standard light color scheme
* **Dark Theme**: Professional dark mode option
* **High Contrast**: Enhanced accessibility theme
* **Custom Themes**: Create organization-specific themes
**Theme Switching:**
* **User Preference**: Allow users to choose themes
* **Automatic Switching**: Respect system theme preferences
* **Time-Based**: Automatic light/dark switching
* **Account-Specific**: Different themes per customer account
*Theme management interface with preset and custom options*
## Brand Preview and Testing
### Real-Time Preview
**Preview Capabilities:**
* **Live Preview**: See changes immediately as you make them
* **Device Simulation**: Preview on different screen sizes
* **Theme Switching**: Test different theme combinations
* **Interactive Elements**: Test buttons, forms, and navigation
**Preview Contexts:**
* **Homepage**: Main Trust Center landing page
* **Document Pages**: Document listing and detail views
* **Forms**: Contact and access request forms
* **Error Pages**: 404 and error page branding
### Multi-Device Testing
**Device Testing:**
* **Desktop**: Full-featured desktop experience
* **Laptop**: Medium-sized screen optimization
* **Tablet**: Touch-friendly tablet interface
* **Mobile**: Optimized mobile experience
**Browser Testing:**
* **Cross-Browser Compatibility**: Chrome, Firefox, Safari, Edge
* **Version Testing**: Recent browser versions
* **Performance Testing**: Loading speed and responsiveness
* **Accessibility Testing**: Screen reader and keyboard navigation
*Multi-device brand preview with real-time updates*
## Implementation and Deployment
### Publishing Brand Changes
**Deployment Process:**
1. **Review Changes**: Verify all customizations in preview
2. **Quality Assurance**: Test across devices and browsers
3. **Approve Changes**: Final approval for brand updates
4. **Deploy to Production**: Push changes to live Trust Center
5. **Verify Deployment**: Confirm changes are live and working
**Deployment Options:**
* **Immediate Deployment**: Changes go live immediately
* **Scheduled Deployment**: Deploy changes at specific times
* **Gradual Rollout**: Phased deployment to different audiences
* **Rollback Capability**: Quick reversion if issues arise
### Change Management
**Version Control:**
* **Brand History**: Track all brand changes over time
* **Rollback Options**: Revert to previous brand configurations
* **Change Documentation**: Document reasons for brand updates
* **Approval Workflows**: Multi-step approval for brand changes
**Communication:**
* **Stakeholder Notification**: Alert team members of brand changes
* **Customer Communication**: Inform customers of visual updates
* **Documentation Updates**: Update help materials with new branding
* **Training Materials**: Update team training with new brand elements
## Best Practices
### Brand Consistency
**Consistency Guidelines:**
* **Follow Brand Guidelines**: Adhere to organizational brand standards
* **Cross-Platform Alignment**: Ensure consistency with other platforms
* **Regular Audits**: Periodic review of brand implementation
* **Documentation**: Maintain brand implementation documentation
**Quality Assurance:**
* **Professional Appearance**: Maintain high-quality, professional look
* **User Experience**: Prioritize usability alongside visual appeal
* **Performance**: Ensure branding doesn't impact loading speeds
* **Accessibility**: Maintain accessibility standards with custom branding
### Security Considerations
**Brand Asset Security:**
* **File Validation**: Verify uploaded files are safe and valid
* **Version Control**: Track changes to brand assets
* **Access Control**: Limit brand management to authorized users
* **Backup Strategy**: Maintain backups of brand configurations
**Compliance:**
* **Brand Guidelines**: Ensure compliance with organizational standards
* **Legal Considerations**: Respect trademark and copyright requirements
* **Accessibility Standards**: Maintain WCAG compliance
* **Data Protection**: Secure handling of brand assets
## Common Tasks
**Solution**: Navigate to Brand → Color Scheme, select the primary color
field, enter your desired color code or use the color picker, preview the
changes, and save the configuration. Changes will be applied across all Trust
Center elements.
**Solution**: Upload a higher resolution logo (at least 2x the display size)
or switch to SVG format for perfect scalability. Ensure the logo file is high
quality and properly optimized for web use.
**Solution**: The brand settings apply globally to your Trust Center instance.
For account-specific branding, consider using the multi-tenant features or
contact support for advanced customization options.
**Solution**: Use the built-in preview feature to see changes in real-time.
Test across different devices using the device simulation, and consider using
the staging environment for comprehensive testing before deployment.
## Multilingual Support
### German - Markenanpassung
**Hauptfunktionen:**
* **Logo-Verwaltung**: Primäre und sekundäre Logos hochladen
* **Farbschema**: Markenfarben und Akzentfarben konfigurieren
* **Typografie**: Schriftarten und Textstile anpassen
* **Erweiterte Anpassung**: CSS und Layout-Optionen
**White-Label-Funktionen:** Vollständige Markenidentität und professionelles Erscheinungsbild
### French - Personnalisation de la marque
**Fonctionnalités principales:**
* **Gestion des logos**: Télécharger des logos primaires et secondaires
* **Schéma de couleurs**: Configurer les couleurs de marque et d'accent
* **Typographie**: Personnaliser les polices et styles de texte
* **Personnalisation avancée**: Options CSS et de mise en page
**Fonctionnalités white-label:** Identité de marque complète et apparence professionnelle
## Next Steps
}>
Detailed guide to uploading and managing brand logos
}>
Custom CSS and advanced design customization
}>
Configure team access to brand management features
## Related Resources
* [User Interface Guidelines](/en/docs/user-guide/)
* [Trust Center Configuration](/en/docs/user-guide/accounts)
* [API Reference - Brand Settings](/en/docs/api/v1/brand/get)
***
Effective brand customization creates a professional, cohesive Trust Center experience that builds customer confidence and reinforces your organization's identity. Use this guide to implement beautiful, accessible, and performance-optimized branding.