Branding

Customize SPEAR’s visual appearance to match your organization’s brand identity. Branding settings affect the application interface, exported reports, and public portals.

---

Branding Areas

Area	What’s Customized
Application	Navigation, headers, login page
Reports	PDF exports, cover pages, headers/footers
Portals	Public client-facing pages
Emails	Notification templates (if SMTP enabled)

---

Logo Configuration

🖥️ Logo Configuration Interface Screenshot

Logo Types

Logo	Usage	Recommended Size
Primary Light	Light mode interface, white backgrounds	200x50 px
Primary Dark	Dark mode interface, dark backgrounds	200x50 px
Favicon	Browser tab icon	32x32 px
Email Logo	Email headers	150x40 px

Uploading Logos

1. Navigate to Admin > Branding > Logos
2. Click the upload area for each logo type
3. Select your image file (PNG, SVG, or JPG)
4. Preview the result
5. Click Save

Logo Guidelines

• Format: SVG preferred for scalability, PNG for raster
• Background: Transparent backgrounds recommended
• Aspect Ratio: Maintain consistent proportions
• File Size: Keep under 500KB for performance

---

Color Configuration

🖥️ Brand Color Configuration Screenshot

Brand Colors

Color	Usage
Primary	Buttons, links, accents
Secondary	Secondary actions, borders
Background	Page backgrounds
Text	Primary text color
Muted	Secondary text, placeholders

Setting Colors

1. Navigate to Admin > Branding > Colors
2. Click the color picker for each element
3. Enter hex code or select from picker
4. Preview changes in real-time
5. Click Save

Color Palette Examples

Corporate Blue:

Primary: #1E40AF
Secondary: #3B82F6
Background: #F8FAFC
Text: #1E293B
Muted: #64748B

Security Red:

Primary: #DC2626
Secondary: #EF4444
Background: #FEF2F2
Text: #1F2937
Muted: #6B7280

Modern Dark:

Primary: #818CF8
Secondary: #6366F1
Background: #0F172A
Text: #F1F5F9
Muted: #94A3B8

---

Typography

Font Settings

Setting	Description
Heading Font	Used for H1-H6 headings
Body Font	Used for paragraph text
Code Font	Used for code blocks
Base Size	Root font size (affects all text)

Available Fonts

SPEAR includes these web-safe fonts:

• Inter (default)
• Roboto
• Open Sans
• Lato
• Source Sans Pro
• System UI (user’s system font)

Custom Fonts

To use custom fonts:

1. Upload font files (WOFF2 format recommended)
2. Navigate to Admin > Branding > Typography
3. Select “Custom” and upload your font
4. Configure font family name
5. Save and refresh

---

Report Branding

Cover Page

Customize the report cover page appearance:

Element	Options
Logo Position	Top, center, or custom
Logo Size	Small, medium, large
Title Position	Center, left-aligned
Background	Color, gradient, or image
Footer Text	Company name, address

Headers & Footers

Configure running headers and footers:

Available Placeholders:

• {{page}} - Current page number
• {{pages}} - Total page count
• {{date}} - Export date
• {{title}} - Report title
• {{company}} - Company name

Example Footer:

{{company}} | Confidential | Page {{page}} of {{pages}}

Severity Colors

Customize finding severity badge colors:

Severity	Default Color
Critical	#7C2D12
High	#DC2626
Medium	#F59E0B
Low	#3B82F6
Info	#6B7280

---

Portal Branding

Public Portal Appearance

Customize client-facing portals:

Element	Description
Header Logo	Displayed in portal header
Header Color	Portal header background
Footer Text	Copyright, contact info
Custom CSS	Advanced styling

Portal Settings

1. Navigate to Admin > Branding > Portals
2. Configure each element
3. Preview using the test portal link
4. Save changes

---

Theme Presets

🖥️ Theme Presets Management Screenshot

Built-in Themes

SPEAR includes preset themes:

Theme	Description
Default	Clean, professional appearance
Dark	Dark mode optimized
High Contrast	Accessibility-focused
Minimal	Reduced visual elements

Creating Custom Themes

1. Navigate to Admin > Branding > Themes
2. Click Create Theme
3. Configure all branding elements
4. Save with a descriptive name
5. Apply as default or select per-report

Exporting/Importing Themes

Export:

1. Select theme in list
2. Click Export
3. Download JSON configuration

Import:

1. Click Import Theme
2. Upload JSON file
3. Review settings
4. Save theme

---

Email Branding

If SMTP is configured, customize email templates:

Template	Purpose
Welcome	New user onboarding
Password Reset	Reset password links
Report Shared	Portal share notifications
Verification	Email verification

Template Variables

{{user.name}} - Recipient's name
{{company.name}} - Your company name
{{action.url}} - Action link (reset, verify, etc.)
{{support.email}} - Support contact

---

CSS Customization

Custom CSS

For advanced customization, inject custom CSS:

1. Navigate to Admin > Branding > Advanced
2. Enter custom CSS in the editor
3. Preview changes
4. Save

Example - Custom Button Style:

.btn-primary {
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

CSS Variables

Override CSS custom properties:

:root {
  --color-primary: #1E40AF;
  --color-primary-hover: #1E3A8A;
  --radius-button: 8px;
  --font-heading: 'Your Custom Font', sans-serif;
}

---

Best Practices

Consistency

• Use the same colors across all areas
• Maintain logo proportions
• Test in both light and dark modes

Accessibility

• Ensure sufficient color contrast (WCAG 2.1 AA)
• Don’t rely solely on color for meaning
• Test with accessibility tools

Performance

• Optimize logo file sizes
• Use SVG when possible
• Limit custom font files

Testing

• Preview reports after changes
• Check public portals
• Test email templates
• Verify dark mode appearance

---

Troubleshooting

Logo Not Displaying

1. Check file format (PNG, SVG, JPG supported)
2. Verify file uploaded successfully
3. Clear browser cache
4. Check console for loading errors

Colors Not Applying

1. Hard refresh the page (Ctrl+Shift+R)
2. Check for CSS conflicts
3. Verify hex codes are valid
4. Check dark mode settings

Custom CSS Not Working

1. Verify CSS syntax is valid
2. Check selector specificity
3. Inspect element to see applied styles
4. Test in browser dev tools first

Fonts Not Loading

1. Verify font file format (WOFF2 recommended)
2. Check font-family name matches
3. Verify file uploaded correctly
4. Check browser console for errors