Lift Lab Pro

Brand Guidelines

Visual identity standards, color system, typography, and usage rules for Lift Lab Pro.

01

Color Palette

Click any swatch to copy the hex value to your clipboard.

Accent Gradient

Used for .btn-accent and .text-gradient

linear-gradient(135deg, #FF8550, #FF6B35, #e55520)

Navy Gradient

Used for .btn-navy and hero overlays

linear-gradient(135deg, #1E3A5F, #192f4d)
02

Typography

All type uses the system rounded font stack for a clean, native feel.

Font Stack

ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif

Display — text-5xl / font-bold

Train Smarter.
Get Stronger.

Heading — text-3xl / font-bold

Your AI Fitness Coach

Subheading — text-xl / font-semibold

Personalized Workout Programs

Body — text-base / text-white/60

Personalized workout programs, smart nutrition tracking, and real progress analytics — all powered by AI that adapts to your body and goals over time.

Caption / Label — text-sm / text-dark-300

Last synced 2 minutes ago  •  Version 2.4.1

03

Logo Mark

The dumbbell icon mark — always inside the accent-orange rounded square container.

64px — Minimum

96px — Small UI

128px — Standard

192px — Large

Lift Lab Pro

AI Fitness Coaching

on dark-900

Lift Lab Pro

AI Fitness Coaching

on navy-600

Usage Guidelines

  • Minimum size: 64 x 64px. Never render smaller.
  • Always use the accent orange (#FF6B35 → #e55520) gradient background.
  • Icon color is always white — never change stroke color.
  • Corner radius scales with size: 12px@64px, 16px@96px, 24px@128px, 32px@192px.
  • Clear space: maintain padding equal to 1/4 of the icon mark on all sides.
04

App Store CTA

The Download on the App Store badge in context.

On dark-900

Download on the
App Store

On navy-600

Download on the
App Store

Accent Button Variant (.btn-accent)

Download on the App Store
05

Macro Color System

Reserved exclusively for nutrition tracking UI. Do not use outside that context.

142g

Protein

#FF6B6B

220g

Carbohydrates

#4ECDC4

58g

Fat

#FFE66D

06

Do's and Don'ts

Brand usage rules to maintain consistency and quality.

Do

  • Use the accent orange (#FF6B35) for primary CTAs and key highlights only
  • Maintain minimum 64px logo mark size across all surfaces
  • Use navy-600 (#1E3A5F) as the primary brand background for hero sections
  • Apply text-gradient class for hero headline emphasis
  • Pair the dumbbell icon with the rounded square container at all times
  • Use dark-900 (#0D1117) as the base page background for consistent depth
  • Keep body copy on dark-300 (#8b919b) for readability hierarchy
  • Reserve macro colors (Protein, Carbs, Fat) exclusively for nutrition UI

Don't

  • Don't use the accent orange as a background color across large areas
  • Don't place the logo mark below 64px — use text lockup instead
  • Don't mix multiple gradient directions in a single view
  • Don't use white text on the accent orange without adequate contrast testing
  • Don't use the macro colors (coral, teal, yellow) outside nutrition contexts
  • Don't use backdrop-blur on fixed or sticky elements — use opaque backgrounds
  • Don't modify the dumbbell icon proportions or color outside brand guidelines
  • Don't use font sizes below 12px (text-xs) for any visitor-facing content