DESIGN LIBRARY
Starter theme reference
Every typography slot, every button variant, every background tone the starter ships with. Pull this page into any project as a designer-facing reference. Build from these, don’t invent parallels.
GLOBAL STYLES
Typography slots
Every type sample below is a real Elementor heading widget using the canonical globals. To use one in a new section, set the widget’s typography to the slot shown in the meta line.
Display (H1) — Poppins · 600 · 3.8rem desktop
The quick brown fox jumps over the lazy dog
The biggest size in the ramp. One per page, in the hero.
Heading (H2) — Poppins · 500 · 2.6rem
The quick brown fox jumps over the lazy dog
Section titles. Two to four per page.
Sub-heading (H3) — Poppins · 500 · 1.7rem
The quick brown fox jumps over the lazy dog
Card titles, inline divisions, eyebrows when set this size.
Heading (H4) — Poppins · 500 · 1.3rem
The quick brown fox jumps over the lazy dog
Tertiary headings, label-led blocks.
Body — Poppins · 400 · 1rem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Body copy. The workhorse. Line-height 1.6.
Intro text — Custom slot d83382b · 1.25rem
A short intro paragraph that sets up what the rest of the section will deliver. Two sentences max — keep it conversational and specific.
Hero supporting copy, section intros. Slightly larger than body.
Outro text — Custom slot d927ec5 · 1.05rem
Quiet closing sentence. Often paired with the final CTA.
Closing CTA support, footer-adjacent copy.
Meta / Eyebrow — Custom slot 008e670 · 1.05rem · UPPERCASE
EYEBROW LABEL
Section openers, label rules. Always uppercase. Always semibold.
Action (button) — Poppins · 600 · UPPERCASE
BUTTON LABEL TEXT
Button labels. Same slot drives every CTA in the section library.
ACTIONS
Button variants
Six canonical variants. Apply via _css_classes on any Elementor button widget. Never use Elementor’s default button styling — always pick a variant.
Light backgrounds — btn-primary · btn-secondary · btn-outline-dark
Primary action
Secondary action
Outline dark
Dark backgrounds — btn-outline-light · btn-primary-reverse · btn-secondary-reverse
Outline light
Primary reverse
Secondary reverse
When to use which
btn-primary— Filled with brand primary. The main CTA on every page.btn-secondary— Filled with brand secondary. For supporting actions in a hero or band.btn-outline-dark— Bordered, dark-text. For light backgrounds when primary is too loud.btn-outline-light— Bordered, light-text. Only on dark or image-overlay backgrounds.btn-primary-reverse— White button with primary text. Used on closing CTA bands (dark bg).btn-secondary-reverse— White button with secondary text. Same context as primary-reverse.
STRUCTURE
Section backgrounds
Pages alternate background tones to carry rhythm down the page. Pick from the four canonical slots below; reference the slot ID in the section’s __globals__.background_color field. Never two adjacent sections in the same tone.
Section BG — Light — globals/colors?id=277da4e · #F7F9FA · class: rf-wrap light-bg
Default content surface. Most sections sit here.
Section BG — Mid — globals/colors?id=758f7aa · #D8D8D8 · class: rf-wrap light-bg
Alternating tone between light sections. Form cards. Tonal break without going dark.
Section BG — Dark — globals/colors?id=c7a7512 · #19393D · class: rf-wrap dark-bg
Closing CTA bands. Mid-page accent moment.
Section BG — Ultra dark — globals/colors?id=80c0c94 · #0C1F23 · class: rf-wrap dark-bg
Full-bleed hero. Image-overlay backgrounds.
NOW BUILD
Reach for these, don’t invent parallels.
If a section, button or type style you need isn’t on this page, raise it in the team channel before building a one-off. The starter expands deliberately.