Skip to main content

Settings → Theme color and typography tokens

Theme settings provide fallback design tokens for locator chrome and Builder output. A font or color set directly on a Builder element takes precedence.

Typography

Global font family applies where a Builder node has no explicit font-family setting.

By default the plugin requests a non-system Global font from Google Fonts with weights 400, 500, 600, and 700. Enable Font is already loaded by the active theme when the theme or another plugin already loads that exact family and the weights your designs use. The font-family CSS still applies; only the plugin's external Google Fonts request is removed.

Do not enable the switch merely because the theme uses a similarly named font. If the family is not actually present, the browser falls back to its next available font and card dimensions can change.

Color tokens

SettingIntended use
PrimaryMain interactive/action color
Primary strongStronger action/active state
Text on primaryText/icons placed on primary background
SurfaceCards, inputs, panels
Body textPrimary body copy
Heading textHeadings/store names
Soft textSecondary strong text
LabelsField/control labels
Muted textSecondary metadata
Faint textLow-emphasis content
BorderMain input/card borders
Soft borderSubtle separators
DividerSection dividers
Error / dangerError text/icons
Error backgroundError notice background

Changing a token affects only rules still using that token. If one Store Card refuses the new Primary color, open that design and inspect the selected element's explicit Background/Text/Border settings.

For explicit colors stored inside one Layout and its referenced designs, use the Builder's Color scheme tool.