Custom Branding
Match surveys to your brand identity
Custom Branding
Make your surveys reflect your brand identity. Customize colors, logos, and fonts to create a cohesive, professional experience that builds trust with respondents.
Quick Start
Set up branding in three steps:
- Go to Branding - Open Team Settings > Branding
- Upload logo and set colors - Add your logo and choose your color palette
- Preview and save - Check the preview and apply your changes
Branding Elements
Logo
Display your company logo on all surveys:
| Setting | Recommendation |
|---|---|
| Formats | PNG, JPG, SVG |
| Max size | 2MB |
| Style | Horizontal preferred |
| Position | Top left of survey |
Tips:
- Use transparent backgrounds when possible
- Ensure readability at small sizes
- Test on both light and dark backgrounds
Colors
Customize your survey color scheme:
| Color | Usage | Description |
|---|---|---|
| Primary | Buttons, links, progress bar | Main brand color |
| Background | Survey background | Page background |
| Text | Question and option text | Primary text color |
| Secondary Text | Descriptions, hints | Lighter text for supporting content |
| Button Text | Text on buttons | Auto-calculated for contrast |
| Accent | Highlights, selections | Secondary brand color |
| Error | Error messages | Validation feedback |
| Success | Success messages, completion | Positive feedback |
Fonts
Choose from available font families:
| Font | Style | Best For |
|---|---|---|
| System (default) | Device native | Maximum compatibility |
| Inter | Modern sans-serif | Clean, professional surveys |
| Serif | Traditional | Academic, formal surveys |
| Mono | Monospace | Technical surveys |
Setting Up Branding
Using Presets
Start quickly with a color preset:
- Go to Team Settings > Branding
- Select a preset from the dropdown
- Colors are automatically applied
- Customize further if needed
- Save your settings
Custom Colors
Set your own brand colors:
- Click on any color swatch to open the color picker
- Enter a hex code (e.g., #4F46E5) or use the picker
- Check the contrast indicator
- Repeat for each color
- Save your settings
Note: When you change the primary color, the button text color is automatically calculated for optimal contrast.
Logo Upload
- Click "Upload Logo" or drag and drop
- Select your image file (PNG, JPG, SVG, max 2MB)
- Preview how it appears
- Save to apply
To remove a logo, click "Remove Logo".
Dark Mode
Configure how your survey appears in dark mode:
Enable Dark Mode
- Toggle "Enable Dark Mode" on
- Choose automatic (follows system preference) or manual
- Configure dark mode colors
Auto-Generate Dark Colors
Click "Generate Dark Mode" to automatically create a dark color palette from your light mode colors. This uses color science to create accessible dark mode variants.
Dark Mode Colors
Configure separately from light mode:
- Dark primary color
- Dark background color
- Dark text colors
- Dark accent colors
Accessibility
Srvey checks color contrast automatically:
Contrast Indicators
| Status | Meaning | Action |
|---|---|---|
| AA Pass | Meets WCAG AA | Good for most uses |
| AAA Pass | Meets WCAG AAA | Excellent accessibility |
| Fail | Below standards | Consider changing |
WCAG Requirements
- Normal text: 4.5:1 minimum contrast ratio
- Large text: 3:1 minimum contrast ratio
The branding settings show live contrast ratios as you configure colors.
Real-World Examples
Example: Corporate Brand
Scenario: Enterprise company with established brand guidelines.
Preset: None (custom)
Logo: Company wordmark
Primary: #1E3A8A (Corporate blue)
Background: #FFFFFF (White)
Text: #1E293B (Dark slate)
Font: Inter
Dark mode: Enabled (auto)
Example: Quick Setup
Scenario: Getting started quickly with a preset.
Preset: "Professional Blue"
Logo: None yet
All colors: Applied from preset
Font: System (default)
Result: Professional look in seconds
Example: Academic Survey
Scenario: University research study.
Logo: University logo
Primary: #7C3AED (Purple)
Background: #FFFFFF (White)
Font: Serif
Dark mode: Disabled
Preview and Testing
Preview Modes
Toggle between light and dark preview:
- See exactly how surveys will appear
- Check logo visibility in both modes
- Verify color contrast
Testing Checklist
Before launching:
- Logo displays correctly
- Colors are consistent throughout
- Text is readable on all backgrounds
- Buttons have good contrast
- Dark mode works (if enabled)
- Mobile display looks good
Survey-Level Overrides
Override team branding for individual surveys:
- Open the survey and go to Settings > Branding
- Toggle off "Use Team Defaults"
- Customize logo, colors, and fonts for this survey only
- Save changes
Use cases:
- Client-specific surveys (agency white-labeling)
- Campaign-specific theming
- Event or seasonal designs
Plan Availability
| Feature | Free | Pro | Business | Enterprise |
|---|---|---|---|---|
| Team branding | - | Yes | Yes | Yes |
| Custom logo | - | Yes | Yes | Yes |
| Custom colors | - | Yes | Yes | Yes |
| Color presets | - | Yes | Yes | Yes |
| Font selection | - | Yes | Yes | Yes |
| Dark mode | Yes | Yes | Yes | Yes |
| Survey-level overrides | - | Yes | Yes | Yes |
| Remove "Powered by" | - | Yes | Yes | Yes |
| Custom fonts | - | - | Yes | Yes |
Powered By Footer
On free plans, surveys display a small "Powered by Srvey" footer. Pro plans and above can remove this for a fully white-labeled experience.
Custom branding requires the team_branding feature, available on Pro plans and above. Custom fonts require the custom_fonts feature on Business and above.
Troubleshooting
Issue: Logo not displaying
Symptoms: Logo area is blank or shows error.
Solutions:
- Check file format (PNG, JPG, SVG only)
- Verify file size is under 2MB
- Try re-uploading the image
- Clear browser cache
Issue: Colors not applying
Symptoms: Survey shows default colors.
Solutions:
- Verify settings are saved
- Clear browser cache
- Check if survey uses a template with different branding
Issue: Contrast warning
Symptoms: Warning indicator on colors.
Solutions:
- Darken the text color
- Lighten the background color
- Use the auto-generated button text color
- Consider accessibility requirements
Issue: Dark mode not showing
Symptoms: Survey stays in light mode.
Solutions:
- Verify dark mode is enabled
- Check "auto" setting follows system preference
- Test with system dark mode enabled
- Preview in dark mode within settings
Best Practices
- Use presets first - Start with a preset and customize from there
- Prioritize readability - Good contrast is essential
- Test both modes - Verify light and dark appearance
- Keep it simple - Subtle branding is often more professional
- Match your website - Consistent experience builds trust
- Check accessibility - Use the contrast indicators