Cart

Download Price Guide
Download Price Guide

Colors

Green

#d5fb7b

Green Hover

#c5eb6b

Dark

#191919

White

#ffffff

Light Grey

#d6d6d6

Mid Grey

#707070

Dark Grey

#333333

Typography — Archivo

100px / 700

The quick brown fox

80px / 700

The quick brown fox

48px / 700

The quick brown fox

35px / 600

The quick brown fox

24px / 600

The quick brown fox

20px / 400

The quick brown fox

Buttons

On Light Background

Primary Primary SM Primary Dark Primary Dark SM Outline Dark Outline Dark SM Card

On Dark Background

Primary Primary SM Outline Outline SM Dark Dark SM

With Icons

Download Learn More Go Back Watch Video

Full Width

Full Width Primary Full Width Outline Dark

Forms

Alert Messages

There was a problem with your submission. Please check the fields below.
Your details have been saved successfully.
Payment is processed securely via Stripe. Your card details are never stored on our servers.

Input Fields

We'll send your confirmation to this address.

Select

Textarea

Checkboxes & Radios

Validation States

Please enter a valid email address.

Email verified.

Form with Button

Submit Cancel

Icons

play

arrow-right

arrow-left

download

external-link

Spacing

Scale Tokens

--space-xs 14px
--space-sm 24px
--space-md 32px
--space-lg 48px
--space-xl 80px
--space-2xl 98px
--section-py 80px / 60px / 40px

Section Padding (.section-py)

Consistent component vertical padding: 80px → 60px → 40px. Controllable via Elementor "Section Spacing" in Style tab.

Content with .section-py applied

Responsive Block Padding (.block-py)

Resize the browser to see padding scale: 48px → 32px → 24px

Content with .block-py applied

Global Tokens

--line-height-body var(--line-height-body)