Design Globals and Brand Styles

Overview

Design globals are your brand system inside StretchPages. Instead of styling every element by hand, you define your colors, fonts, theme defaults, and reusable classes once in the Globals panel. Then you apply them across your pages — and when you change a global, everything using it updates automatically.

What lives in Globals

The Globals panel holds:

• Colors — your brand palette. Each global color can be applied to any color field, and referenced consistently across pages.
• Fonts — the typefaces used for headings and body text.
• Theme — default styling values that give your pages a consistent baseline.
• Classes — reusable style classes you can apply to elements so they share a look.

Globals also store your shared site-parts and popups, which are covered in their own articles.

Set your brand colors

1. Open a page in the editor and open the Globals panel in the inspector.
2. Add your brand colors (for example, a primary, an accent, and a couple of neutrals). Give each a clear name.
3. When you style an element, choose a global color from the color picker instead of a one-off value.
4. Later, if you change the global color, every element that uses it updates automatically.

Set your fonts

1. In Globals, set the fonts for your headings and body text.
2. New headings and text pick up these defaults, giving the whole page a consistent typographic feel.

Create reusable classes

1. In Globals, define a class — a named bundle of styles (for example, a "card" class with padding, background, and radius).
2. Apply that class to elements across your pages.
3. Change the class once, and every element with it updates. This is the fastest way to keep repeated patterns consistent.

Import globals from your existing brand

If you already have a design system or brand assets, you can bring them in rather than re-entering them:

1. Open the import flow.
2. Import from DTCG design tokens (a standard .json token file), raw CSS (variables and classes), or a Tailwind config.
3. Your imported colors, fonts, and tokens become globals you can use immediately.

See Import designs and export to code for the full import walkthrough.

Example: rebranding in one move

You built five landing pages using a global color named "Brand" for all your buttons and accents. Marketing decides to shift the brand from blue to green. You open Globals, change the "Brand" color to the new green, and every button and accent across all five pages updates at once — no page-by-page editing.

Tips

• Set globals before you build a lot. It's much faster to design against a palette than to retrofit one later.
• Always pick global colors in color fields when a global exists — it's what makes future rebrands one-click.
• Name globals by role, not by value. "Primary" and "Accent" survive a rebrand; "Blue" becomes confusing when it turns green.
• Use classes for repeated patterns (cards, badges, section spacing) so they stay identical everywhere.
• Import your tokens if you already maintain a design system — it keeps StretchPages in sync with your brand source of truth.

Troubleshooting

I changed a global color but one element didn't update. That element probably has a local (one-off) color instead of the global. Select it, open the color field, and switch it back to the global color.

My imported tokens didn't all come through. Imports produce a report of what was recognized. Review it, and use the AI repair import action to help resolve anything unsupported. See the import/export guide.

Fonts look different on the published page. Confirm the font is set in Globals and applied to the element; check that any custom font is available to the page.

FAQ

Do globals apply across all my pages? Yes — globals are your workspace brand system and are meant to be shared across pages for consistency.

Can I have more than one brand? Use clearly named globals and classes to represent each brand's palette and type, and apply the right ones per page.