This is a title
Type your paragraph here
Shu11y Style Guide v8.2 – Design Token System
Two-Tier Color Architecture (v7.4.0+)
The color system uses three cascading sections. Only set hex values in Tier 1 (Palette). Tiers 2 and 3 update automatically — no manual changes needed.
--palette-brand
--palette-accent
--palette-highlight
--palette-dark-1
--palette-dark-2
--palette-light-1
--palette-light-2
--palette-brand-rgb
R,G,B for rgba()
Rule: Only ever hardcode hex values in Tier 1. All other color tokens reference these via var(--palette-*).
| Token | References | Used For |
|---|---|---|
--color-text-default | var(–palette-dark-1) | Body text, headings |
--color-text-secondary | var(–palette-dark-2) | Supporting text, captions |
--color-text-inverse | var(–palette-light-2) | Text on dark backgrounds |
--color-text-link | var(–palette-brand) | Link color |
--color-surface-page | var(–palette-light-2) | Main page background |
--color-surface-section | var(–palette-light-1) | Alternating section backgrounds |
--color-surface-dark | var(–palette-dark-1) | Dark sections, nav bar, footer |
--color-surface-card | var(–palette-light-2) | Card and box backgrounds |
--color-border-default | var(–palette-dark-2) | Default borders, dividers |
--color-cta-primary | var(–palette-brand) | Primary call-to-action |
--color-cta-secondary | var(–palette-accent) | Secondary call-to-action |
--color-brand | var(–palette-brand) | Generic brand color usage |
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.
--brand-primary → var(–palette-brand)--brand-secondary → var(–palette-accent)--brand-accent → var(–palette-highlight)--brand-dark → var(–palette-dark-1)--brand-dark-alt → var(–palette-dark-2)--brand-light → var(–palette-light-1)--brand-white → var(–palette-light-2)--e-global-color-primary → var(–palette-brand)rgba() Alpha Usage — –palette-brand-rgb
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:
background: rgba(var(--palette-brand-rgb), 0.15);
border: 1px solid rgba(var(--palette-brand-rgb), 0.3);
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().
How to Set Up Brand Colors
- Go to Elementor → Design Tokens → Tab 1: Palette
- Set the 7 hex values for your brand (only these 7 swatches need color pickers)
- Set
--palette-brand-rgbas three integers: e.g.,0, 102, 204 - Save — Tiers 2 and 3 cascade automatically. Elementor globals sync instantly.
Heading Sizes
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
Body Text Sizes
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
TEXT BODY LG
.text-body-lg, .lead {
font: var(–type-body-lg);
letter-spacing: var(–text-body-lg-letter-spacing);
}
TEXT BODY MD
.text-body, .text-body-md {
font: var(–type-body-md);
letter-spacing: var(–text-body-letter-spacing);
}
TEXT BODY SM
.text-body-sm, .small-text {
font: var(–type-body-sm);
letter-spacing: var(–text-body-sm-letter-spacing);
}
Choose the Right Support Plan
font: var(--type-hero);
Don’t pay for what you don’t need, but don’t get caught without a safety net. Get just the right coverage for your business and your budget.
--font-size-body-md
You don’t need a bloated service contract. You need the right protections, the right response times, and a team that actually knows your name and understands your work. Our managed IT service packages scale with your business, whether you need the basics or full-stack support.
Each plan includes all the essentials, a response when you need it, and a real person to handle your questions and set things in motion.
--font-size-body-sm
Utility Text Styles
Callout Text – Grab attention!
--font-size-callout
LABEL TEXT
--text-label-* (uppercase)
OVERLINE TEXT
--font-size-overline
TEXT HERO
.text-hero {
font: var(--type-hero);
letter-spacing: var(--text-hero-letter-spacing);
}
TEXT HEADING XL
.text-heading-xl {
font: var(--type-heading-xl);
letter-spacing: var(--text-h1-letter-spacing);
}
TEXT HEADING LG
.text-h2, .text-heading-lg {
font: var(–type-heading-lg);
letter-spacing: var(–text-h2-letter-spacing);
}
TEXT HEADING MD
.text-h3, .text-heading-md {
font: var(–type-heading-md);
letter-spacing: var(–text-h3-letter-spacing);
text-transform: var(–text-h3-transform);
}
TEXT BODY LG
.text-body-lg, .lead {
font: var(–type-body-lg);
letter-spacing: var(–text-body-lg-letter-spacing);
}
TEXT BODY MD
.text-body, .text-body-md {
font: var(–type-body-md);
letter-spacing: var(–text-body-letter-spacing);
}
TEXT BODY SM
.text-body-sm, .small-text {
font: var(–type-body-sm);
letter-spacing: var(–text-body-sm-letter-spacing);
}
CSS Shorthand Type Styles
These bundled tokens combine font-size, weight, line-height, and family into a single shorthand property using the CSS font: syntax.
Hero Style
font: var(--type-hero);
Heading XL
font: var(--type-heading-xl);
Heading LG
font: var(--type-heading-lg);
Heading MD
font: var(--type-heading-md);
Large body text using bundled type style
font: var(--type-body-lg);
Standard body text using bundled type style
font: var(--type-body-md);
Callout text using bundled style
font: var(--type-callout);
OVERLINE STYLE
font: var(--type-overline);
Caption text using bundled style
font: var(--type-caption);
Usage Benefits
- 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); }
Button Token System
All button colors are controlled by design tokens in the Token Manager. Change tokens to update all buttons instantly.
Primary Buttons
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
Secondary Buttons
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
Tertiary Buttons
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
Button Sizes
Real-World Example: Call-to-Action Section
Ready to Get Started?
Join thousands of satisfied customers using our platform
CSS Classes Available
.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 */
Form Input Tokens
Form elements use dedicated tokens for consistent styling across your site.
Text Input
We’ll never share your email.
Select Dropdown
Textarea
Checkbox & Radio
Form Tokens Reference
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
Real-World Example: Contact Form
Get In Touch
Fill out the form below and we’ll get back to you within 24 hours.
Navigation Token System
Navigation tokens control link colors, hover states, and active page highlighting.
Navigation Links Example
“Services” link shows active state using --nav-active-color
Navigation Tokens
Normal State
--nav-color
Hover State
--nav-hover-color
Active/Current
--nav-active-color
Real-World Example: Header Navigation
CSS Usage
.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);
}
Spacing Scale
--spacing-xs
--spacing-sm
--spacing-md
--spacing-lg
--spacing-xl
Border Radius Examples
--radius-sm
--radius-md
--radius-lg
Padding Utility Classes
Visual examples of padding applied to elements:
All Sides Padding
padding: var(--spacing-xs);
padding: var(--spacing-sm);
padding: var(--spacing-md);
padding: var(--spacing-lg);
padding: var(--spacing-xl);
Vertical Padding (Top & Bottom)
padding-top/bottom: var(--spacing-xs);
padding-top/bottom: var(--spacing-md);
padding-top/bottom: var(--spacing-xl);
Horizontal Padding (Left & Right)
padding-left/right: var(--spacing-*);
Margin Utilities
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); }
Real-World Example: Card Component
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.
Typography Spacing
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.
Clamp-Based Containers
XXL
XL
L
M
S
XS
XXS
Shadows
Elementor v4 Atomic Elements
Elementor v4 introduces atomic elements — lower-level building blocks that replace the classic widget system in new containers. Use e-div-block or container as the outer wrapper with "version": "0.0" on each widget.
Container Types
e-div-block
Atomic div container. Use as layout wrapper inside v4 sections. elType: "e-div-block"
container
Standard Elementor flex/grid container. Top-level wrapper. elType: "container"
JSON Template Notes
- All v4 atomic widgets require
"version": "0.0"in their JSON object - Use
"isLocked": trueon structural sub-elements (e-tab, e-tab-content, e-tabs-menu, e-tabs-content-area) - Tab triggers use
e-tabwith ane-paragraphchild for the label text - Tab panels use
e-tab-contentas direct children ofe-tabs-content-area - The
editor_settings.titlefield controls the label shown in the Elementor editor panel - Atomic elements use
$$typewrappers for typed settings values:{"$$type":"html","value":"..."} - Reference
atomic-elementor-867-2026-03-12.jsonfor a working example of all v4 atomic elements
Shu11y Style Guide v2 – Typography System version 8.1