Theme Colors Setup

Before Starting

• Establish your brand's color palette first

• Recommended tool: Coolors

• Helpful resources:

  • Brand Colors: How to Choose

  • Color Psychology Guide

Default Colors

1. Background:

   • Light color for readability

   • Ensure strong contrast with text

2. Main Text:

   • Dark color for contrast

3. Light Text:

   • Alternative for dark sections

4. Border:

   • Generates multiple shades

   • Default matches chosen color

Color Schemes

1. Primary:

   • Background: Main accent color (CTAs)

   • Text: On primary elements

2. Secondary:

   • Background: Secondary elements

   • Text: On secondary elements

3. Tertiary:

   • Background: Must enable in sections

   • Text: On tertiary elements

4. Extra Colors:

   • Mobile Bar: Match announcement bar

   • Enable "Color Fade" for transitions

   • "Custom" scheme for unique sections

How Colors Function

• Body: Base color for body elements.

• Neutral: A mix of body and primary colors.

• Accent 1-3: Darker shades of the body color.

• Shade 1-3: Darker shades of the body color with slight opacity (see-through).

• Primary/Secondary/Tertiary: Directly from the color settings.

Color setting description:

Setting	Description
Background body color	Controls the main background color for the body of the site. This will also be available in other sections when selecting a color and shown as Body.
Foreground body color	Defines the primary text color used in the body content. It's best to use a color that contrasts well against Background body color.
Foreground body dark color	Alternative darker text color for body content
Background primary color	Sets the background color for primary content areas
Foreground primary color	Defines text color used in primary content sections
Background secondary color	Sets the background color for secondary content areas
Foreground secondary color	Defines text color used in secondary content sections
Background tertiary color	Sets the background color for tertiary content areas
Foreground tertiary color	Defines text color used in tertiary content sections
Bar color	Controls the color of dividing bars or horizontal elements
Background overlay	Sets the gradient overlay effect (default is a black gradient)
Input button style	Determines button appearance with options for standard, lighter, or darker styling