Appearance Customization

• Company Logo - Upload your logo to appear on invoices, quotes, and the customer portal
• Primary Color - Your main brand color used for buttons and headers
• Accent Color - Secondary color used for highlights and links
• Dark/Light Mode - Choose your preferred theme for the dashboard

• Format: PNG, SVG, or JPEG
• Dimensions: Recommended 400x100px (4:1 ratio)
• File Size: Maximum 2MB
• Background: Transparent background recommended for best results

1. Navigate to Settings > Branding
2. Click on the logo upload area
3. Select your logo file from your computer
4. Adjust the crop area if needed
5. Preview how it looks on light and dark backgrounds
6. Click Save Changes
7. Your logo will appear across all customer-facing documents

• Dashboard navigation bar
• Customer portal header
• PDF invoices
• PDF quotes
• Email communications
• Mobile app (coming soon)

1. Go to Settings > Branding > Colors
2. Click on the Primary Color picker
3. Enter your brand's hex code (e.g., #2563EB) or use the color picker
4. Click on the Accent Color picker
5. Choose a complementary secondary color
6. Preview the changes in the preview panel
7. Click Save Changes when satisfied

Sergio automatically checks color contrast ratios to ensure readability:

• Green checkmark indicates sufficient contrast (WCAG AA compliant)
• Yellow warning indicates marginal contrast - still usable but not ideal
• Red X indicates insufficient contrast - text may be hard to read

Sergio respects your system preferences by default, but you can override this:

1. Go to Settings > Appearance
2. Choose from: System Default, Light Mode, or Dark Mode
3. Click Save Preferences
4. The change applies immediately

For best results on dark backgrounds, you can upload a separate logo variant:

1. Go to Settings > Branding
2. Find the Dark Mode Logo section
3. Upload a logo that works well on dark backgrounds
4. Sergio will automatically swap logos based on the theme

For advanced branding needs, Business and Enterprise plans can add custom CSS:

1. Go to Settings > Branding > Advanced
2. Click Enable Custom CSS
3. Add your custom styles in the editor

   /* Rounded buttons */
   .btn {
     border-radius: 12px;
   }
   
   /* Custom font */
   body {
     font-family: 'Your Font', sans-serif;
   }

4. Preview changes before saving
5. Click Save to apply

Customize the emails Sergio sends to your customers:

1. Go to Settings > Communications > Email Templates
2. Select the template you want to customize
3. Edit the content using the visual editor
   • Subject line
   • Email body text
   • Header and footer content
   • Button text and colors
4. Use merge tags for dynamic content like customer name and job details
5. Preview the email before saving
6. Click Save Template

• Keep it simple - Simple logos work better at small sizes
• Use high contrast - Ensure visibility on both light and dark backgrounds
• Use SVG when possible - Vector formats stay crisp at any size
• Test on mobile - Preview how your logo looks on small screens

• Match your website - Use the same colors for brand consistency
• Avoid pure black/white - Use dark gray (#1F2937) and off-white (#F9FAFB) for a softer look
• Consider colorblind users - Don't rely solely on color to convey information
• 60-30-10 rule - 60% neutral, 30% primary, 10% accent

Your Sergio branding should match your other business materials:

• Sergio dashboard
• Customer portal
• Email communications
• PDF documents (quotes, invoices)
• Your website
• Business cards and signage

Consistent branding builds trust and professionalism with your customers.