Set your brand’s fonts, colors and core element styles once, and every Tiger widget — and, when you sync, Elementor’s own global styles — picks them up automatically. Tiger writes these as --tiger-* CSS variables into a generated stylesheet, so a single change flows through the whole site.
Included in the Free plan.
Where (Free): Tiger Elements → Site Styles (right under the Dashboard).
Where (Pro): Tiger Elements → Settings → Global Site Settings.
Typography
Four font tokens, each with its own family, weight, size (px) and line-height:
- Primary Font — headings and display text.
- Secondary Font — sub-headings or a complementary display face.
- Text Font — body copy.
- Accent Font — buttons, labels and small UI text.
Brand colors
A Primary Palette of four colors — Primary, Secondary, Text, Accent — each set by hex with an opacity slider and a “Transparent” option. Beyond those four, add unlimited Custom Colors for anything brand-specific (a success green, a warning amber), each becoming its own --tiger-color-custom-* variable.
Element defaults
Collapsible sections style the building blocks every page uses:
- Heading Tags — typography and color for H1 through H6 (each falls back to the Primary Font).
- Button — typography, colors, hover states, padding, radius and border (synced to Elementor’s own button styling).
- Secondary Button — a second button style stored as plugin-only tokens (
.tg-btn-sec/--tiger-btn2-*) that is not synced into the Elementor kit. - Image — default border radius and box shadow.
Layout & Surfaces
A further set of global tokens control page-wide layout and card surfaces — a content max width (--tiger-maxw), a default gap (--tiger-gap), a global link color, and card background, border, radius and shadow (--tiger-card-*). Native Tiger pages that opt to “follow global styles” bind their own variables to these, so page surfaces stay consistent with your brand.
Saving & syncing
The tokens are regenerated into a tiger-tokens.css file on every save and loaded on both the front end and inside the Elementor editor, so previews match production. Two save paths:
- Save — stores the tokens and regenerates the stylesheet (“Global site settings saved”).
- Save & Sync with Elementor — additionally pushes colors and typography into Elementor’s native global kit, so they appear in Elementor’s own pickers too.
Connected AI clients can read and update these tokens as well, via the Build with AI connection, treating the Elementor global kit as the single source of truth every page inherits.
Troubleshooting
My tokens don’t show on the front end.
Re-save Global Site Settings to regenerate the stylesheet. If a theme or plugin update leaves Elementor’s kit out of sync, use Save & Sync with Elementor to rewrite the native global styles.
A Tiger color isn’t available in Elementor’s picker.
Only synced tokens appear in Elementor’s native pickers. Use Save & Sync with Elementor; note that the Secondary Button tokens are intentionally plugin-only and won’t appear there.