Color Customization

Overview

Custom colors make your landing pages and viewer match your brand. Set a primary color that applies to buttons, links, and key accent elements.

Setting Your Primary Color

Using the Color Picker

1. Go to Settings > Branding
2. Find Primary Color
3. Click the color swatch
4. Use the picker or enter a hex code
5. Preview the result
6. Click Save

Entering a Hex Code

If you know your exact brand color:

1. Click in the hex input field
2. Enter your color (e.g., #2563eb)
3. Color updates immediately
4. Save when satisfied

Where Colors Apply

Buttons

Your primary color on:

• "Access Content" buttons
• "Download" buttons
• Form submit buttons
• Call-to-action elements

Links

Text links styled with:

• Your primary color
• Hover state (slightly darker)
• Active/visited states

Accents

Subtle usage in:

• Focus rings on inputs
• Selection highlights
• Progress indicators
• Icons

Choosing the Right Color

Brand Consistency

Use your official brand color:

• Match your website
• Same as your logo's primary color
• Consistent with other materials

Contrast Considerations

Ensure readability:

• Light colors may not show well on white
• Very dark colors may look black
• Test on actual pages

Color Accessibility

For accessibility:

• Minimum 4.5:1 contrast ratio for text
• 3:1 for large text and UI elements
• Test with accessibility tools

Color Combinations

Light Backgrounds

Your primary color should:

• Stand out clearly
• Be readable as link text
• Work on white/light gray

Good choices: Medium to dark blues, greens, purples

Dark Backgrounds (Coming Soon)

When dark mode is available:

• May need alternate color
• Lighter version of primary
• Maintain brand recognition

Preview and Testing

In-App Preview

After setting color:

• Preview panel shows examples
• See buttons and links
• Check how it looks

Real-World Testing

1. Save your color
2. Open a Generic Link landing page
3. View actual appearance
4. Test on mobile too

Different Contexts

Check your color on:

• Desktop browser
• Mobile device
• Different lighting conditions

Common Brand Colors

By Industry

Safe Choices

If unsure, these generally work well:

• #2563eb - Professional blue
• #059669 - Trust green
• #7c3aed - Modern purple
• #dc2626 - Action red

Advanced Options (Coming Soon)

Secondary Color

For:

• Hover states
• Secondary buttons
• Additional accents

Text Color Override

For:

• Custom heading colors
• Body text customization
• Link-specific colors

Dark Mode Colors

Separate color scheme for:

• Dark mode viewers
• Evening reading
• User preference

Team Considerations

Team-Wide Color

On Team plan:

• Color applies to all team content
• All members use same branding
• Consistent team appearance

Per-Lead Magnet Colors (Coming Soon)

Future feature:

• Different colors per lead magnet
• Use case: Multiple product lines
• Override team default

Troubleshooting

Color Not Showing

• Verify you clicked Save
• Clear browser cache
• Check you're on Pro or Team plan
• Try hard refresh (Ctrl/Cmd + Shift + R)

Color Looks Different

Colors may appear slightly different:

• Between monitors
• On mobile vs desktop
• In different browsers

This is normal due to color profiles.

Color Doesn't Match Logo

If your logo and color don't match:

• Use eyedropper tool on logo
• Get hex code from brand guidelines
• Ask designer for exact value

Resetting to Default

To revert to Vavolta's default colors:

1. Go to Settings > Branding
2. Click Reset next to Primary Color
3. Confirm reset
4. Default blue applied

Next Steps

• Custom Domains - Complete branding with your domain
• Logo Setup - Add your logo
• Branding Overview - All branding options