¶ Platform Branding
Administrators can customize the Elementrix platform with company branding, colors, logos, and email templates.
¶ Admin Capabilities
¶ 1. Company Branding
Customize Elementrix Appearance:
Customize Elementrix Appearance:
Company Information:
Company Name: [Your Company Name]
Tagline: [Your Company Tagline]
Support Email: [support@company.com]
Help Documentation URL: [https://help.company.com]
Logo & Icons:
Primary Logo: [Upload] (Recommended: 200x60px, PNG)
Icon/Favicon: [Upload] (Recommended: 32x32px, ICO)
Login Page Image: [Upload] (Recommended: 1920x1080px, JPG)
Email Header Logo: [Upload] (Recommended: 600x100px, PNG)
Preview:
[Shows preview of login page and navigation with your branding]
[Save Branding] [Preview Changes] [Reset to Default]
Logo Guidelines:
Primary Logo:
- Displayed in top navigation
- Recommended size: 200x60px
- Format: PNG with transparent background
- Max file size: 500KB
- Used on light backgrounds
Favicon:
- Browser tab icon
- Size: 32x32px or 16x16px
- Format: ICO, PNG
- Max file size: 100KB
Login Page Image:
- Full-screen background image
- Size: 1920x1080px (or higher)
- Format: JPG, PNG
- Max file size: 2MB
- Use high-quality images
- Ensure good contrast with login form
Email Logo:
- Used in email templates
- Recommended size: 600x100px
- Format: PNG
- Max file size: 300KB
- Optimized for email clients
¶ 2. Color Scheme
Theme Colors:
Theme Colors:
Primary Color: [#3B82F6] 🎨
Used for: Primary buttons, links, active states
Preview: [Button Preview]
Secondary Color: [#10B981] 🎨
Used for: Success messages, secondary actions
Preview: [Button Preview]
Accent Color: [#F59E0B] 🎨
Used for: Highlights, warnings, notifications
Preview: [Badge Preview]
Text Color: [#1F2937] 🎨
Used for: Body text, headings
Preview: [Text Preview]
Background Color: [#FFFFFF] 🎨
Used for: Page backgrounds, cards
Preview: [Card Preview]
Error Color: [#EF4444] 🎨
Used for: Error messages, validation
Preview: [Error Preview]
Preview:
[Shows UI components with selected colors]
Presets:
- Default Elementrix (Blue theme)
- Corporate Blue (Professional look)
- Forest Green (Nature-inspired)
- Sunset Orange (Warm tones)
- Midnight Dark (Dark theme)
- Custom (Your colors)
[Apply Theme] [Reset to Default] [Save as Preset]
Color Accessibility:
Accessibility Check:
Primary Color (#3B82F6):
✓ Contrast Ratio: 4.5:1 (Passes WCAG AA)
✓ Text readable on white background
✓ Color blind friendly
Text Color (#1F2937):
✓ Contrast Ratio: 16.1:1 (Passes WCAG AAA)
✓ Highly readable
Warnings:
⚠️ Accent Color: Contrast ratio with white is 3.2:1
Recommendation: Use darker shade for better accessibility
[Run Accessibility Check] [Fix Issues]
Advanced Color Options:
Advanced Color Configuration:
Sidebar Colors:
Background: [#F9FAFB]
Active Item: [#3B82F6]
Text: [#6B7280]
Navigation Colors:
Background: [#FFFFFF]
Border: [#E5E7EB]
Text: [#1F2937]
Button Colors:
Primary: [#3B82F6]
Primary Hover: [#2563EB]
Secondary: [#6B7280]
Secondary Hover: [#4B5563]
Status Colors:
Draft: [#9CA3AF]
Review: [#FBBF24]
Approved: [#10B981]
Published: [#3B82F6]
Deprecated: [#F59E0B]
Retired: [#6B7280]
[Apply Advanced Colors]
¶ 3. Typography
Font Selection:
Font Selection:
Primary Font:
☐ Inter (Default - Modern, highly readable)
☑ Roboto (Clean, professional)
☐ Open Sans (Friendly, approachable)
☐ Lato (Elegant, refined)
☐ Source Sans Pro (Technical, precise)
☐ Custom Web Font
Custom Font Configuration:
Font Family Name: [Roboto]
Font URL: [https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap]
Font Weights:
☑ Light (300)
☑ Regular (400)
☑ Medium (500)
☑ Bold (700)
Preview Text:
─────────────────────────────────────
Heading 1: The Quick Brown Fox
Heading 2: The Quick Brown Fox
Heading 3: The Quick Brown Fox
Body: The quick brown fox jumps over the lazy dog
Numbers: 0123456789
─────────────────────────────────────
[Apply Font] [Preview in UI]
Typography Scale:
Font Size Configuration:
Headings:
H1: [36px] / [44px] line-height
H2: [30px] / [38px] line-height
H3: [24px] / [32px] line-height
H4: [20px] / [28px] line-height
H5: [16px] / [24px] line-height
H6: [14px] / [20px] line-height
Body:
Large: [18px] / [28px] line-height
Regular: [16px] / [24px] line-height
Small: [14px] / [20px] line-height
Tiny: [12px] / [16px] line-height
[Reset to Defaults] [Apply Custom Scale]
¶ Branding Best Practices
¶ Visual Consistency
Maintain Brand Guidelines:
- Use official company logos
- Follow brand color palette
- Consistent typography
- Professional imagery
Design Principles:
- Keep it simple and clean
- Ensure good contrast and readability
- Test on multiple devices and browsers
- Consider accessibility
¶ Next Steps
- Configure Email Templates for notifications
- Set up SSO with branded login page
- Review Administration Overview for other customizations