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

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 Files: TTF, OTF, or WOFF2 formats
2. Upload Font Family: Include all weights and styles
3. Configure Font Settings: Set font weights, styles, and fallbacks
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

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

Related Resources

• User Interface Guidelines
• Trust Center Configuration
• API Reference - Brand Settings

---

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.