Brand Marketing & Color System

Learn how to configure your brand's visual identity including colors, logos, and fonts. This guide covers the comprehensive color system that supports both light and dark themes.

Your brand's color palette is the foundation of your visual identity. The platform supports a comprehensive color system with separate configurations for light and dark themes.

• Primary Color: Your main brand color, used for primary buttons and key elements
• Secondary Color: Complementary color for secondary actions and accents
• Accent Color: Highlight color for special elements and calls-to-action
• Semantic Colors: Success (green), Warning (yellow), Danger (red), Info (blue)
• Text & Background: Colors for text, backgrounds, surfaces, and borders

The platform supports both light and dark themes. You can configure separate colors for each theme to ensure optimal readability and brand consistency.

Light Mode Colors (Sun Icon)

These are your standard brand colors used when visitors view your site in light mode:

• Primary, Secondary, Accent colors
• Success, Warning, Danger, Info colors
• Text, Background, Surface, Border colors

Dark Mode Colors (Moon Icon)

These colors are used when visitors switch to dark theme. If not set, the system automatically generates appropriate dark mode colors from your light mode palette.

• Automatic Generation: If you don't set dark mode colors, the system creates lighter, more vibrant versions of your light colors for better visibility on dark backgrounds
• Custom Dark Colors: For full control, set custom colors for each element in dark mode

To configure your brand colors:

1. Navigate to Brand Editor: Click your user avatar → Brand Editor
2. Select Colors Tab: Click the "Colors" tab with the sun icon for light mode
3. Set Light Mode Colors:
4. Click each color field to open the color picker
5. Choose colors that match your brand guidelines
6. Ensure sufficient contrast for readability
7. Configure Dark Mode (Optional):
8. Click the "Colors" tab with the moon icon
9. Set custom colors for dark theme
10. Leave blank to use auto-generated colors
11. Save Changes: Click "Update Brand" to apply your colors

The color picker provides multiple ways to select colors:

• Visual Selector: Click and drag on the color square to choose hue and saturation
• Hue Slider: Adjust the color spectrum
• Opacity Slider: Set transparency (0-100%)
• Hex Input: Enter exact hex color codes (e.g., #345df6)
• RGB Input: Enter red, green, blue values (0-255)
• HSL Input: Enter hue, saturation, lightness values
• Swatches: Quick access to recently used colors

Configure your brand logos in the "Logos" tab:

• Navigation Logo (Light): Logo displayed in the sidebar for light theme
• Navigation Logo (Dark): Logo displayed in the sidebar for dark theme
• Logo Requirements:
  • PNG or SVG format recommended
  • Transparent background preferred
  • Optimal height: 40-60 pixels
  • Aspect ratio: Maintain brand proportions

Having separate logos for light and dark themes ensures your logo is always visible and maintains brand consistency.

Configure typography in the "Fonts" tab:

• Primary Font: Used for headings and titles
• Secondary Font: Used for body text and paragraphs
• Font Selection:
  • Choose from Google Fonts library
  • Consider readability and brand personality
  • Test on different devices and screen sizes

Follow these guidelines for effective brand colors:

Contrast & Accessibility

• WCAG Compliance: Ensure text has sufficient contrast against backgrounds (4.5:1 minimum for body text)
• Test Readability: View your site in both light and dark modes to verify readability
• Color Blindness: Don't rely solely on color to convey information

Brand Consistency

• Match Brand Guidelines: Use exact colors from your brand style guide
• Limit Palette: Use 2-3 primary colors plus semantic colors
• Consistent Application: Apply colors consistently across all pages

Dark Mode Considerations

• Lighter Colors: Dark mode colors should be lighter and more vibrant than light mode
• Avoid Pure White/Black: Use off-white (#e8eaed) and dark gray (#1a1d24) instead
• Test Both Themes: Always preview your site in both light and dark modes

Your brand colors are automatically applied throughout your website:

• Buttons: Primary buttons use your primary color, secondary buttons use secondary color
• Links: Hyperlinks use your primary color
• Forms: Form elements use your brand colors for focus states
• Cards & Modals: Background and border colors adapt to your theme
• Alerts: Success, warning, danger, and info messages use semantic colors
• Navigation: Sidebar and navigation elements use your brand colors

The system automatically generates lighter and darker variants of your colors for hover states, borders, and backgrounds.

Common color-related issues and solutions:

Colors Not Updating

• Clear your browser cache (Ctrl+Shift+R or Cmd+Shift+R)
• Ensure you clicked "Update Brand" after making changes
• Wait a few seconds for the system to regenerate brand assets

Poor Contrast in Dark Mode

• Set custom dark mode colors instead of relying on auto-generation
• Use lighter, more vibrant versions of your light mode colors
• Test with actual dark mode enabled in your browser

Colors Look Different on Mobile

• Mobile devices may have different color profiles
• Test on actual devices, not just browser emulation
• Ensure colors work in both portrait and landscape orientations

For advanced users and developers:

Color Storage

• Colors are stored in the database as hex values (#RRGGBB)
• The system automatically converts to RGB and HSL as needed
• Color variants (light, subtle, dark) are computed dynamically

CSS Variables

Your brand colors are exposed as CSS custom properties:

• --bs-primary: Primary brand color
• --bs-secondary: Secondary brand color
• --bs-body-bg: Background color
• --bs-body-color: Text color

These variables automatically switch between light and dark values based on the active theme.

Automatic Variants

The system generates these variants automatically:

• Light Variant: 20% lighter for hover states
• Subtle Variant: 85% lighter for backgrounds
• Dark Variant: Optimized for dark mode visibility