FORCE

Shopping Cart

Your cart is empty

Continue Shopping

Design System

Our comprehensive design system featuring buttons, typography, colors, and UI components with consistent styling and modern interactions.

Typography

H1 – Heading 1

Responsive clamp to max 64px, weight 400.

H2 – Heading 2

Responsive clamp to max 52px, weight 400.

H3 – Heading 3

Responsive clamp to max 28px, weight 400.

White Title Example

Use .title-white when placing titles on dark backgrounds.

Body text 28px, color #748394. This size is great for hero subtitles and marketing copy.

Body text 22px, color #283440, weight 400. Use for general content and descriptions.

Body text 18px (1.125rem), color #748394, weight 400. Perfect for smaller content blocks and captions.

Gradient Button

Primary action buttons with blue gradient background

Usage Examples:

  • • Call-to-action buttons
  • • Primary navigation
  • • Purchase actions
  • • Form submissions

Darker Gradient

Secondary actions with dark gradient background

Usage Examples:

  • • Secondary actions
  • • Read more links
  • • Alternative CTAs
  • • Modal triggers

White Button

Tertiary actions with white background

Usage Examples:

  • • Tertiary actions
  • • Information links
  • • Light backgrounds
  • • Subtle interactions

Interactive Examples

Hover States

Button Sizes

Text Variations

Technical Specifications

Button Shape

Top-left radius: 32px
Top-right radius: 4px
Bottom-right radius: 32px
Bottom-left radius: 4px

Color Schemes

Gradient Button
#25AAE1 → #004F8C
Darker Gradient
#0D3452 → #1A1A1A
White Button
#ffffff → #f8f9fa

CSS Classes Reference

/* Base button class - includes shape and common styles */
.btn-base

/* Button type classes */
.btn-gradient          /* Blue gradient button */
.btn-gradient-dark     /* Dark gradient button */
.btn-white            /* White button */

/* Legacy compatibility classes */
.btn-primary          /* Maps to .btn-gradient */
.btn-secondary        /* Maps to .btn-gradient-dark */
.btn-outline          /* Maps to .btn-white */

/* Usage examples */
<button class="btn-gradient">EXPLORE PRODUCTS</button>
<a href="#" class="btn-gradient-dark">SEE MORE</a>
<button class="btn-white">LEARN MORE</button>
BACK TO HOME