Style Variations
Overview

Style Variations Overview

WordPress Full Site Editing includes native support for Style Variations. Each variation is a self-contained configuration file located in the theme's styles/ folder that alters your website's global color palette, contrast ratios, and typography pairings without touching your content.


How Style Variations Function

  • Global Palette Tokens: Each variation replaces the 7 standard AlonePro color tokens:
    • primary: The dominant brand accent color.
    • secondary: Supporting accent and highlight tone.
    • base: Main background color (usually white or warm light).
    • contrast: Main text color (usually deep slate or charcoal).
    • paragraph: Body text color with balanced legibility.
    • surface: Card and container background tone.
    • transparent: Utility transparency token.
  • Typographic Pairings: Each variation sets a distinct font family for body text and headlines (e.g. Montserrat Alternates, Inter, Nunito, Poppins).
  • Theme Switcher Integration: Variations hook into Nextora's scheme switcher engine, enabling seamless light/dark or scheme switching on the frontend.

How to Apply a Style Variation

  1. In your WordPress dashboard, navigate to Appearance → Editor.
  2. Click the Styles icon (the circle icon in the upper-right corner).
  3. Select Browse styles.
  4. Click any of the 13 variation previews to apply it.
  5. Click Save in the top toolbar to publish the change globally.

For the complete list of color hex values and font pairings across all 13 variations, explore the Variation Catalog.