Global styles

Colors, typography, page layout, and component defaults.

Quick start

Open the theme editor for a portfolio: /portfolios/theme-edit/[pid] (from My Portfolios or the workspace menu → Edit theme).
In the left sidebar, select the Global tab (next to Sections).
Change one Global Colors swatch (for example Primary) or open Typography & Style → Body / Heading and adjust a font setting.
Watch the live preview update across the page.
Click Save in the workspace header when you like the result.

Need the full shell (preview, Save, Layers)? See Theme editor overview.

Deep dive

What Global controls

Global sets the site-wide look for this portfolio’s theme. Changes here flow into every section unless that section overrides them under Sections. The panel groups match what you see in the sidebar, top to bottom:

Global Colors
Page
Component Defaults
Typography & Style

Canonical path: /portfolios/theme-edit/[pid] → Global.

Global Colors

Global Colors are the shared brand and surface palette: page backgrounds, primary and secondary text, primary and accent accents, borders, and the “on” colors used on primary/accent buttons and chips.

Pick a color, then check the preview for contrast (body text on backgrounds, buttons on surfaces). You do not need to retint every section for a coherent brand shift — start here, then refine one section at a time if needed.

Page

The Page group shapes the overall canvas:

Control	What it does
Page padding	Space around content on the page edges
Content max width	Caps how wide section content grows on large screens (edge-to-edge backgrounds can still span the full viewport)
Section entrance / Section entrance duration	Default scroll-in motion for sections; per-section motion overrides live under each section’s Motion group on Sections
Page Background	Background behind and between sections

Use these when the whole site feels too tight, too wide, or needs a shared backdrop — not for one hero card’s padding.

Component Defaults

Component Defaults set baseline Padding, Corner Radius, and Shadow for themed cards, media frames, buttons, and similar surfaces.

Think of these as the theme’s “house style.” Individual sections can still override spacing, radius, or elevation in their own style editors. If you change defaults and a section looks unchanged, that section likely has its own values — open Sections, select it, and check its style groups (Section styles).

Typography & Style

Typography & Style has two collapsibles:

Body — default font family, size, weight, and optional text color for body copy
Heading — default heading typography, plus margin, padding, and color for section titles and related headings

Section text styles inherit from these globals when they do not set their own. Prefer adjusting Global typography first; then override only sections that need a different voice (for example a display hero headline).

Global vs Sections

Goal	Use
Brand colors, fonts, page width, default corners	Global (this guide)
One section’s layout, visibility, or local styles	Sections — Section styles

Editor shell, Save, and workspace navigation: Theme editor overview.

Change one Global color or type token, save, and preview before nesting many section overrides. Fewer overrides are easier to maintain.

Tips

Start with Global Colors and Typography & Style, then Page, then Component Defaults.
After changing Content max width, check both a narrow section and a full-bleed hero in the preview.
Section entrance of none keeps scroll motion off site-wide; turn it on only if you want motion by default.
If a card ignores Corner Radius or Shadow, look for an override on that section under Sections.
Use the ? next to the Global tab for a short reminder and a Learn more link to this article.

Keep portfolio copy and media in the portfolio editor. Global styles only change how that content looks.