Customising Your Branding

Customizing Your Branding

Where to Find This

Navigate to Services → Website Editor tab.

Personalize your website with custom colors, fonts, and spacing to match your brand.

What You Can Customize

The Global Theme panel lets you control your website's visual style:

Element	What It Changes
Brand Colors	Primary, accent, and supporting colors
Custom Colors	Add your own named colors for specific uses
Typography	Font family, sizes, and line heights
Text Colors	Colors for titles, body text, and secondary text
Background Colors	Page and navbar backgrounds
Spacing	Consistent spacing throughout your site
Border Radius	Rounded corners on buttons and cards

Accessing Theme Settings

1. Open the Website Editor

   • Go to Services → Website Editor tab

2. Open Theme Panel

   • Click the Theme icon in the left sidebar
   • The Global Theme panel opens with three tabs: Colors, Type, Advanced

Customizing Colors

The Colors tab provides complete control over your site's color scheme.

Brand Colors

Your core brand colors used throughout the site:

Color	Used For
Primary Color	Main brand color - headers, primary buttons, key highlights
Primary Light	Lighter variant for hover states and backgrounds
Primary Dark	Darker variant for active states and emphasis
Accent Color	Secondary color for call-to-action buttons and highlights

To change a brand color:

1. Click the color swatch next to the color name.
2. Use the color picker to select a new color, or enter a hex code (e.g., #3B82F6).
3. Changes apply automatically to your site.

Background & Layout Colors

Control the background colors:

• Background - Main page background color
• Navbar Background - Navigation bar background color

Text Colors

Set colors for different text elements:

• Title Text - Color for headings and titles
• Primary Text - Main body text color
• Secondary Text - Supporting text, captions, and metadata

Custom Colors

Add your own named colors for specific purposes:

To add a custom color:

1. Scroll to Custom Colors section at the top.
2. Type a name in the input field (e.g., brand-blue, highlight-yellow).
3. Click the + button.
4. Select the color using the color picker.
5. The color is available as --custom-[name] in CSS.

To delete a custom color:

• Click the trash icon next to the color name.

Tip: Custom colors are useful for special sections, promotional banners, or seasonal themes without changing your core brand colors.

Customizing Typography

The Type tab controls fonts and text sizing.

Font Family

Choose from professional web fonts:

1. View current font

   • The active font is shown at the top with a preview.

2. Select a new font

   • Click any font from the list to apply it.
   • The site updates immediately.
   • Active font shows a checkmark.

Available fonts include:

• Inter - Modern, readable sans-serif
• Roboto - Google's versatile font
• Open Sans - Clean and friendly
• Montserrat - Bold and geometric
• Lato - Elegant and professional
• Poppins - Rounded and contemporary

Base Font Size

Set the default text size for your site:

Using presets:

• Click preset buttons: 12, 14, 16, 18, or 20.
• Common choice: 16px for readability.

Custom size:

1. Enter a number in the custom input field.
2. Add "px" automatically.
3. Typical range: 14-20px.

Note: Heading sizes scale proportionally from the base size.

Line Height

Control spacing between lines of text:

Setting	Value	Best For
Tight	1.25	Compact layouts, headings
Snug	1.375	Dense content
Normal	1.5	Standard body text (recommended)
Relaxed	1.625	Easy reading, accessibility
Loose	2	Spacious layouts

Heading Sizes

Fine-tune heading sizes (collapsed by default):

• XL Size - For large headings
• 2XL Size - For extra-large titles

Enter values in pixels (e.g., 24 for 24px).

Advanced Settings

The Advanced tab provides control over spacing and borders.

Spacing Scale

Set consistent spacing values used throughout your site:

Size	Default	Typical Use
SM	8px	Tight spacing, small gaps
MD	16px	Standard spacing between elements
LG	24px	Section spacing, larger gaps
XL	32px	Major sections, page margins

To change:

1. Enter a number in pixels.
2. Changes apply to all components using that spacing size.

Border Radius

Control how rounded corners appear on buttons, cards, and containers:

Size	Default	Appearance
SM	4px	Slightly rounded
MD	8px	Standard rounded corners
LG	12px	Very rounded

Style tips:

• Modern sites: 8-12px
• Professional/corporate: 4-6px
• Playful/creative: 12px+

CSS Variables

Copy CSS Variables:

• Exports your entire theme as CSS variables.
• Useful for custom code or external stylesheets.
• Click to copy to clipboard.

Reset to Defaults:

• Restores all theme settings to original values.
• Cannot be undone.
• Use if you want to start fresh.

Saving Your Changes

All changes are automatically saved as you make them. There's no Save button - your site updates in real-time.

Tip: Open your site in a new tab while editing to preview changes on the live site.

Tips for Great Branding

Start with brand colors Set your primary and accent colors first - these drive the rest of your design.

Use the 60-30-10 rule

• 60% primary/background colors
• 30% secondary/accent colors
• 10% highlights and calls-to-action

Keep text readable Ensure sufficient contrast between text and background colors. Dark text on light backgrounds (or vice versa) works best.

Be consistent Use the same spacing scale throughout. Don't mix 8px and 10px spacing arbitrarily.

Test on mobile Preview your site on a phone to ensure colors and fonts look good on small screens.

Less is more Stick to 2-3 brand colors plus custom colors for specific features. Too many colors create visual clutter.

Troubleshooting

Changes not appearing on my site?

• Refresh your browser (Cmd+R or Ctrl+R)
• Clear browser cache and hard reload (Cmd+Shift+R)
• Check you're viewing the correct page/site

Custom color not working in my code?

• Use the CSS variable format: var(--custom-your-color-name)
• Ensure the color name uses hyphens, not spaces
• Check the CSS Preview section to verify the variable name

Font looks different than expected?

• Web fonts may load differently across browsers
• Some fonts are optimized for specific sizes
• Preview on multiple devices to confirm appearance

Want to undo all changes?

• Use the Reset to Defaults button in the Advanced tab
• This cannot be undone - consider copying CSS Variables first as a backup