Icon: 
Life Fitness Brand Logo Transparent
Body: 

Style Guide

Title: 
INTRODUCTION

Body: 

This Web Style Guide is intended to serve as a set of guidelines for Life Fitness branded websites. Use these elements to help maintain a consistent visual identity throughout the site. For the complete set of Life Fitness brand guidelines, including downloadable logos and icons and/or print guidelines, visit the Hub Website or email Creative@LifeFitness.com.

    Title: 
    COLOR PALETTE

    Body: 

    The colors in use on LifeFitness.com originate from the Life Fitness Approved Accent Colors. Some grays have been added to complement the approved accent colors and provide appropriate legibility for copy. Life Fitness Creative Services must approve any additional accent colors beyond the colors listed here for use on LifeFitness.com.

    LIFE FITNESS COLOR PALETTE

     

    #4196b4

    #e9e9e9

    #4a4a4a

    #ffffff

    Primary call to action button. Text link.

    Background for header and select content blocks.

    Background for mega menu, mobile menu and footer. Primary text.

    Background for main content blocks. Text used on dark backgrounds.

    #e6ebea

    #415464

    #365d9d

    #5e4d62

    Background for select content blocks.

    Background for select content blocks.

    Background for select callouts.

    Background for select callouts.

    #9daeab

    #739849

    #903e2a

    #a7a7a7

    Background for select callouts.

    Background for select callouts. Flags for new products.

    Background for select callouts.

    Search and home icons.

    #f5bd47

    #222326

    #dbdbdb

     

    Review stars.

    Background for responsive support on phones on select content blocks.

    Background for extended footer.

     

     

     

     

     

     

    Body: 

    HAMMER STRENGTH COLOR PALETTE

    These colors are used for areas that feature content related to Hammer Strength. 

    #000000

    #898b8e

    #ffffff

    Background for content blocks.

    Button color.

    Text color.

     

     

     

    Title: 
    TYPOGRAPHY

    Body: 

    LifeFitness.com uses Avenir Next Regular and Avenir Next Bold weights. Fallback fonts are Helvetica, then Arial. 

    To purchase the desktop font license, please visit the Life Fitness page on fonts.com.To integrate the font into an associating website, please contact Creative@LifeFitness.com.

    AVENIR NEXT REGULAR

    Use for: H1, paragraph copy, icon labels, text links, button and navigation labels.

    AVENIR NEXT REGULAR

    ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz 
    0123456789!@#$%^&*()

    AVENIR NEXT BOLD

    Use for: H2 and H5.

    AVENIR NEXT BOLD

    ABCDEFGHIJKLMNOPQRSTUVWXYZ
    abcdefghijklmnopqrstuvwxyz
    0123456789!@#$%^&*()

    Title: 
    APPLIED TYPOGRAPHY

    Body: 

    This section illustrates how typography is applied together in headings and body copy on LifeFitness.com. Notations in light gray are the font size and line height, respectively. This section also includes text link styling. 

    Please note that all of the below applied typography instances can also be displayed in white (#ffffff) on dark backgrounds, as long as legibility is maintained. For additional styling guidance on white text over images, please refer to Imagery.

    TEXT COLORS

    #4a4a4a

    #ffffff

    #4196b4

    Primary text.

    Text used on dark backgrounds.

    Text links.

     

    Body: 

    H1 Heading

    40px / 44px

    H4 SUB HEADING

    16px / 24px

    Paragraph copy lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean text link style faucibus nibh et justo cursus id rutrum lorem imperdiet.     16px / 24px

    H2 HEADING 

    32px / 36px 

    Some links are supplemented with a guillemet character which can be produced with the following keyboard shortcut on a Mac: shift alt 4    16px / 24px

    Example guillemet  ›    shift-alt-4

    H3 Heading 

    24px / 30px 

    Paragraph copy lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.    16px / 24px

    • H5 HEADING FOR BULLETED LISTS

      16px / 30px

      Lorem ipsum dolor sit amet, consecter.  16px / 24px

    • H5 HEADING FOR BULLETED LISTS

      16px / 30px

      Lorem ipsum dolor sit amet, consecter.  16px / 24px

    • H5 HEADING FOR BULLETED LISTS

      16px / 30px

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  16px / 24px

    Title: 
    BULLETED LISTS

    Body: 

    LifeFitness.com utilizes two different styles for bulleted lists.

    BASIC BULLETED LIST

    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
    • Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

    BULLETED HEADERS AND DESCRIPTION

    • H5 HEADING FOR BULLETED LISTS

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

    • H5 HEADING FOR BULLETED LISTS

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    • H5 HEADING FOR BULLETED LISTS

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

    Title: 
    BREADCRUMBS

    Body: 

    Breadcrumbs are separated with a guillemet character ( › ) which can be produced with the following keyboard shortcut on a Mac:  shift alt 4   

     ›  Products›  Strength Training›  View By Series     10px / 20px

    Title: 
    ICONOGRAPHY

    Body: 

    All Life Fitness collateral, websites, digital communications, etc. should utilize the icon library created by Life Fitness Creative Services to provide brand continuity across all Life Fitness platforms. All available icons can be downloaded on the Hub Website. Please see below for icons used most commonly on the website.

    ICON USAGE

    Icons should only be used as a supporting element and should never be a dominant image. Often the icon replaces a word to represent it or compliments it. Icons used should remain consistent for their intended meaning to ensure continuity across all Life Fitness platforms.

    ICON COLORS

    Icons appear in different colors based on their use/location.

    #4a4a4a

    #a7a7a7

    #4196b4

    #9daeab

    Global navigation. Extended footer.

    Search and home.

    When paired with text links.

    Social media default. Rollover for hover.

     

     

    Global Navigation

    contact my account cart search

    Other Icons

    products video talk with us home

    Social Media

    Upon hover, the social icon appears in that channel's brand color.  (see page footer for hover example)

    facebook twitter youtube instagram linkedin pinterest

     

     

    Title: 
    BUTTONS

    Body: 

    LifeFitness.com utilizes five different button styles to communicate calls to action. Rollover buttons to see hover states. Notations in light gray are the button default color and hover color, respectively.

    PRIMARY

    Use for primary call to actions. If a content block features multiple calls to action, consider designating one as the primary call to action by featuring this button style.

    #4196b4 / #28829e

    Body: 

    SECONDARY

    Use for secondary call to actions within a content block.

    #4a4a4a / #383838

    Body: 

    HERO

    Use in hero areas on the Index and Home page. Additionally, this button can be used in select callout areas on the Index and Home pages only. This button features a solid white button (#ffffff). On hover, a white stroke is paired with a transparent background and white text.

    Body: 

    HAMMER STRENGTH - PRIMARY

    Use as the primary call to action style in content blocks that feature Hammer Strength information.

    #898b8e / #7c7f80

    Title: 
    TABLES

    Body: 

    LifeFitness.com utilizes one table style.

    Product Specifications

     
    Speed

    0.5-12 mph (0.8 - 19 km/h)

    Incline

    0-15%

    Warranty

    Lifetime on frame and Lifespring™ shock absorbers, lifetime on motor, 10-year on electrical and mechanical parts, 1-year on labor (warranties outside the U.S. may vary)

    Maximum User Weight

    400 lbs ( 180kg )

     

    Console features

     
    Speed 0.5-12mph (0.8 - 19 km/h)
    Incline 0-15%
    Warranty Lifetime on frame and Lifespring™ shock absorbers, lifetime on motor, 10-year on electrical and mechanical parts, 1-year on labor (warranties outside the U.S. may vary)
    Maximum User Weight

    400 lbs ( 180kg )

     

    Body: 

    FORM ELEMENTS

    Title: 
    TABS

    Body: 

    Use tabs on a page when the width is 1366px or more.

    Use an accordion in lieu of tabs on a page when the width is less than 1366px.

    Tabs should render as accordion on <1366px screen width.

    Title: 
    ROTATOR

    Body: 

    Stand-alone products shown in a rotator always appear on a white background with the blue title bar across the bottom. 

    The stroke around product images is 1 px in the color: #ededed. No drop shadows are used with product imagery.

    Body: 

    On desktop screen with 4 cards, image displays at 260x260

    (200x200 w/ 30px padding on all sides)

     

     On desktop screen with 6 cards, image displays at 230x160

    (128x128 w/ 15px top/bottom padding & 51px left/right padding)  

     

    The details above provide style direction for rotators to be used on the Life Fitness website; however, the functionality displayed above differs. For the most accurate representation of rotator functionality (based upon use), please reference the live website.

    Title: 
    THUMBNAILS

    Body: 

    When displaying thumbnails, use an active state for the selected thumbnail of a inside stroke of 4 px in the color: #4196b4. No drop shadows are used with thumbnails.

    Hover state should only be present on 1024+ screen width (at 140x140) and displayed centered above the thumbnail referenced (not depicted below).

     

    Title: 
    IMAGERY

    Body: 

    The Life Fitness image style features real and natural situations, with real people in real envrionments. For complete brand imagery guidelines, please refer the Hub Website.

    GENERAL GUIDELINES

    • People and/or product should be predominantly featured in the foreground with a shallow depth of field or "blurry" backgrounds
    • Lighting should be natural for the surroundings in which the situation is taking place.
    • The product should always be represented accurately
    • The Life Fitness logo on product should be illuminated and visible
    • Do not flip or reverse imagery
    • Always ensure your models have correct body positioning when using product. If you are scheduling a photoshoot, please be sure Life Fitness Academy (LFA) is present or approves imagery prior to use.
    • Consider your model's body positioning and wardrobe as to what might be appropriate (or not) for the viewer. Wardrobe should not feature any prominent manufacturer's logos.
    • Ensure the focal point of the image is in the center for appropriate display of the subject across all viewports

    TEXT OVER IMAGE STYLING: WITH GRADIENT

    Subtle gradients are occasionally used when text is displayed over full-width imagery on desktop and tablet screens in order to provide needed contrast and legibility. This occurs most often in hero content blocks. Reference the hero code on the following page for specific implementation details: https://www.lifefitness.com/facility/products/group-cardio

    Desktop and Tablet

    Apply a linear gradient to the right using #000000 at 85% opacity on the far left, 60% opacity at 50% screen width, and 0% opacity at 75% screen width:
    background: linear-gradient(to right,
    rgba(0, 0, 0, 0.85) 0%,
    rgba(0, 0, 0, 0.6) 50%,
    rgba(0, 0, 0, 0) 75%,
    rgba(0, 0, 0, 0) 100%);
    For desktop and tablet landscape, the text is restricted to a max width of 660px; for tablet portrait, the text is restricted to 70% of screen width.

    Phone

    Do not apply a gradient to the image. Instead, feature the image alone then create a new content block underneath the image to display the text. That block consists of a solid background color of #222326 and white text.

     

    Desktop and tablet example:

    Phone example:

    TEXT OVER IMAGE STYILING: NO GRADIENT

    In the case of text over image without a gradient in a hero image, the occasional use of a drop shadow on white text is recommended, for legibility. Please use the below style sparingly and only when necessary. The majority of the text on LifeFitness.com does not feature drop shadows.

    The “letterpress" style shadow is 60% black, 180 degrees, 1 px distance and 6 px blur, or: text-shadow: rgba(0, 0, 0, 0.6) 0px 1px 6px

    Body: 

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

    Title: 
    VIDEO

    Body: 

    This section provides guidance to how videos should be applied on LifeFitness.com.
    LIGHTBOX VS. INLINE

    Display videos in a lightbox when:

    • They are long (2-3 minutes)
    • Content is more informational, rather than flashy

    Display videos inline when applicable on the template and when:

    • They are short (1-2 minutes)
    • Content is more easily digestible and dynamic, similar to a television commercial

    TEXT OVER VIDEO STYLING

    In the case of text over video, the occasional use of a drop shadow on white text is recommended, for legibility. Please use the below style sparingly and only when necessary. The majority of the text on LifeFitness.com does not feature drop shadows. The “letterpress" style shadow is 60% black, 180 degrees, 1 px distance and 6 px blur, or: text-shadow: rgba(0, 0, 0, 0.6) 0px 1px 6px.

    Further, when videos are displayed on a page full-screen (both standalone or in a carousel) they should play inline regardless of length, whereas any video driven to by a call to action link or button (e.g. Watch the Design Process) should display in a lightbox.

    CLOSE

    FIND MY LOCAL DISTRIBUTOR

    Are you looking for your local commercial or home equipment distributor?