Rule: Only ever hardcode hex values in Tier 1. All other color tokens reference these via var(--palette-*).

These names are used by Elementor globals and existing CSS. They all point to Tier 1 palette tokens and update automatically when you change the palette.

The --palette-brand-rgb token stores the RGB components of --palette-brand as a bare triplet (e.g., 0, 102, 204). Use it inside rgba() for alpha transparency:

Important: Do NOT include the rgb() wrapper in the token value — just the three numbers (e.g., 0, 102, 204). The token is used directly inside rgba().

1. Go to Elementor → Design Tokens → Tab 1: Palette
2. Set the 7 hex values for your brand (only these 7 swatches need color pickers)
3. Set --palette-brand-rgb as three integers: e.g., 0, 102, 204
4. Save — Tiers 2 and 3 cascade automatically. Elementor globals sync instantly.

Hero Text

--font-size-hero

Heading 1

--font-size-h1

Heading 2

--font-size-h2

Heading 3

--font-size-h3

Heading 4

--font-size-h4

Heading 5

--font-size-h5

Heading 6

--font-size-h6

Large body text – Perfect for introductions and emphasis. Uses –font-size-body-lg with relaxed line height for comfortable reading.

--font-size-body-lg

Standard body text – This is your default paragraph text. Uses –font-size-body-md with normal line height. Most content should use this size.

--font-size-body-md

Small body text – Used for secondary information or compact layouts. Uses –font-size-body-sm.

--font-size-body-sm

Caption text – For image captions, footnotes, and fine print. Uses –font-size-caption.

--font-size-caption

• Concise: One property instead of four
• Consistent: Ensures all typography properties stay in sync
• Maintainable: Update the token, update everywhere
• Fast: Quick to apply with single line of CSS

Example: .hero-text { font: var(--type-hero); }

Tokens Used:

• --primary-btn • Background color
• --primary-btn-text • Text color
• --primary-btn-border • Border color
• --primary-btn-hover • Hover background
• --primary-btn-hover-text • Hover text color
• --primary-btn-border-hover • Hover border
• --primary-btn-active • Active background

Tokens Used:

• --secondary-btn • Background color
• --secondary-btn-text • Text color
• --secondary-btn-border • Border color
• --secondary-btn-hover • Hover background
• --secondary-btn-hover-text • Hover text color
• --secondary-btn-border-hover • Hover border
• --secondary-btn-active • Active background

Tokens Used:

• --tertiary-btn • Background color
• --tertiary-btn-text • Text color
• --tertiary-btn-border • Border color
• --tertiary-btn-hover • Hover background
• --tertiary-btn-hover-text • Hover text color
• --tertiary-btn-border-hover • Hover border
• --tertiary-btn-active • Active background

Ready to Get Started?

Join thousands of satisfied customers using our platform

.btn-primary         /* Primary solid button */
.btn-primary-outlined  /* Primary outlined button */
.btn-secondary       /* Secondary solid button */
.btn-secondary-outlined  /* Secondary outlined button */
.btn-tertiary        /* Tertiary outlined button */
.btn-sm             /* Small size */
.btn-lg             /* Large size */

Text Input

Email Address

We’ll never share your email.

Select Dropdown

Choose a Plan

Starter Plan – $9/monthProfessional Plan – $29/monthEnterprise Plan – $99/month

Textarea

Message

Checkbox & Radio

Input Tokens:

• --input-font-size • Input text size
• --input-font-weight • Input text weight
• --input-font-family • Input font family
• --input-line-height • Input line height
• --input-padding-vertical • Top/bottom padding
• --input-padding-horizontal • Left/right padding
• --input-border-width • Border thickness
• --input-border-style • Border style (solid, dashed, etc.)
• --input-border-color • Border color
• --input-radius • Corner rounding
• --input-bg • Background color
• --input-text • Text color

Label Tokens:

• --label-font-size • Label text size
• --label-font-weight • Label text weight
• --label-font-family • Label font family
• --label-letter-spacing • Label letter spacing

Get In Touch

Fill out the form below and we’ll get back to you within 24 hours.

Send Message

Navigation Links Example

“Services” link shows active state using --nav-active-color

.nav-link {
  color: var(--nav-color);
  background: var(--nav-bg);
}

.nav-link:hover {
  color: var(--nav-hover-color);
  background: var(--nav-bg-hover);
}

.nav-link.current {
  color: var(--nav-active-color);
  background: var(--nav-bg-active);
}

All Sides Padding

Vertical Padding (Top & Bottom)

Horizontal Padding (Left & Right)

padding-left/right: var(--spacing-*);

Margin Top

• .mt-xs { margin-top: var(--spacing-xs); }
• .mt-sm { margin-top: var(--spacing-sm); }
• .mt-md { margin-top: var(--spacing-md); }
• .mt-lg { margin-top: var(--spacing-lg); }
• .mt-xl { margin-top: var(--spacing-xl); }

Margin Bottom

• .mb-xs { margin-bottom: var(--spacing-xs); }
• .mb-sm { margin-bottom: var(--spacing-sm); }
• .mb-md { margin-bottom: var(--spacing-md); }
• .mb-lg { margin-bottom: var(--spacing-lg); }
• .mb-xl { margin-bottom: var(--spacing-xl); }

Card Title

This card uses spacing tokens for consistent padding and margins. The padding is --spacing-lg, title margin is --spacing-sm, and paragraph margin is --spacing-md.

Learn More

Paragraph spacing uses --space-paragraph token for consistent vertical rhythm.

Each paragraph maintains the same spacing between them, creating visual harmony.

Headings Use Spacing Tokens

--space-heading-top and --space-heading-bottom control heading margins.

• All v4 atomic widgets require "version": "0.0" in their JSON object
• Use "isLocked": true on structural sub-elements (e-tab, e-tab-content, e-tabs-menu, e-tabs-content-area)
• Tab triggers use e-tab with an e-paragraph child for the label text
• Tab panels use e-tab-content as direct children of e-tabs-content-area
• The editor_settings.title field controls the label shown in the Elementor editor panel
• Atomic elements use $$type wrappers for typed settings values: {"$$type":"html","value":"..."}
• Reference atomic-elementor-867-2026-03-12.json for a working example of all v4 atomic elements