1. Home
  2. Help Center
  3. Public Portal
  4. Customizing Colors and Branding

Customizing Colors and Branding

Overview

Customize colors and branding to match your product's visual identity. The customization panel allows you to set colors for each page individually, or apply settings across all pages.

Color Customization

Primary, Secondary, and Accent Colors

These colors define the visual hierarchy of your portal:

  • Primary Color - Used for main buttons, links, and active states
  • Secondary Color - Used for supporting elements and highlights
  • Accent Color - Used for notifications, badges, and attention-grabbing elements

Background and Text Colors

Set the visual tone of your pages:

  • Background Color - The main page background
  • Text Color - The color of body text and headings

Setting Colors

  1. Select the page you want to customize
  2. Go to the Colors tab in the customization panel
  3. Click on the color swatch next to each color option
  4. Use the color picker to select your desired color
  5. Colors update in real-time in the preview
  6. Save when you're satisfied

Branding Settings

Logo and Company Name

Display your brand identity in the header and across your portal:

  • Logo URL - Enter the URL of your company logo image
  • Company Name - Display your company name in the header

Adding Your Logo

  1. Go to the Brand tab in the customization panel
  2. Enter your logo's URL in the Logo URL field
  3. Enter your company name in the Company Name field
  4. The logo appears in the header of your portal
  5. Save when done

Card Styles

Customize how cards (wish items, roadmap items, etc.) appear:

  • Card Background - Set the background color for cards
  • Card Text - Set the text color within cards
  • Shadow - Choose from None, Small, Medium, or Large shadows
  • Border - Toggle card borders on or off

Color Presets

Quickly apply a coordinated color scheme:

  1. In the Colors tab, expand the Presets section
  2. Click on a preset card to apply it
  3. Presets update Primary, Secondary, and Accent colors together
  4. Use the Random button to generate a random color scheme

Per-Page vs Global Colors

Colors can be set per-page or globally:

  • Per-page - Colors are set for each page independently
  • Global - Some settings apply across all pages (like logo and company name)
  • Tip: Start with a consistent color scheme, then tweak individual pages as needed

Best Practices

  • Keep contrast high - Ensure text is readable against background colors
  • Use your brand colors - Match your product's existing color scheme
  • Stay consistent - Use similar colors across all pages for a cohesive look
  • Consider accessibility - Use colors that meet WCAG contrast requirements
  • Test on different devices - Preview on mobile and desktop to ensure colors look good everywhere

Common Color Schemes

Corporate Blue

  • Primary: #3b82f6 (blue)
  • Secondary: #8b5cf6 (purple)
  • Accent: #10b981 (green)

Modern Dark

  • Primary: #60a5fa (light blue)
  • Secondary: #f472b6 (pink)
  • Accent: #fbbf24 (yellow)

Clean Minimal

  • Primary: #6b7280 (gray)
  • Secondary: #9ca3af (light gray)
  • Accent: #3b82f6 (blue)

Troubleshooting

Colors Not Applying

  • Make sure you've saved your changes
  • Clear your browser cache and reload
  • Check that the page is enabled in Page Settings

Logo Not Showing

  • Verify your logo URL is correct and publicly accessible
  • Check that the file format is supported (PNG, JPG, SVG)
  • Ensure the header is enabled in Layout settings

Next Steps

  • Configure page layout options
  • Set up navigation
  • Create custom pages