Secondary Color (Tag Color)
Where Secondary Color Appears
Your secondary color is used for:
- Credential pills - Suffixes like “MD”, “PhD”, “RMT”
- Service tags - Labels like “New Patients Only”
- Restriction badges - “Credit Card Required” indicators
- Small labels - Various informational badges
These elements appear in:
- The hero section (practitioner credentials)
- Practitioner cards in the team list
- Service cards in the booking panel
- “Read More” modals for practitioner details
Changing Your Secondary Color
Step-by-Step
-
Log in to OutSmart and visit your booking page
-
Click the Settings icon (gear) in the header
-
Find Tag Color in the dropdown
-
Choose from preset colors or enter a custom hex code
-
The page updates immediately
The secondary color is independent of the primary color - you can mix and match to suit your brand.
Preset Colors
| Color | Hex Code | Effect |
|---|---|---|
| Orange (Default) | #EA580C | Warm, attention-grabbing |
| Blue | #2563EB | Professional, calm |
| Green | #16A34A | Fresh, positive |
| Purple | #9333EA | Creative, distinguished |
| Red | #DC2626 | Urgent, important |
| Teal | #0D9488 | Modern, healthcare |
Using Custom Colors
Enter a hex code to match your brand:
- Click in the custom color field
- Enter your 6-digit hex code (e.g.,
#EA580C) - Press Enter to apply
Design TipChoose a secondary color that complements your primary color without clashing.
Good combinations:
- Blue primary + Orange secondary (classic contrast)
- Teal primary + Coral secondary (modern look)
- Purple primary + Gold secondary (premium feel)
Tag Styling
All tags using the secondary color have consistent styling:
- Background: Secondary color at 10% opacity
- Text: Secondary color at full opacity
- Shape: Pill-shaped (fully rounded corners)
- Size: Compact, easy to read
This creates a subtle, professional look that highlights important information without overwhelming the design.
Examples
Practitioner Credentials
In the hero section and team cards:
Dr. Sarah Smith [MD] [PhD] [FRCP]Each credential appears as a small pill using your secondary color.
Service Restrictions
On service cards:
Initial Assessment - 60 min[New Patients Only] [Credit Card Required]Restriction tags help patients know what to expect.
Primary vs. Secondary Color
| Aspect | Primary Color | Secondary Color |
|---|---|---|
| Usage | Buttons, headers, links | Badges, tags, labels |
| Prominence | High - main visual element | Medium - supporting element |
| Area | Large areas (buttons, bars) | Small areas (pills, badges) |
| Default | #2B9ACE (blue) | #EA580C (orange) |
Best Practices
Readability
- Ensure the color is visible on light backgrounds
- Test that pill text is readable
- Avoid colors that are too light or too dark
Brand Alignment
- Use a color from your brand palette
- Consider using an accent color from your logo
- Match other marketing materials if possible
Consistency
- Use the same secondary color across all your booking pages
- Coordinate with practitioner pages if desired
Troubleshooting
Tags Not Visible
- Check that your secondary color isn’t too light
- Very pale colors may disappear against white backgrounds
Color Not Applying
- Refresh the page after changing the color
- Ensure you’re logged in with edit permissions
Next Steps
- Hero Image - Upload your banner image
- Office Logo - Set your clinic logo