Spectra Global Styles

Introduction

Global Styles is Spectra’s built-in design system manager. It lets you define your site’s colors, typography, and UI styling in one place, create your own CSS variables, classes, and keyframes, and apply reusable utility classes to any Spectra block. Everything now lives inside the block editor. There is no separate admin dashboard. You open Global Styles from any Spectra block and manage your entire design system without leaving the page you are editing.

How to Open Global Styles

1. Select any Spectra block in the editor.
2. In the Block settings sidebar, locate the Global Styles panel.
3. Click Manage Global Styles to open the Global Styles window.

The window is organized into three sections in the left sidebar:

• Design System: The Style Guide, where you control colors, typography, and UI styling for your whole site.
• Custom CSS: CSS Variables, Classes & CSS, and Keyframes for advanced customization.
• Reference: Block Defaults, Token Browser, and Cheat Sheet to help you discover and apply what is available.

Style Guide

The Style Guide is the heart of your design system. It has three tabs: Colors, Typography, and UI Styling. Use the Shuffle button in the top bar to explore variations across the active tab. Locked items are excluded from shuffle, so anything you have finalized stays untouched. Click Save changes to apply your selections site-wide.

Colors

Your brand colors automatically expand into accessible shade ramps and section schemes, so you only need to set a handful of base colors.

Color Presets: Ready-made palettes you can apply in one click, such as Modern SaaS, Minimal Clean, Bold Creative, Editorial Premium, Startup Fresh, and Warm Organic. Selecting a preset updates all brand colors at once.

Colors: Your active palette, shown as individual color cards.

• Neutrals: The grayscale ramp used for text, borders, and backgrounds.
• Primary: Your main brand color.
• Secondary: A supporting brand color.
• Accent: A highlight color for emphasis.
• Success, Error, Info, Warning: Semantic colors for states and feedback.

Each color card shows its hex value and generated shades. Use the lock icon to keep a color fixed, since locked colors are skipped when you shuffle, and the remove icon to drop optional colors like Secondary or Accent.

Typography

Set your font pairing, scale, and weight once, and it applies to every heading and paragraph on the site.

Fonts: Choose a curated pairing from the dropdown or build a custom pairing. Heading and Body fonts are set separately, with Google Fonts supported. Use the lock icon to fix a font in place so shuffle never replaces it, and the shuffle icon on an individual slot to try alternatives for that font only.

Scale & Weight:

• Size: Controls the overall type scale. Options: Small, Regular, Large.
• Weight: Controls heading weight. Options: Normal, Medium, Bold.
• Style: Controls heading treatment. Options: Default, Spacious, Uppercase.

UI Styling

Controls the look of buttons, forms, cards, and sections, plus global roundness, spacing, and shadows.

Buttons & Forms:

• Button Style: Solid, Soft, Outline, or Elevated.
• Input Style: Boxed, Soft, or Underlined.

Cards & Sections:

• Card Style: Flat, Outlined, Tinted, or Elevated.

States: A live preview strip showing how buttons look in Default, Hover, Active, Focus, and Disabled states based on your current selections.

Customize:

• Roundness: Sharp, Default, Soft, or Full corner rounding across the UI.
• Spacing Density: Compact, Default, or Spacious spacing rhythm.
• Shadow Depth: None, Subtle, Medium, or Deep shadows.

CSS Variables

Create your own CSS custom properties for use anywhere on your site. Custom variables are emitted inside a :root block, so any block or CSS rule can use them with var(–name).

Adding a Variable:

1. Enter the variable name in the Add variable field. The double dash prefix is added automatically, so type brand-color to get –brand-color.
2. Enter the value. Any valid CSS value works, including colors, dimensions, fonts, and calc() expressions.
3. Click Add, then Save.

Managing Variables:

• Edit: Change a value directly in its field and save.
• Delete: Click the red remove icon next to a variable.
• Bulk Edit: Edit all variables at once in a single editor.

Classes & CSS

Create reusable CSS classes with full state support and a live preview. All custom classes use the gs- prefix, which is added automatically.

The Classes List: The main screen lists all your saved classes. Each entry shows the class name, such as .gs-button-glass, and its declaration count. Use the pencil icon to edit a class and the red remove icon to delete it. Use the search field to filter classes quickly as your list grows.

Creating a Class:

1. Type a class name in the field at the top, for example hero-section. The gs- prefix is shown beside the field and added automatically.
2. Click Create. The class is saved as .gs-hero-section and added to your list.
3. Click the pencil icon on the class to open the editor.
4. Choose a State from the dropdown. Default is the base style, with interactive states like hover available separately.
5. Write your CSS in the code editor. Syntax highlighting and standard CSS are fully supported.
6. Check the Live preview panel on the right, which renders a sample block with your class applied and updates as you type.
7. Click Save.

Custom classes appear in the Global Styles dropdown on every Spectra block and in Block Defaults.

Keyframes

Create named CSS animations and use them on any block. Named keyframes are injected into the site stylesheet and can be used via animation-name in your custom CSS or the animate-{name} utility class on any block.

The Keyframes List: The main screen lists all your saved keyframes, such as @keyframes pulse. Use the pencil icon to edit a keyframe and the red remove icon to delete it.

Creating a Keyframe:

1. Under New keyframe, enter a name, for example fadeIn.
2. Set the Animation settings:
   • Duration: Preset speeds, with 0.3s (Default) as the starting value.
   • Easing: Timing functions such as Ease Out or Bounce.
   • Repeat: How many times the animation runs, such as Once or Infinite.
3. Click Create. The keyframe is added to your list.
4. Click the pencil icon to open it and write the stops in the Keyframe body editor. Write the stops only, without the outer @keyframes wrapper. For example:

0% {
  opacity: 0;
  transform: translateY(8px);
}
100% {
  opacity: 1;
  transform: translateY(0);
}

5. The Usage field shows the final animation shorthand generated from your settings. Click Copy to use it in your custom classes.
6. Click Save keyframe.

Block Defaults

Block Defaults pre-apply utility classes to every new block of a chosen type, so common styling happens automatically.

Configuring Block Defaults:

1. Make sure the Enabled toggle at the top right is on.
2. Select a block: Choose the block type from the dropdown, for example Buttons.
3. State: Choose which state the classes apply to, starting with Default.
4. Add classes: Pick one or more utility classes, for example color–primary. Selected classes appear as removable tags.
5. The Preview panel on the right renders the block with your defaults applied so you can confirm the result before closing.

Every Spectra block also carries a removable default class, such as default-container or default-button. You can remove it from an individual block in the editor and re-add it later from the dropdown.

Token Browser

The Token Browser is a searchable reference of every design token generated by your Style Guide. Tokens are grouped into five tabs:

• Color tokens: All generated color variables with swatches and hex values.
• Spacing tokens: The spacing scale values.
• Radius tokens: Corner radius values.
• Shadow tokens: Shadow definitions.
• Motion tokens: Animation and transition values.

Use the filter field to find a token quickly, then copy its variable name for use in CSS Variables or Classes & CSS.

Cheat Sheet

The Cheat Sheet is a searchable reference of every utility class and variable available in Global Styles.

Search: Type in the search field to filter classes and variables instantly.

Category Filters: Narrow results by category:

• Border: Border widths, styles, and radius classes.
• Display: Layout, flex, grid, and visibility classes.
• Filters: Overlay and blur effects.
• Typography: Font size and line height classes.
• Sizing: Width, height, and aspect ratio classes.
• Colors: Text, background, and border color classes.
• Spacing: Padding, margin, and gap classes.
• Variables: CSS variables for use in custom classes.

Each entry shows the class name, a short label, a description, and tags. Click the copy icon to copy the class name, then paste it into the Global Styles dropdown on any block or into your custom CSS.

Applying Global Styles to Blocks

1. Select any Spectra block.
2. Open the Global Styles panel in the block sidebar. Applied classes appear as removable tags, including the block’s default class.
3. Click the dropdown to browse or search available classes. Classes are grouped by purpose, such as Block Default and Font Size, with utility classes like heading–4 or background–black available directly.
4. Select classes to apply them instantly, or click the x on a tag to remove one.
5. Click Manage Global Styles at any time to open the full Global Styles window.

CSS Priority

When multiple styles target the same block, they apply in this order, from highest to lowest:

1. Block Settings: Options set directly on the block always win.
2. Global Styles: Utility classes and custom classes applied through the panel.
3. Default Block CSS: The built-in styling each Spectra block ships with.
4. Theme CSS: Your theme’s styles act as the final fallback.

If a class does not seem to apply, check whether a block setting is overriding it, then clear your cache.

Frequently Asked Questions

Where do I find Global Styles now?
Global Styles has moved entirely into the block editor. Select any Spectra block and click Manage Global Styles in the Global Styles panel. There is no longer a separate admin dashboard screen.

Do Style Guide changes apply to existing content?
Yes. Colors, typography, and UI styling are applied site-wide through design tokens, so existing and new blocks update together when you save changes.

Can I still use my own class names?
Yes. Custom classes are created under Classes & CSS and automatically receive the gs- prefix to avoid conflicts with theme or plugin classes.

Where are my custom variables output?
Custom variables are emitted in a :root block on your site, so they are available to every block and every CSS rule via var(–name).