Basic Lifeforce Web Style Guide

Understand how we use colors, fonts, and other styles on the web using Tailwind CSS.

Colors

We use a number of colors on the website.
Primary Text - Dark Gray
rgb(17, 24, 39)
Secondary Text - Gray
rgb(75, 85, 99)
Border Color - Light Gray
rgb(209, 213, 219)
Background Color - Off White
rgb(242, 241, 238)
White
rgb(255, 255, 255)
Primary Color - Orange
rgb(224, 132, 51)
Primary Color HOVER - Orange Darkened
rgb(214, 114, 42)
Secondary Color - Teal
rgb(13, 148, 136)
Secondary Color HOVER - Teal Darkened
rgb(15, 118, 110)
Warning Color - Red
rgb(220, 38, 38)
Warning Color HOVER - Red Darkened
rgb(185, 28, 28)
Biomarker Green
rgb(156, 205, 103)
Biomarker Light Green
rgb(210, 235, 184)
Biomarker Red
rgb(226, 121, 104)

Opacities & Gradients

To enhance our style we allow relatively liberal use of opacities and gradients.
10% Opacity
Example usage: Backgrounds for tags & notifications
25% Opacity
Example usage: Backgrounds for design elements & loading animations
40% Opacity
Example usage: Backgrounds for design elements & past bars on diagnostic chart
80% Opacity
Example usage: Diagnostic chart key
Radial Gradient from Top: Orange 40% to Off White
Example usage: Backgrounds for design elements
Radial Gradient from Right: Teal 40% to Off White
Example usage: Backgrounds for design elements
Radial Gradient from Bottom: Teal 25% to Orange 25%
Example usage: Backgrounds for design elements
Radial Gradient from Left: Dark Gray 80% to Dark Gray 0%
Example usage: Hero image overlay

Font Family + Weight

We use Aktiv Grotesque Extended and Aktiv Grotesk.

Aktiv Grotesk Extended Extrabold Uppercase

Always Uppercase / Always Extrabold (800) - Used for primary headers

Aktiv Grotesk Bold

Title case or Sentence case / Bold (700) - Used for secondary headers

Aktiv Grotesk Bold Uppercase

Uppercase / Bold (700) - Used for secondary headers

Aktiv Grotesk Medium

Title case or Sentence case / Medium (500) - Used for buttons and emphasized text

Aktiv Grotesk Regular

Title case or Sentence case / Regular (400) - Used for all types of copy

Font Sizes

We use specific font sizes and line heights following Tailwind CSS.
text-xs
font-size: 0.75rem; /* 12px */ line-height: 1rem; /* 16px */
text-sm
font-size: 0.875rem; /* 14px */ line-height: 1.25rem; /* 20px */
text-base
font-size: 1rem; /* 16px */ line-height: 1.5rem; /* 24px */
text-lg
font-size: 1.125rem; /* 18px */ line-height: 1.75rem; /* 28px */
text-xl
font-size: 1.25rem; /* 20px */ line-height: 1.75rem; /* 28px */
text-2xl
font-size: 1.5rem; /* 24px */ line-height: 2rem; /* 32px */
text-3xl
font-size: 1.875rem; /* 30px */ line-height: 2.25rem; /* 36px */
text-4xl
font-size: 2.25rem; /* 36px */ line-height: 2.5rem; /* 40px */
text-5xl
font-size: 3rem; /* 48px */ line-height: 1;
text-6xl
font-size: 3.75rem; /* 60px */ line-height: 1;
text-7xl
font-size: 4.5rem; /* 72px */ line-height: 1;
text-8xl
font-size: 6rem; /* 96px */ line-height: 1;
text-9xl
font-size: 8rem; /* 128px */ line-height: 1;

Icons

We use SVG material design icons that can be found here: Pictogrammers Material Design Icons.
HORMONE OPTIMIZATION HEALTHSPAN + WEIGHT LOSS HEALTHSPAN + LONGEVITY IMMUNE SYSTEM AGING + METABOLISM SLEEP + RECOVERY ENERGY + FOCUS HORMONE HEALTH DETOXIFICATION BONE + IMMUNE + MUSCLE BRAIN + MUSCLE CARDIAC + IMMUNE