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

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

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

Heading Highlight Feature (New in v1.0.8)

What It Does Allows you to highlight portions of your headings in your primary brand color by wrapping text in curly braces.

How to Use Wrap any text in curly braces to highlight it:

• Type: {Build Your Dream} Website Today
• Result: "Build Your Dream" appears in your primary brand color, "Website Today" in normal text color

Example Usage

Input: "We Help You {Grow Faster} Than Ever"
Display: "We Help You" (normal) + "Grow Faster" (highlighted in primary color) + "Than Ever" (normal)

Where It Works

• All section heading fields (main headings)
• Hero headlines
• Feature headings
• Any heading field in the editor

Best Practices

• Highlight key words that convey your main message or value proposition
• Use sparingly - highlighting too much reduces impact
• Choose action words or benefits to emphasize
• Keep highlighted portions short (2-4 words work best)

Helper Text All heading fields in the editor display helper text explaining this feature:

"Wrap text in {curly braces} to highlight it in your primary color"

Styling Tab

Button Controls

Button Uppercase Toggle (Global Setting)

Control whether all button text displays in uppercase across your entire site.

How to access: Global Settings > Styling tab > Button Uppercase

Options:

• Enabled: All button text transforms to UPPERCASE
• Disabled: Button text displays as typed

Applies to: All buttons across all sections (primary, secondary, ghost)

When to use uppercase:

• Call-to-action buttons and modern, bold designs
• Headers and marketing pages where you want strong visual impact
• Brands with bold, confident personalities

When to use normal case:

• More approachable and casual brands
• Long button text that becomes harder to read in uppercase
• Softer, friendlier design aesthetics

---

Button Icon Support (Per-Button Setting)

Add visual icons to individual buttons for enhanced appearance and clearer communication.

How it works: Each button in any section can have its own icon:

• Primary button icon
• Secondary button icon
• Ghost button icon

How to add icons:

1. Edit any section with buttons
2. Find the button fields in the Content tab
3. Click the icon picker next to the button
4. Search or browse the icon library
5. Select your icon and save

Icon library: Access to 100,000+ icons via Iconify, including:

• Material Symbols
• Heroicons
• Tabler Icons
• Font Awesome
• And many more icon sets

Icon positioning: Icons appear alongside button text based on common conventions

Best practices:

• Use simple, recognizable icons that relate to the button action
• Arrows for navigation (→, ←)
• Download icons for downloads
• Play icons for video or media
• Calendar icons for scheduling
• Keep icon style consistent across your site

---

Eyebrow Text Transform

Control how eyebrow headings are displayed across all your sections with text transformation options.

What It Does Eyebrow headings (the small text above main headings) can be automatically transformed to match your brand style preferences.

Available Options:

• None: Display text exactly as typed
• Uppercase: TRANSFORM ALL LETTERS TO CAPITALS
• Lowercase: transform all letters to lowercase
• Capitalize: Capitalize The First Letter Of Each Word

When to Use Each Option:

Uppercase (Most Common)

• Creates strong visual hierarchy
• Works well for short labels: "OUR SERVICES", "ABOUT US"
• Professional, authoritative appearance
• Industry standard for many websites

None

• When you want full control over capitalization
• For mixed-case brand terms
• More casual, friendly tone

Lowercase

• Modern, minimal aesthetic
• Startup and tech-focused brands
• Creates approachable, casual feel

Capitalize

• Title-case appearance
• Works well for longer phrases
• Balanced between formal and casual

How to Set Text Transform:

1. Open Global Settings (gear icon in toolbar)
2. Go to the Styling tab
3. Find "Eyebrow Text Transform"
4. Select your preferred option
5. Preview updates across all sections immediately
6. Save Settings to apply globally

Note: This setting applies to all eyebrow headings across your entire site. Individual sections cannot override this global setting.

Image Styling Controls

Image Border Radius

• Purpose: Controls roundness of image corners across all sections
• Lives in: Global Settings → Borders → Image Border Radius (see Border Radius below for the full preset list)
• Default: Very Rounded (12px) — gives images a friendly, modern feel out of the box
• Applies to: Featured images, team photos, testimonial images, card images, gallery items
• Best practice: Match the rounding character of your Card Border Radius for visual consistency, or set Image to one step rounder than Card for a softer feel

Image Box Shadow

• Purpose: Adds depth and visual separation to images
• Options:
  • None - Flat images with no shadow
  • Subtle - Light shadow for gentle depth
  • Medium - Balanced shadow for clear separation
  • Strong - Prominent shadow for dramatic effect
• Best for: Making images stand out from backgrounds, especially on white/light sections

Disable Image Styling

• Purpose: Remove all automatic image styling when needed
• Use case: Images that already have borders, shadows, or custom styling
• Result: Images display with no border radius or shadows applied
• When to use: Working with pre-styled brand imagery or when you want complete control

Border Radius

The Borders tab in Global Settings has four separate radius controls — one each for buttons, cards, icons, and images — so you can mix and match per element type. For example: pill buttons (Pill), gently rounded cards (Rounded, 8px), circular icons (Circle), and larger image radii (Very Rounded, 12px).

Each control is a compact dropdown showing the current preset's swatch, name, and pixel value. Click the row to open a list of every preset with its own visual corner-radius preview; the currently selected one is highlighted with a checkmark.

The four controls

Control	What it affects	Default
Button Border Radius	Primary, secondary, and ghost button corners across every section type	Rounded (8px)
Card Border Radius	Card backgrounds in Features, Testimonials, Pricing, and Team sections	Rounded (8px)
Icon Border Radius	The square chip backgrounds behind iconify icons in Features and Stats sections	Rounded (8px)
Image Border Radius	Featured images, team photos, testimonial images, gallery items, and other section imagery	Very Rounded (12px)

Available presets

All four controls share the same preset list, with one variation:

• None (0px) — sharp, square corners
• Sharp (4px) — minimal rounding for a clean, modern feel
• Subtle (6px) — slightly softer than Sharp
• Rounded (8px) — balanced rounding, good for most designs
• Very Rounded (12px) — more pronounced curves
• Extra Rounded (16px) — strong rounding for friendly, playful designs
• Curved (24px) — heavy rounding, distinctive look
• Pill / Circle (fully rounded ends) — Buttons see this as Pill (stadium shape); icons see it as Circle (the same value applied to a square chip produces a perfect circle). Cards and Images don't have this option since fully-rounded card or image shapes rarely make design sense.

Keyboard support

Each dropdown is a fully-accessible combobox. Tab to focus it, Enter or Space to open, Up/Down arrows to move through the options (or Home/End to jump to the first/last), Enter or Space to select, Escape to close without changing.

Live preview

As you select a preset, every section in the editor preview re-renders with the new value immediately. Click Save Settings to apply your changes site-wide.

Card CTA Style

A single toggle in Global Settings → Borders controls how per-card "Learn More"-style links render across every card-based section on your site. Pick one of two styles and it applies everywhere consistently — no need to set the choice on each card or each section.

The two options

Style	What you get	Best for
Text Link (default)	A clean text link with a small arrow icon next to it. Inherits the section's link color so it blends naturally with surrounding copy.	Editorial layouts, content-heavy pages, professional services, and any design where the rest of the card content should lead the eye.
Button	A compact pill or rounded button styled with your primary brand color. Inherits your global button radius and icon settings.	Sales pages, marketing-driven layouts, e-commerce, and anywhere you want the CTA to read as the obvious next action.

Sections affected

The toggle controls per-item CTAs in:

• Features (default and showcase variants)
• Steps (per-step "Learn more" link)
• Team (per-member profile link)
• Checklist (per-item link)
• Stats (per-stat "Learn more")
• Gallery (per-image link)
• Post Grid (the "Read More" link on each post card)
• Promptless theme archive cards (when using the Promptless theme)

How it works

• The CTA only renders when an item has a link. Cards without a link in the editor stay clean — they don't get an empty button or a stray arrow.
• Editor preview matches the published frontend. Toggle between Text Link and Button and every affected section re-renders instantly. What you see in the preview is what your visitors get.
• Button mode inherits your global button radius and icon. If you've set Button Border Radius to Pill and a default button icon, every card CTA in button mode uses those.

Sections this does NOT affect

This setting only controls per-item card CTAs. It does not change:

• Section-level buttons (the buttons you add at the top or bottom of a section's content), which keep their existing layout and labels.
• Hero card CTAs in Features hero variant, where the entire card is wrapped in a link and an inner CTA would be redundant.
• Minimal / hero / bordered Features variants, which use a different card layout where text-link CTAs are already part of the design.
• Pricing cards and Product Grid cards, which have their own dedicated CTA button at the bottom of each card.

Card Image Style

A second toggle in Global Settings → Borders controls how images sit inside cards across your site. This is a purely visual style — no card content moves, only the image presentation changes.

The two options

Style	What you get	Best for
Flush (default)	The card image stretches edge-to-edge at the top of the card, sharing the card's outer border radius. Classic, clean look — matches how most card designs treat thumbnails.	Editorial layouts, news cards, simple product grids, and anywhere you want the image to read as a unified part of the card.
Inset	The image is inset from the card edges with its own smaller border radius. The card surface frames the image with a visible margin on the top, left, and right.	Photo-focused cards, gallery-style layouts, or designs where you want the image to read as a distinct visual element framed by the card.

Sections affected

The toggle affects card images in:

• Features (default card variant — not minimal, hero, or bordered)
• Post Grid (post thumbnails on each card)
• Product Grid (product images on each card)
• Pricing (products-mode cards with product images)
• Promptless theme archive cards (when using the Promptless theme)

How it works

• Card and image radii coordinate automatically. When Inset is active, the inset image's border radius is set to half the card's border radius. So a Card Border Radius of Very Rounded (12px) gives an inset image radius of Sharp (6px). This produces a visually proportional pairing that holds up at every Card Border Radius preset, from None (both sharp) all the way to Pill (both fully rounded).
• Inset images sit slightly wider than the text. The image uses a 16px matte on all framed sides, letting it extend a touch past the card's text block on each side — a subtle wide-frame look that keeps the image reading as the card's visual anchor rather than another text-width element.
• Image content stays put. Only the image wrapper changes — the heading, body text, and CTA below it don't shift.

Sections this does NOT affect

This setting only changes top-of-card thumbnail images on card-based layouts. It does not affect:

• Section backgrounds (the section-level background image).
• Gallery section images, where the image IS the card.
• Hero section images, which use a different layout pattern.
• Features minimal / hero / bordered variants, which already use their own image treatment by design.
• Team and Testimonials avatars, which are circular/portrait-style images, not card thumbnails.
• Steps section items, which sit on the section background rather than inside a surface card.

Recommended pairings

Card Border Radius	Card Image Style	Result
None or Sharp	Flush	Architectural, magazine-style layout.
Rounded (8px)	Flush	Standard modern card look.
Very Rounded (12px)	Inset	Soft, gallery-style framing where the image reads as a distinct element.
Extra Rounded (16px+)	Inset	Friendly, content-marketing layouts.

Card & Button Style

The Card & Button Style panel groups the treatments that shape how cards and buttons render across every section — one place to set the character of your surfaces instead of hunting through per-section options.

Borderless cards

A Borderless card option keeps the card's surface color and corner radius but drops the outline entirely — a softer, flatter look that lets your background and surface colors do the separating. It works well with:

• Tinted section backgrounds, where the surface color alone defines the card
• Minimal, editorial designs where visible outlines feel heavy
• Dark mode, where borders often read harsher than intended

Card treatments apply consistently across Features, Pricing, Testimonials, Post Grid, and the other card-based sections — including Inline feature items, which honor your card treatment like any other card.

Neo-Brutalist Mode

What It Is Neo-brutalism is a bold, striking design trend that emphasizes raw, unpolished aesthetics with strong visual impact. In Promptless WP, Neo-Brutalist Mode transforms your sections with:

• Thick, dark borders (typically 2-3px solid black) on buttons, cards, and interactive elements
• High contrast colors creating dramatic visual separation
• Sharp, angular design with minimal or zero border radius
• Bold, impactful shadows that create a "stacked paper" effect
• Raw, confident typography that demands attention

How to Enable Neo-Brutalist Mode

1. Open Global Settings (gear icon in toolbar)
2. Navigate to the Styling tab
3. Toggle "Neo-Brutalist Mode" to enabled
4. Preview changes in the canvas
5. Save Settings to apply across all pages

What Changes When Enabled

Buttons:

• Thick black borders replace subtle styling
• Bold drop shadows create depth
• Hover effects become more dramatic
• Border radius typically reduces to sharp corners

Cards and Surfaces:

• Strong outline borders on feature cards, pricing plans, testimonials
• Enhanced shadow effects for visual separation
• Higher contrast between surface and background

Interactive Elements:

• Form inputs receive bold borders
• Toggle and checkbox styling updates
• More dramatic focus states

When to Use Neo-Brutalist Mode

Perfect For:

• Creative agencies showcasing bold, unconventional work
• Tech startups wanting to differentiate from corporate competitors
• Youth-focused brands targeting Gen Z and millennial audiences
• Portfolio sites for designers, artists, and creators
• Event websites for concerts, festivals, art shows
• Fashion and streetwear brands with edgy aesthetics
• Gaming and entertainment companies
• Bold SaaS products positioning as industry disruptors

When to Avoid:

• Professional services (law, accounting) where trust and credibility require understated design
• Healthcare providers where calm, reassuring aesthetics are essential
• Financial institutions where stability and tradition matter
• Luxury brands that rely on elegant, subtle design
• Accessibility-focused sites - while still accessible, the bold styling may be visually overwhelming for some users
• Conservative corporate environments expecting traditional design

Design Tips for Neo-Brutalist Mode

Color Choices:

• Primary colors (red, blue, yellow) work exceptionally well
• High contrast black-and-white creates classic brutalist feel
• Neon accents add modern edge
• Avoid pastels and muted tones that conflict with bold borders

Typography:

• Bold, condensed fonts complement the style
• Large headlines create visual anchors
• Sans-serif fonts work best for clean impact
• Consider uppercase headings for extra boldness

Content Approach:

• Keep copy concise and punchy
• Strong calls-to-action fit the bold aesthetic
• Embrace asymmetry and unconventional layouts
• Let white space breathe around bold elements

Combining with Other Settings

Border Radius: When Neo-Brutalist Mode is enabled, consider setting global border radius to 0-4px for the sharpest, most authentic brutalist look.

Custom Backgrounds: Bold section backgrounds (bright colors, stark contrasts) enhance the brutalist effect.

Theme Variants:

• Light theme with black borders = classic brutalist
• Dark theme with white/bright borders = modern industrial feel

Accessibility Considerations

Neo-Brutalist Mode maintains accessibility standards:

• Color contrast ratios remain WCAG compliant
• Focus indicators are enhanced, not reduced
• Text remains readable with proper sizing
• Interactive elements remain clearly identifiable

However, the bold visual style may be overwhelming for users sensitive to high contrast or visual complexity. Consider providing a mode toggle for users who prefer softer design.

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

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 in the modal
3. View the visual preview showing how colors appear in context
4. Click on any preset to select it
5. Apply preset to use those colors
6. Customize further if needed

Color Preset Visual Preview (New in v1.1.5) The color preset modal now includes a visual preview pane that shows you exactly how each color scheme will look before you apply it:

• See colors in context - Preview shows buttons, cards, and text with the preset colors
• Compare options easily - Visual preview updates as you browse presets
• Make confident decisions - No more guessing how colors will look together
• Preview both themes - See how colors appear in light and dark modes

Favoriting Presets (New in v1.3.0) Each preset card in the color preset modal now has a star icon. Click the star to add a preset to your favorites — the curated shortlist that surfaces in the per-Section palette picker. Custom presets you save are automatically favorited; built-in presets are favorited manually. See Colors & Branding for the full favorites workflow.

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

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 Spacing & Layout for fine-tuned control
4. Understand Theme Variants for light and dark sections

Need More Help?

• Check Design System overview for related guides
• Review FAQ for common questions
• Read Troubleshooting for technical issues

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