Global styles for SEO on Wix: Harmony Brand panel and Studio design tokens

Consistent styling is the foundation of a professional website. In the Wix ecosystem, two distinct tools help you achieve this. Wix Harmony provides the Brand panel, a centralised place to manage your colour palette, text styles, and button, line, and box themes across every page. Wix Studio offers design tokens, which are reusable variables for colours, fonts, and spacing that you can reference throughout your project. This lesson explains how each system works, when to use which, and how your global style choices directly affect readability, accessibility, SEO, and Core Web Vitals performance.

Understanding the Brand Panel in Wix Harmony

Wix Harmony is a hybrid editor that builds on the classic drag-and-drop editor. Its primary tool for site-wide styling is the Brand panel, which you can open from the left sidebar. The Brand panel gives you a single place to define and update visual properties that apply across your entire site. When you change a value in the Brand panel, every element that references that value updates instantly.

• Colour palette: a set of named colours (primary, secondary, accent, and additional slots) used by all site elements that reference the palette.
• Text styles: predefined heading and paragraph styles (Heading 1 through Heading 6, Paragraph 1, Paragraph 2, and so on) that control font family, size, weight, line height, and letter spacing.
• Button themes: consistent styling for buttons across the site, including fill colour, border radius, hover states, and text formatting.
• Line themes: standardised line and divider appearances, including thickness, colour, and style.
• Box themes: default styling for container boxes, including background colour, border, corner radius, and shadow.

Understanding Design Tokens in Wix Studio

Wix Studio is a separate platform aimed at professional designers and agencies, and it introduces a feature called design tokens. Design tokens are reusable variables that store values for colours, fonts, spacing, and other visual properties. Instead of hard-coding a hex colour into every element, you reference a token. When you update the token value, every element referencing it changes automatically. This concept comes from modern design-system methodology and helps maintain strict consistency across large, complex projects.

• Colour tokens: store hex, RGB, or HSL values and can be referenced by any element property that accepts a colour.
• Font tokens: define a font family, fallback stack, weight, and style so typography stays uniform.
• Spacing tokens: set consistent margin and padding values such as 8px, 16px, 24px, and 32px to enforce a spacing scale.
• Custom tokens: some advanced setups allow additional token types for border radius, shadow values, and opacity.

Setting Up Your Colour System

Whether you use the Harmony Brand panel or Studio design tokens, a well-structured colour system is essential. Follow these steps to build one.

• Audit your brand assets. Gather your logo, brand guidelines, and any existing colour codes. Identify your primary colour, one or two secondary colours, and an accent colour.
• Define your neutral scale. Choose a range of neutral tones from near-white to near-black. These will be used for backgrounds, text, borders, and subtle UI elements. Aim for at least five steps in the scale.
• Apply colours in the Brand panel or as tokens. In Harmony, open the Brand panel and assign each colour to a palette slot. In Wix Studio, create a colour token for each value and give it a descriptive name such as "colour-primary" or "neutral-100".
• Test contrast ratios. Use the WebAIM Contrast Checker (linked at the end of this lesson) to verify that every text-and-background combination meets WCAG 2.2 AA requirements. Normal text needs a contrast ratio of at least 4.5:1, and large text needs at least 3:1.
• Document your palette. Keep a simple reference document listing each colour, its hex code, and where it should be used. This prevents drift as your site grows.

Typography for Readability and Performance

Typography choices affect how easily visitors can read your content and how quickly your pages load. In Harmony, you configure text styles through the Brand panel. In Wix Studio, you create font tokens. In both cases, the principles are the same.

• Limit your site to two or three font families. Each additional font adds network requests and download weight, which slows page rendering.
• Use a minimum body text size of 16px. Smaller text is harder to read on mobile devices and can hurt your accessibility score.
• Set line height (leading) to 1.4 to 1.6 times the font size for body text. This gives letters room to breathe and improves reading comprehension.
• Define a clear typographic hierarchy. Heading 1 should be noticeably larger than Heading 2, which should be larger than Heading 3, and so on. Consistent sizing helps both users and search engines understand content structure.
• Choose web-optimised fonts from Google Fonts or similar services. These fonts are designed for screen rendering and are served from fast CDN endpoints.
• Enable font-display: swap behaviour when possible. This ensures text is visible while custom fonts load, preventing invisible text flashes (FOIT) that hurt both user experience and Largest Contentful Paint (LCP) scores.

Colour Contrast and Accessibility

Accessibility is both a user experience priority and a search ranking factor. Google considers page experience signals, and inaccessible pages can lead to higher bounce rates, which indirectly affect rankings. Colour contrast is one of the most common accessibility failures on the web.

Follow these steps to ensure your site meets WCAG 2.2 AA colour contrast requirements.

• Identify every unique text-and-background combination on your site. Include buttons, banners, navigation links, footer text, and form labels.
• Test each combination using the WebAIM Contrast Checker. Enter the foreground (text) colour and background colour. The tool will show the contrast ratio and whether it passes AA and AAA levels.
• Fix any failing combinations by adjusting either the text colour or the background colour. Small adjustments, such as darkening a grey by 10 to 15 percent, are often enough to pass.
• Check non-text contrast as well. UI components such as form field borders, icon buttons, and focus indicators need a contrast ratio of at least 3:1 against adjacent colours.
• Re-test after every Brand panel or token change. A single palette update can affect dozens of elements, so always verify contrast after modifying global styles.

Spacing, Layout Stability, and Cumulative Layout Shift

Cumulative Layout Shift (CLS) is a Core Web Vitals metric that measures how much page content moves unexpectedly during loading. Poor CLS frustrates users and hurts your search rankings. Your spacing system plays a direct role in controlling CLS.

• Use fixed dimensions for images and media. When the browser knows the width and height of an element before it loads, it reserves the correct space and nothing shifts. Set explicit sizes in the editor or through your design tokens.
• Define consistent spacing values. Whether you use the Brand panel or spacing tokens in Studio, stick to a scale such as 4px, 8px, 16px, 24px, 32px, and 48px. A predictable scale reduces the chance of ad-hoc values that cause alignment issues.
• Avoid injecting content above existing content after the page loads. If you use pop-ups, banners, or cookie notices, configure them as overlays rather than elements that push content down.
• Test your spacing on mobile. Wix Harmony is automatically responsive, meaning the canvas adjusts and you fine-tune a mobile view. Check that your spacing values scale appropriately on smaller screens without causing unexpected shifts.
• Use PageSpeed Insights (linked at the end of this lesson) to measure your CLS score. Aim for a CLS score below 0.1, which is Google's "good" threshold.

Putting It All Together: Your Global Style Checklist

• All colours are defined in the Brand panel (Harmony) or as design tokens (Studio), not hard-coded on individual elements.
• All text styles use the global heading and paragraph definitions, not one-off overrides.
• Every text-and-background combination passes WCAG 2.2 AA contrast requirements.
• You are using no more than two to three font families, and fonts are optimised for web delivery.
• Body text is at least 16px with a line height between 1.4 and 1.6.
• A consistent spacing scale is applied to margins and padding across all pages.
• Images and media containers have explicit dimensions to prevent layout shifts.
• Your CLS score is below 0.1 and your LCP score is under 2.5 seconds as measured by PageSpeed Insights.
• Button, line, and box themes are configured in the Brand panel (Harmony) so they stay consistent if you update your palette.