LeadFastAI Brand Style Guide

Font, Colors, and Components

Color Palette

Primary Blues

Primary
--primary
Primary Light
--primary-light
Primary Lighter
--primary-lighter
Primary Lightest
--primary-lightest
Primary Dark
--primary-dark
Primary Darker
--primary-darker

Primary Blues


Primary
--primary


Primary Light
--primary-light


Primary Lighter
--primary-lighter


Primary Lightest
--primary-lightest


Primary Dark
--primary-dark


Primary Darker
--primary-darker

Accent Colors (Orange)


Accent
--accent


Accent Light
--accent-light


Accent Lighter
--accent-lighter


Accent Lightest
--accent-lightest

Success Colors (Cyan)


Success
--success


Success Light
--success-light


Success Lighter
--success-lighter

Neutral Grays


Dark
--cool-grey-900

Gray 800
--cool-grey-800

Gray 700
--cool-grey-700

Gray 600
--cool-grey-600

Gray 500
--cool-grey-500

Gray 400
--cool-grey-400

Gray 300
--cool-grey-300

Gray 200
--cool-grey-200

Gray 100
--cool-grey-100

Gray 050
--cool-grey-050

Gradients


Gradient Primary
--gradient-primary

Gradient Dark
--gradient-dark

Gradient Accent
--gradient-accent

Gradient Glow
--gradient-glow

Typography

Plus Jakarta Sans

Font Weights

Regular 400

The quick brown fox jumps over the lazy dog.

Medium 500

The quick brown fox jumps over the lazy dog.

Semibold 600

The quick brown fox jumps over the lazy dog.

Bold 700

The quick brown fox jumps over the lazy dog.

Extrabold 800

The quick brown fox jumps over the lazy dog.

Headings

Heading 1 (2.5rem, 800 weight)

Heading 2 (1.8rem, 700 weight)

Heading 3 (1.4rem, 600 weight)

Heading 4 (1.2rem, 700 weight)

Heading 5 (1rem, 700 weight)

Special Text Styles

Gradient Text Effect

Primary Colored Text

Secondary Text Color

Muted Text Color

UI Components

Buttons


<button class="btn btn-primary">Primary Button</button>

<button class="btn btn-secondary">Secondary Button</button>

<button class="btn btn-accent">Accent Button</button>

Cards

Card Title

This is a basic card component with a title and text content.





Featured Card

This card has a highlighted border to make it stand out.





Gradient Card

This card uses a gradient background for emphasis.





Badges

⚡ LEADFASTAI

<span style="display: inline-flex; align-items: center; background: var(--gradient-primary); padding: 8px 24px; border-radius: 50px; font-weight: 700; font-size: 0.875rem; color: white;">⚡ LEADFASTAI</span>
RECOMMENDED

<span style="display: inline-block; background: var(--primary); color: white; padding: 4px 12px; border-radius: 20px; font-size: 0.75rem; font-weight: 700;">RECOMMENDED</span>
flexibility test bjj

<span style="font-size: 0.75rem; padding: 4px 8px; background: var(--tag-bg); color: var(--tag-color); border-radius: 4px; font-weight: 500;">flexibility test bjj</span>