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.