Branding & Theme
Branding settings customize the visual appearance of your ERP system, including logos, colors, and document styling to match your company identity.
Overview
Branding enables you to:
- Upload company logos
- Customize color schemes
- Configure document branding
- Set up email branding
- Customize the customer portal
- Manage brand assets
Accessing Branding
Navigate to Settings → Branding or Settings → Customization → Branding from the main menu.
Logo Configuration
Logo Settings
Logo Settings
Primary Logo:
┌────────────────────────────────────────────────────────────────┐
│ ┌─────────────────────┐ │
│ │ │ Current: company_logo.png │
│ │ [COMPANY LOGO] │ Size: 400 x 120 px │
│ │ │ Format: PNG (transparent) │
│ └─────────────────────┘ │
│ │
│ [Upload New Logo] [Remove] │
└────────────────────────────────────────────────────────────────┘
Usage:
├─ [x] Application header
├─ [x] Login page
├─ [x] Documents (invoices, quotes, etc.)
├─ [x] Email headers
└─ [x] Customer portal
Logo Variations:
┌────────────────────────────────────────────────────────────────┐
│ Type │ Dimensions │ Format │ Status │ Upload │
├────────────────────────────────────────────────────────────────┤
│ Full Logo │ 400 x 120 px │ PNG │ ✓ Set │ [Change] │
│ Square Logo │ 200 x 200 px │ PNG │ ✓ Set │ [Change] │
│ Favicon │ 32 x 32 px │ ICO/PNG│ ✓ Set │ [Change] │
│ Dark Mode Logo│ 400 x 120 px │ PNG │ Not set│ [Upload] │
│ Email Banner │ 600 x 150 px │ PNG │ ✓ Set │ [Change] │
└────────────────────────────────────────────────────────────────┘Logo Guidelines
Logo Requirements
Primary Logo:
├─ Recommended: 400 x 120 pixels
├─ Maximum: 800 x 400 pixels
├─ Format: PNG or SVG (transparent background preferred)
├─ File size: Max 2 MB
└─ Background: Transparent or white
Square Logo (for app icons):
├─ Recommended: 200 x 200 pixels
├─ Format: PNG
├─ Use: Mobile apps, profile images
└─ Should work at small sizes
Favicon:
├─ Size: 32 x 32 pixels or 16 x 16 pixels
├─ Format: ICO or PNG
└─ Use: Browser tabs
Tips:
├─ Use vector (SVG) for best quality
├─ Test on both light and dark backgrounds
├─ Ensure readability at small sizes
└─ Keep file sizes optimizedColor Theme
Color Configuration
Color Theme
Brand Colors:
┌────────────────────────────────────────────────────────────────┐
│ Color │ Value │ Preview │ Usage │
├────────────────────────────────────────────────────────────────┤
│ Primary │ #2563eb │ ██████ │ Buttons, links, headers │
│ Primary Hover │ #1d4ed8 │ ██████ │ Button hover states │
│ Secondary │ #64748b │ ██████ │ Secondary text, borders │
│ Accent │ #10b981 │ ██████ │ Success states, highlights│
│ Warning │ #f59e0b │ ██████ │ Warning messages │
│ Error │ #ef4444 │ ██████ │ Error states, alerts │
└────────────────────────────────────────────────────────────────┘
[Reset to Default] [Apply Theme]
Theme Presets:
├─ [Default Blue] [Professional Gray] [Modern Purple]
├─ [Corporate Green] [Warm Orange] [Minimal Dark]
└─ [+ Create Custom Theme]Dark Mode
Dark Mode Settings
Dark Mode:
├─ [x] Enable dark mode option
├─ Default Mode: [Light ▼]
│ ├─ Light (always light)
│ ├─ Dark (always dark)
│ └─ System (follow device setting)
└─ [x] Allow users to override
Dark Mode Colors:
┌────────────────────────────────────────────────────────────────┐
│ Element │ Light Mode │ Dark Mode │
├────────────────────────────────────────────────────────────────┤
│ Background │ #ffffff │ #1e293b │
│ Surface │ #f8fafc │ #334155 │
│ Text Primary │ #1e293b │ #f1f5f9 │
│ Text Secondary │ #64748b │ #94a3b8 │
│ Border │ #e2e8f0 │ #475569 │
└────────────────────────────────────────────────────────────────┘
Preview: [Light Mode] [Dark Mode]Document Branding
Document Styles
Document Branding
Invoice/Quote Styling:
├─ Header Layout: [Logo Left ▼]
│ ├─ Logo Left, Info Right
│ ├─ Logo Center
│ ├─ Logo Right, Info Left
│ └─ Full Width Header
├─ Primary Color: [#2563eb] (for headers/accents)
├─ Font Family: [Helvetica ▼]
└─ Font Size: [10] pt
Header Content:
├─ [x] Company Logo
├─ [x] Company Name
├─ [x] Company Address
├─ [x] Phone Number
├─ [x] Email
├─ [ ] Website
└─ [x] Tax ID
Footer Content:
├─ [x] Page numbers
├─ [x] Payment instructions
├─ [ ] Terms and conditions link
└─ Custom footer text:
[Thank you for your business!]
[Preview Invoice] [Preview Quote] [Save Document Style]Watermarks
Document Watermarks
Watermark Settings:
├─ [x] Enable watermarks
└─ Apply to: [Draft documents only ▼]
Watermark Types:
├─ ● Text watermark
│ ├─ Text: [DRAFT]
│ ├─ Font Size: [72] pt
│ ├─ Color: [#e2e8f0]
│ ├─ Rotation: [45] degrees
│ └─ Opacity: [30]%
│
└─ ○ Image watermark
├─ Upload image
├─ Opacity: [20]%
└─ Position: [Center ▼]
Status Watermarks:
├─ Draft: "DRAFT"
├─ Void: "VOID"
├─ Copy: "COPY"
└─ Confidential: "CONFIDENTIAL"
[Save Watermark Settings]Email Branding
Email Appearance
Email Branding
Email Template Style:
├─ Header:
│ ├─ [x] Include logo
│ ├─ Logo size: [200] px width
│ ├─ Background: [#2563eb]
│ └─ Text color: [#ffffff]
├─ Body:
│ ├─ Background: [#f8fafc]
│ ├─ Content background: [#ffffff]
│ ├─ Text color: [#1e293b]
│ └─ Link color: [#2563eb]
└─ Footer:
├─ Background: [#f1f5f9]
├─ Text color: [#64748b]
└─ [x] Include social links
Social Links:
├─ Facebook: [https://facebook.com/company]
├─ Twitter: [https://twitter.com/company]
├─ LinkedIn: [https://linkedin.com/company]
└─ Instagram: [https://instagram.com/company]
Footer Text:
[© 2026 Company Name. All rights reserved.]
[123 Main Street, New York, NY 10001]
[Preview Email] [Save Email Branding]Customer Portal Branding
Portal Appearance
Customer Portal Branding
Portal Header:
├─ Logo: [Upload Portal Logo]
├─ Header Color: [#2563eb]
├─ Navigation Style: [Horizontal ▼]
└─ [x] Show company name
Login Page:
├─ Background: [Color ▼] [#f8fafc]
│ ├─ Color
│ ├─ Image
│ └─ Gradient
├─ Login Box Position: [Center ▼]
├─ Welcome Message: [Welcome to the Customer Portal]
└─ [x] Show "Powered by Angage" badge
Portal Theme:
├─ Primary Color: [#2563eb]
├─ Accent Color: [#10b981]
├─ Font Family: [Inter ▼]
└─ Border Radius: [8] px (button/card corners)
Custom CSS:
┌────────────────────────────────────────────────────────────────┐
│ /* Add custom CSS here */ │
│ .portal-header { │
│ box-shadow: 0 2px 4px rgba(0,0,0,0.1); │
│ } │
└────────────────────────────────────────────────────────────────┘
[Preview Portal] [Save Portal Branding]Brand Assets
Asset Library
Brand Assets Library
Uploaded Assets:
┌────────────────────────────────────────────────────────────────┐
│ Name │ Type │ Size │ Uploaded │ Actions │
├────────────────────────────────────────────────────────────────┤
│ company_logo.png │ Logo │ 45 KB │ Jan 15 │ [Download] │
│ logo_dark.png │ Logo │ 42 KB │ Jan 15 │ [Download] │
│ email_banner.png │ Banner│ 120 KB │ Jan 10 │ [Download] │
│ favicon.ico │ Icon │ 4 KB │ Jan 10 │ [Download] │
│ watermark.png │ Image │ 15 KB │ Dec 20 │ [Download] │
└────────────────────────────────────────────────────────────────┘
Storage Used: 226 KB of 10 MB
[+ Upload Asset] [Download All]Best Practices
Logo Design
- Use high-resolution images
- Provide transparent backgrounds
- Test at various sizes
- Include dark mode variant
Color Selection
- Ensure sufficient contrast
- Test with color blindness
- Keep consistent across materials
- Document brand colors
Consistency
- Use same branding everywhere
- Update all locations together
- Document brand guidelines
- Review periodically
Troubleshooting
Common Issues
Logo appears blurry
- Use higher resolution
- Try SVG format
- Check display size settings
- Verify original file quality
Colors look different
- Use hex color codes
- Check color profile
- Test on multiple screens
- Verify PDF color settings
Email branding not showing
- Check email client support
- Verify image hosting
- Test across email clients
- Review spam filter impact
Related Documentation
Learn about Document Templates for customizing document layouts.