Skip to main content

​
Overview

Podifai provides a powerful global color system that allows you to define two main color palettes that can be used across all your option types. This ensures consistent branding and makes it easy to update colors across your entire customizer.

​
Color Scheme Types

​
Primary Color

The Primary Color is your brand’s main color. It’s typically used for:
  • Call-to-action buttons
  • Selected options
  • Active states
  • Accent elements
Default: #E89623 (Orange)

​
Neutral Color

The Neutral Color is used for text, borders, and backgrounds. It provides:
  • Text colors
  • Border colors
  • Background shades
  • Subtle UI elements
Default: #454343 (Dark Gray)

​
How to Set Global Colors

1

Open Global Settings

Click the Global Settings button in the editor toolbar
2

Select Color Type

Choose either Primary or Neutral color to edit
3

Pick Your Color

Use the color picker to select your desired color, or enter a hex code directly
4

Save Changes

Click Save to apply the colors to all your customizers

​
Color Shades System

When you set a primary or neutral color, Podifai automatically generates 13 color shades ranging from very light to very dark. This gives you fine-grained control over your design.

​
Available Shades

Each color generates the following shades:
ShadeDescriptionUse Case
25LightestVery subtle backgrounds
50Extra LightLight backgrounds
75LightHover states
100LightDisabled states
200Light MediumBorders
300Medium LightSecondary text
400MediumPlaceholder text
500Base ColorYour selected color
600Medium DarkPrimary text
700DarkHeadings
800Extra DarkStrong emphasis
900DarkestMaximum contrast
950Ultra DarkDeepest shade
The shade 500 is always your base color. Shades below 500 are lighter, and shades above 500 are darker.

​
Using Color Shades in Option Types

When configuring any option type, you can select specific shades for different elements:

​
Text Colors

  • Label Text: Choose from text25 to text950
  • Help Text: Select lighter shades like text300 or text400
  • Value Text: Use darker shades like text700 or text800

​
Background Colors

  • Option Background: Use light shades like bg50 or bg100
  • Selected State: Use medium shades like bg400 or bg500
  • Hover State: Use shades like bg200 or bg300

​
Border Colors

  • Default Border: Use border200 or border300
  • Active Border: Use border500 or border600
  • Focus Border: Use your primary color at border500

​
Best Practices

Ensure sufficient contrast between text and backgrounds. Use darker shades (700+) for text on light backgrounds, and lighter shades (300-) for text on dark backgrounds.
Use your brand’s primary color as the Primary Color. This ensures all customizers match your store’s branding.
Colors may appear differently on various screens. Test your color scheme on mobile devices and different browsers.
Reserve your Neutral color and its shades for text, borders, and subtle UI elements. This keeps your design clean and readable.

​
Example Color Schemes

​
E-commerce Store

  • Primary: #E89623 (Warm Orange)
  • Neutral: #454343 (Charcoal Gray)

​
Luxury Brand

  • Primary: #C9A961 (Gold)
  • Neutral: #1A1A1A (Deep Black)

​
Modern Tech

  • Primary: #3B82F6 (Blue)
  • Neutral: #6B7280 (Cool Gray)

Global Fonts

Configure global font settings

Color Shades Reference

Complete color shades reference
Changing global colors will affect all option types in all customizers. Make sure to preview your changes before publishing.