LeapFrog Divi Style Reference

Style Reference

LeapFrog Divi 5 Layout Pack

Use this file as a quick browser-based reference for colors, cards, buttons, and panel styles.

Primary CTA Ghost CTA

Colors

Primary Blue
#0EA5E9

Accent Cyan
#22D3EE

Dark Base
#020617

Dark Secondary
#0F172A

Text Primary
#FFFFFF

Soft Red
#FCA5A5

Cards

Standard Card

Used for services, results, and solution blocks.

Pain Card

Used for manual work, missed leads, and bottlenecks.

Authority Card

Used for trust, security, and infrastructure messaging.

Panels

Gradient Solution Panel

This treatment is ideal for the solution intro on the left side of the automation section.

Video Placeholder

Embed your automation demo, explainer, or case study here.

▶

Place Your Video Here

Use a YouTube, Vimeo, Loom, or self-hosted video embed.

get in touch

Building Strategies That Drive Results

Get In Touch

Quick Menu


Home

About us

Services

Contact

Services


Automation Solutions

Data Storage Solutions

Website Maintenance

More To Come

Contact



Middle Island

New York 11953



info@leapfrogcomputers.com



631-484-0758

Brand Positioning

LeapFrog Computers helps businesses eliminate repetitive work, reduce risk, and scale with secure automation infrastructure.

Color Palette

Primary Blue: #0EA5E9
Accent Cyan: #22D3EE
Dark Base: #020617
Dark Secondary: #0F172A
Text Primary: #FFFFFF
Text Secondary: #CBD5E1
Muted Text: #94A3B8
Soft Red Accent: #FCA5A5

Sizing

Section Spacing
Desktop: 96px top / 96px bottom
Tablet: 72px top / 72px bottom
Mobile: 56px top / 56px bottom
Container Width:
Max Width: 1200px

Buttons & CTAs

Primary CTA:

Background: #0EA5E9 (Primary Color)
Text: #020617
Hover Background: #38BDF8
Font Weight: 700
Padding: 14px 28px

Ghost CTA:

Background: rgba(255,255,255,0.04)
Border: 1px solid rgba(255,255,255,0.16)
Text: #FFFFFF

Messaging Rules

Lead with outcomes, not tools
Emphasize security, clarity, efficiency, scalability
Use short, direct headlines
Keep paragraphs easy to scan

Typography

Headings:

Font: Inter, sans-serif
Weight: 700 (Bold)
Tracking: -0.02em

Body:

Font: Inter, sans-serif
Size: 18px
Line Height: 1.65

Boarders & Shadows

Border Radius:

Standard cards: 20px
Large panels/video blocks: 28px
Buttons: 16px

Shadows:

Cards: 0 12px 30px rgba(0,0,0,0.18)
CTA Buttons: 0 10px 30px rgba(14,165,233,0.25)

Cards & Labels

Card System:

Background: rgba(255,255,255,0.05)
Border: 1px solid rgba(255,255,255,0.10)
Padding: 24px
Radius: 20px

Labels:

Size: 12px
Uppercase
Letter spacing: 0.18em
Weight: 700
Color: #67E8F9