Skip to main content

Global Settings

Global Settings control the overall design and appearance of your entire website. Instead of styling each section individually, you set your brand colors, fonts, and styling once, and they apply everywhere. This guide shows you how to access and use these powerful design controls.

What Are Global Settings?​

Global Settings are like the "theme" for all your Promptless WP sections. When you set your brand colors, fonts, and styling preferences here, they automatically apply to every section on every page.

What Global Settings Control​

  • Colors - Your brand colors, light/dark themes, button colors
  • Typography - Fonts for headings, body text, and buttons
  • Styling - Border radius, neo-brutalist effects, text overrides
  • Smart Features - Accessibility colors, responsive adjustments

Benefits of Global Settings​

  • Consistency - All pages look unified across your site
  • Efficiency - Change colors once, update everywhere
  • Professional appearance - Cohesive brand presentation
  • Easy updates - Rebrand your site in minutes, not hours

Accessing Global Settings​

From the Editor​

  1. Open any page in the Promptless WP editor
  2. Click the settings gear icon (⚙️) in the top toolbar
  3. Right sidebar opens with global settings panels
  4. Left sidebar switches to global settings mode

What You'll See​

When you open global settings:

  • Right sidebar appears with tabbed panels (Colors, Typography, Styling)
  • Left sidebar shows current settings organized by category
  • Live preview in the center updates as you make changes
  • Save Settings button becomes available in the toolbar

[Screenshot: Global settings interface showing all panels]

How Global Settings Work​

Live Preview System​

As you make changes in global settings:

  • All sections update instantly in the preview
  • Colors change across all elements immediately
  • Fonts apply to headings and text right away
  • Effects appear as you adjust settings

Inheritance System​

Global settings work like a cascade:

  1. Global settings set the defaults for everything
  2. Individual sections can override globals if needed
  3. Custom backgrounds can trigger smart color adjustments
  4. Theme variants (light/dark) use different global color sets

Save Behavior​

Global settings have special save behavior:

  • Changes apply immediately to the preview
  • Must click "Save Settings" to make changes permanent
  • Unsaved changes warning appears if you try to leave
  • All pages update when you save global settings

Colors Tab​

Primary Brand Colors​

Primary Color

  • Purpose: Main brand color for buttons, links, accents
  • Used for: Call-to-action buttons, links, icons
  • Best practice: Use your main brand color
  • Examples: Blue for tech, green for nature, red for urgency

Secondary Color

  • Purpose: Supporting brand color for variety
  • Used for: Secondary buttons, alternative accents
  • Best practice: Complementary to primary color
  • Examples: Lighter shade of primary, or accent color

Text Colors​

Main Text Color

  • Purpose: Primary text for headings and body content
  • Used for: All section headings, paragraph text
  • Best practice: Dark color for readability
  • Default: Dark gray (#1f2937)

Muted Text Color

  • Purpose: Secondary text, eyebrow headings, captions
  • Used for: Less important text, descriptions, labels
  • Best practice: Lighter than main text but still readable
  • Default: Medium gray (#6b7280)

Text on Dark Backgrounds

  • Purpose: Text color when sections use dark backgrounds
  • Used for: Dark theme sections, dark custom backgrounds
  • Best practice: Light color with good contrast
  • Default: White or light gray

Background Colors​

Main Background

  • Purpose: Default background for light-themed sections
  • Used for: Section backgrounds, page background
  • Best practice: Light, neutral color
  • Default: White (#ffffff)

Surface Background

  • Purpose: Card backgrounds, elevated elements
  • Used for: Feature cards, pricing plans, content boxes
  • Best practice: Slightly different from main background
  • Default: Very light gray (#f9fafb)

Dark Mode Colors​

All light mode colors have dark mode equivalents:

  • Dark Background - Main background for dark sections
  • Dark Surface - Card backgrounds in dark mode
  • Dark Text - Light text for dark backgrounds
  • Dark Muted Text - Secondary text for dark mode
  • Dark Borders - Border colors for dark sections

[Screenshot: Colors tab showing all color controls]

Typography Tab​

Font Selection​

Heading Font

  • Purpose: All section headings (H1, H2, H3, etc.)
  • Options: System fonts, Google Fonts, custom uploads
  • Best practice: Bold, readable font that matches your brand
  • Examples: Roboto, Inter, Montserrat for modern; Georgia, Times for traditional

Body Font

  • Purpose: Paragraph text, descriptions, general content
  • Options: Same selection as heading font
  • Best practice: Highly readable, not too decorative
  • Examples: System fonts for performance, Google Fonts for style

Button Font

  • Purpose: Text inside buttons and call-to-action elements
  • Options: Usually same as heading or body font
  • Best practice: Bold, clear, easy to read at small sizes

Font Weights​

Heading Font Weight

  • Options: Light (300), Regular (400), Medium (500), Semibold (600), Bold (700), Extrabold (800), Black (900)
  • Best practice: Bold or Semibold for impact
  • Avoid: Light weights for headings (hard to read)

Body Font Weight

  • Options: Same weight options as headings
  • Best practice: Regular (400) or Medium (500)
  • Avoid: Too bold for body text (tiring to read)

Button Font Weight

  • Options: Same weight options
  • Best practice: Medium or Semibold for prominence
  • Purpose: Make buttons stand out without being overwhelming

Custom Font Uploads​

Supported Formats

  • WOFF2 files (recommended, best compression)
  • WOFF files (good compatibility)
  • TTF files (larger file size)

Upload Process

  1. Click "Upload Custom Font"
  2. Choose your font file
  3. Give font a name (appears in font picker)
  4. Font appears in all font selection dropdowns
  5. Test font by applying to headings or body

Best Practices for Custom Fonts

  • Use WOFF2 format for best performance
  • Include web-safe fallbacks in case font doesn't load
  • Test loading speed - custom fonts can slow down pages
  • Ensure legal licensing for web use

[Screenshot: Typography tab with font selection and upload interface]

Styling Tab​

Border Radius Settings​

Global Border Radius

  • Purpose: Controls roundness of all elements (buttons, cards, images)
  • Options:
    • 0px - Sharp, square corners (minimal/modern)
    • 4px - Slightly rounded (professional)
    • 8px - Moderately rounded (friendly)
    • 12px - Very rounded (playful)
    • Custom - Set exact pixel value

What Border Radius Affects

  • Button corners
  • Card and section backgrounds
  • Image corners
  • Form input fields
  • Any element with a background or border

Neo-Brutalist Mode​

What It Is A bold, high-contrast design style featuring:

  • Thick, dark borders on elements
  • High contrast colors for dramatic effect
  • Sharp, angular design with minimal rounding
  • Bold, impactful appearance

When to Use

  • Creative agencies or artistic businesses
  • Tech startups wanting to stand out
  • Youth-focused brands or edgy products
  • Bold, confident brand personalities

When to Avoid

  • Professional services needing trust and credibility
  • Healthcare or financial services requiring calm appearance
  • Accessibility concerns - can be hard to read for some users

Effects When Enabled

  • Thick borders added to buttons and cards
  • Higher contrast between elements
  • Sharper, more angular appearance
  • Bold, dramatic visual impact

Text Color Overrides​

Button Text Color Override

  • Purpose: Force specific text color for buttons regardless of background
  • Use case: When automatic contrast isn't giving desired result
  • Options: Any color, typically white or dark
  • Warning: Can break accessibility if not chosen carefully

Smart Color Override

  • Purpose: Override automatic smart color calculations
  • Advanced feature: Most users should leave this alone
  • Use case: When smart colors don't match brand requirements
  • Risk: Can create accessibility problems if misused

[Screenshot: Styling tab showing border radius and neo-brutalist options]

Advanced Features​

Smart Accessibility Colors​

What It Does Automatically adjusts text colors to ensure proper contrast:

  • Analyzes background colors of each section
  • Calculates optimal text color for readability
  • Maintains accessibility standards (WCAG guidelines)
  • Works with custom section backgrounds

How It Works

  1. Section gets custom background color
  2. System analyzes if default text color has enough contrast
  3. If contrast is poor, automatically adjusts text color
  4. Maintains readability while preserving design

Benefits

  • Always readable text regardless of background
  • Meets accessibility standards automatically
  • Saves manual work adjusting colors
  • Prevents design mistakes that hurt usability

When to Disable

  • Specific brand requirements override accessibility
  • Designer prefers manual control over automatic adjustments
  • Conflicts with existing styling or theme

Design Presets​

Color Presets Pre-designed color combinations you can apply instantly:

  • Professional Blue - Corporate, trustworthy appearance
  • Creative Purple - Modern, innovative feel
  • Nature Green - Environmental, health-focused
  • Warm Orange - Friendly, approachable brand
  • Elegant Black - Sophisticated, premium feel

How to Use Color Presets

  1. Click "Color Presets" button
  2. Browse available options
  3. Click on any preset to preview
  4. Apply preset to use those colors
  5. Customize further if needed

Font Presets Pre-selected font combinations that work well together:

  • Modern Sans - Clean, contemporary appearance
  • Classic Serif - Traditional, authoritative feel
  • Friendly Rounded - Approachable, casual brand
  • Bold Display - Dramatic, attention-grabbing
  • System Fonts - Fast-loading, universal compatibility

Benefits of Using Presets

  • Professional combinations designed by experts
  • Save time choosing colors and fonts
  • Ensure good contrast and readability
  • Starting point for further customization

[Screenshot: Preset selection modals showing color and font options]

Saving and Managing Changes​

When to Save​

Save Required For:

  • All color changes
  • Font selections and weights
  • Styling options (border radius, neo-brutalist)
  • Preset applications

Auto-Applied Changes:

  • None - all global changes require manual save

Save Process​

  1. Make your changes in any global settings tab
  2. Preview updates immediately in center area
  3. Click "Save Settings" in toolbar when happy
  4. Confirmation appears when save is complete
  5. All pages update with new global settings

Unsaved Changes Warning​

If you try to leave global settings with unsaved changes:

  • Warning dialog appears asking if you want to leave
  • Choose "Stay" to continue editing
  • Choose "Leave" to discard changes
  • Save first to keep changes before leaving

Reverting Changes​

Before Saving

  • Refresh the page - reloads last saved settings
  • Click different tab and back - resets current tab
  • Make opposite changes manually

After Saving

  • No undo feature for global settings
  • Must change settings back manually
  • Consider keeping notes of previous settings
  • Take screenshots before major changes

Testing Your Changes​

Preview Across Sections​

When adjusting global settings:

  1. Create test page with multiple section types
  2. Apply global changes and review all sections
  3. Check light and dark variants of sections
  4. Test different content lengths and layouts

Device Testing​

Global settings should look good on all devices:

  • Desktop - Full resolution, wide screens
  • Tablet - Medium screen, touch interface
  • Mobile - Small screen, thumb navigation
  • Check text readability at all sizes

Accessibility Testing​

Verify your global settings maintain accessibility:

  • Color contrast meets standards (4.5:1 minimum)
  • Text remains readable on all backgrounds
  • Focus indicators are visible
  • Color isn't the only way to convey information

Common Global Settings Workflows​

Setting Up New Brand​

  1. Choose primary and secondary brand colors
  2. Set main and muted text colors for good contrast
  3. Select heading and body fonts that match brand
  4. Configure border radius for desired personality
  5. Test across multiple sections before saving
  6. Save settings and check live site

Updating Existing Brand​

  1. Take screenshots of current appearance
  2. Make incremental changes rather than complete overhaul
  3. Test one change at a time (colors, then fonts, then styling)
  4. Check all existing pages after each change
  5. Get feedback before making changes permanent

Seasonal Updates​

  1. Create variations of main brand colors
  2. Adjust for holidays or special promotions
  3. Keep changes subtle to maintain brand recognition
  4. Revert after campaign ends

Troubleshooting Global Settings​

Changes Not Appearing​

Check These Items:

  • Save Settings button clicked and confirmed
  • Browser cache cleared (Ctrl+F5 or Cmd+Shift+R)
  • Correct page being viewed (not cached version)
  • Section overrides not conflicting with global settings

Fonts Not Loading​

Possible Causes:

  • Internet connection required for Google Fonts
  • Custom fonts not uploaded properly
  • Browser cache serving old fonts

Solutions:

  • Wait for font loading (can take a few seconds)
  • Re-upload custom fonts if they don't appear
  • Use system fonts as fallback for performance

Colors Look Wrong​

Common Issues:

  • Monitor color settings affecting appearance
  • Browser color profiles showing differently
  • Accessibility overrides adjusting colors automatically
  • Theme conflicts with global settings

Solutions:

  • Test on multiple devices to verify appearance
  • Check contrast ratios with accessibility tools
  • Disable smart accessibility temporarily to test
  • Review section-specific overrides

Next Steps​

After setting up your global design system:

  1. Learn about Colors & Branding for deeper color control
  2. Explore Typography for advanced font techniques
  3. Master Styling Options for fine-tuned control
  4. Understand Responsive Design for all devices

Need More Help?​

Global Settings are the foundation of your site's design - invest time in getting them right and everything else becomes easier!