Build a cohesive color scheme
Your color scheme is the foundation of your brand presence in Userorbit. A well-chosen palette ensures that announcements, feedback forms, roadmap views, and the customer portal all feel distinctly yours. This guide explains how to select and apply colors effectively.
Step 1: Navigate to Design settings
Go to Settings → Design in your dashboard. The color configuration panel is displayed at the top of the page, with a live preview on the right.
Step 2: Set your primary color
Your primary color is the most visible brand element. It appears on:
- Call-to-action buttons across the widget and portal
- Active navigation tabs and selected states
- Links and interactive highlights
- Progress indicators and status badges
Enter your brand hex code directly (e.g., #4F46E5) or use the color picker. Choose a color with strong contrast against both light and dark backgrounds if you plan to support both modes.
Step 3: Choose a secondary color
The secondary color provides visual variety without competing with your primary. It is used for:
- Secondary buttons and outlines
- Category tags and labels
- Supplementary UI accents
A good secondary color complements your primary. If your primary is a bold blue, consider a muted slate or a warm neutral as your secondary.
Step 4: Configure accent colors
Accent colors are used sparingly for emphasis — notification badges, success states, warning indicators, and error messages. Userorbit provides default accent colors for these semantic purposes, but you can override them to match your brand palette.
- Success — used for confirmation messages and completed states.
- Warning — used for cautionary notices.
- Error — used for validation errors and destructive action confirmations.
Step 5: Set background and surface colors
The background color is the base canvas. The surface color sits on top of it for cards and panels. For light themes, a white background with a slightly off-white surface works well. For dark themes, use a dark gray background with a slightly lighter surface.
How colors affect different features
Your color choices cascade across Userorbit features in predictable ways:
- Announcements — primary color for action buttons, surface color for announcement cards.
- Feedback — primary color for the submit button and vote indicators, border color for input fields.
- Roadmap — primary color for status column headers, surface color for feature cards.
- Portal — primary color for navigation highlights and branding, background color for the page canvas.
Tips for choosing colors
- Use your existing brand guidelines as a starting point. Consistency across your product and Userorbit builds trust.
- Check color contrast ratios. Aim for a minimum 4.5:1 contrast ratio between text and background colors to meet WCAG AA accessibility standards.
- Limit your palette. Two to three brand colors plus neutrals is usually sufficient. Overusing color creates visual noise.
- Test with real content. Preview your color scheme with actual announcements and feedback items rather than relying on abstract swatches alone.