Customize your portal
Make your feedback portal feel like part of your product. Add your logo, colors, and fonts so users never feel like they've left your app.
Overview
Access branding settings from Admin → Settings → Branding. Changes preview in real-time before you save.
Identity
Logo
- Go to Admin → Settings → Branding
- Click on the logo placeholder or existing logo
- Select an image file
- Crop the image as needed
- The logo is uploaded automatically
Requirements:
- Formats: JPEG, PNG, GIF, WebP
- Maximum size: 5MB
Remove Logo
- Click the Remove link below the logo
- The logo is removed and the workspace initial is shown instead
Your logo also appears in all emails Quackback sends — welcome messages, team invitations, and status change notifications. It works across Gmail, Outlook, and Apple Mail without extra configuration.
Workspace Name
Enter your workspace name in the text field. Changes are saved automatically after a short delay.
Theme Mode
Control how light/dark mode works for portal visitors:
- User choice (allow toggle) - Visitors can switch between light and dark mode
- Light only - Portal always displays in light mode
- Dark only - Portal always displays in dark mode
Color Scheme
Quackback offers two branding modes, toggled by the Simple / Advanced switch:
Simple Mode
Customize your portal using color pickers and dropdowns:
Colors
Set your portal's color palette with the following inputs:
| Color | What it controls |
|---|---|
| Primary | Buttons, links, active states |
| Secondary | Secondary UI elements |
| Accent | Accent highlights |
| Background | Page background |
| Foreground (Text) | Main text color |
Click the color swatch to open the color picker, or type a hex code directly.
Font
Choose a font family from the dropdown. Fonts are organized by category:
- Sans Serif - Clean, modern fonts like Inter, Roboto, Open Sans, DM Sans, Geist, and more
- Serif - Traditional fonts like Playfair Display, Merriweather, Lora
- Monospace - Technical fonts like Fira Code, JetBrains Mono
- System - Uses the visitor's system font (System UI)
Corner Roundness
Adjust the roundness of buttons and cards using the slider:
- Sharp (left) - Square corners
- Round (right) - Fully rounded corners
A preview of the corner radius is shown next to the slider.
Advanced Mode
For full control, use theme presets or write custom CSS:
- Theme Presets - Start from curated themes (e.g., Catppuccin, Supabase, Neo Brutalism)
- Custom CSS - Write custom CSS with
:root \{\}and.dark \{\}blocks using CSS custom properties. Design your theme at tweakcn.com and paste it in.
Preview
The right side of the branding page shows a live preview of your portal with the current settings. Use the Light/Dark toggle at the top of the preview to see how your branding looks in both modes.
Save changes
After making changes, click Save Changes at the bottom of the controls panel to apply them to your portal. Identity changes (logo and workspace name) save automatically.
Best Practices
Consistent Branding
Match your existing brand guidelines:
- Use your official brand colors
- Use the same fonts as your main website
- Upload your standard logo
Accessibility
Ensure good color contrast:
- Test text readability on colored backgrounds
- Verify the logo is visible on both light and dark themes
- Check button text visibility
Mobile Experience
Preview on mobile viewport:
- Ensure the logo scales properly
- Verify touch targets are large enough
- Test dark mode on mobile
Minimalism
Less is often more:
- A clean, simple design builds trust
- Avoid overly bright or clashing colors
- Let content be the focus
Next Steps
- Boards - Organize your feedback
- Team - Invite team members
- Integrations - Connect external tools