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>