MiGym - Interactive Style Guide

The key brand resources and fundamentals to get started with our brand. Find logos, colors and typography specs.

Brand Basics

Brand Identity & Principles

Mission Statement: Our mission is to transform the membership and client experience for sports and fitness businesses. We do this by delivering affordable, feature-rich branded mobile apps that naturally increase member engagement, facilitate membership sales, and strengthen retention.

Company Name: The official company name is “Apps That Fit LLC ‘MiGym’” which should be used only for professional and formal documentation. The company is more commonly referred to as “MiGym”, which is how the company should be named in all copy.

Brand Identity

The following guidelines have been developed to ensure the correct usage of MiGym’s brand identity wherever it is reproduced and applied. Please follow the set specifications in the strictest form. DO NOT deviate from the guideline. Any departure from the documentation will be a misrepresentation of MiGym both as a brand and as a business.

Master Brand

Primary Logo - Full Color

MiGym-Logo-2021

Secondary Logo - Full Color

MiGym-Logo-2021-Icon

Logo Variations 1

The logo must be used as is and not be altered in any way besides the color variations provided in this diagram.

The primary full color logo should be used whenever possible to officially represent the company in all brand communications. If the logo is represented on a dark or photographic background, the primary or secondary logo all white option should be used. The single color logo variation, may be used when the primary orange in the logo vibrates against the colored background.

The greyscale variation is ONLY used for envelopes, newsprint and on any other printed or scanned documentation.

The full color icon can be used as favicon and used on all social media outlets.

Primary Logo - Full Color

MiGym-Logo-2021

Primary Logo - All White

MiGym-Logo-2021_White

Primary Logo - Greyscale

MiGym-Logo-2021_Greyscale

Primary Logo - Single Color Imprint - Slate

MiGym-Logo-2021_Slate

Primary Logo - Single Color Imprint - Orange

MiGym-Logo-2021_Orange

Secondary Logo - Full Color

MiGym-Logo-2021-Icon

Secondary Logo - White

Logo Media Files - Download

Do's & Don'ts

Incorrect Usage

Only approved variations of the logo can be used and cannot be altered in any way. This means you cannot:

1. Re-arrange the order of elements

MiGym-Logo-2021_wrong1

2. Change orientation or rotation

MiGym-Logo-2021_wrong2

3. Disproportionately scale or resize

MiGym-Logo-2021_wrong3

4. Change the color of elements

MiGym-Logo-2021_wrong4

5. Recreate the logo or change font

MiGym-Logo-2021_wrong5

6. Add special effects to the logo

MiGym-Logo-2021_wrong6

7. Display logo as an outline text

MiGym-Logo-2021_wrong7

8. Use on top of similar color background

MiGym-Logo-text_wrong08

9. Add other elements not specified

MiGym-Logo-2021_wrong9

10. Cropping the logo in any way

MiGym-Logo-2021_wrong10

Size & Positioning

Whenever possible please isolate the MiGym logo or icon from other copy or graphic elements by creating designated amount of clear space around it equal to the distance indicated by the “X” in the diagram. The size of “X” should never be smaller than the width of 0.5”.

logo-usage-migym-2021

Colors

Primary Color Palette

RGB: 255, 124, 34
WEB: #ff7c22 

RGB: 24, 32, 35
WEB: #182023

Secondary Color Palette

Slate 
#597179

Pacific
#20BFD9   

White
#FFFFFF

Light Grey
#F0F0F0

Typography

Typeface for Logo & Print

The MiGym logo typeface is Fira Sans. This is also our primary typeface for all of our print materials. For main headings we use Fira Sans Bold, for all body text we use Fira Sans Regular.

Fira Sans - Body Text

ABCDEFGHIJKLMNOPQRSTUVWXYZ
Abcdefghijklomnopqrstuvwxyz
1234567890

Fira Sans Bold

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklomnopqrstuvwxyz
1234567890

Typeface for Web

Our primary typeface for all web materials and emails is Fira Sans as well. We use the regular weight for standard copy and the bold weight for headlines and calls to action. If Fira Sans is unavailable, Arial is acceptable to use in its place.

Fira Sans - Body Text

ABCDEFGHIJKLMNOPQRSTUVWXYZ
Abcdefghijklomnopqrstuvwxyz
1234567890

Fira Sans - Headings

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklomnopqrstuvwxyz
1234567890

Visual Language

Icon Fonts & Styles

Streamline Ultimate Icons have been used for EZFacility. You can download the individual icons and style them accordingly right from the Streamline Ultimate website. You are limited however to .png files. .svg files are only available in the pro version.

Visit Streamline Icons

calendar-date
programming-browser
rating-star
mobile-phone-1
tags
analytics-graph-bar

Photography Styles

DO’S – Correct Usage
  • Environment (fitness facilities, gyms, yoga studios, weight room, wellness facility, spa )
  • Lighting (natural, warm feel or glow)
  • Models ( fitness trainers, physical trainers, club owners, wellness staff, coaches, professional business owners) ( demographic is mainly middle-aged males, business professionals)
  • Wardrobe (fitness or gym attire, working professional, dress wear should be casual not suit and tie attire, not too revealing, business appropriate)
  • Color Palette (established brand-colors)
  • Software (self-service, scheduling software, reporting, display on mobile devices)
GrowYourFitnessBus_3PeopleAtGym_760x375
phone-usage-example
stock-phone-fitness-ephemera
DON’TS – Incorrect Usage
  • Environment (corporate, office setting, desk in office space, hotels, conference room,  school classroom)
  • Lighting (cold, dark and dull colors, weird cropping, no natural light)
  • Models ( too young or overly hip fitness models, business attire in suits, extra cheesy smiles, direct eye contact with camera,  extra close ups, positioning of subject, no nudity, model seeming too fake or non-believable expressions, an all women audience, no religious subjects or objects, too childish etc)
  • Wardrobe (any corporate attire, suit and tie, dress shoes, button ups, high heels, dresses, or fitness workout gear that’s too revealing.)

MiGym - UI Library - User Interface - Web Styles

A library of reusable UI components for use web and native applications. Including ready to use examples.

UI Components

Typography Styles: These use the Elementor size settings

H1 - Main Headings

color:#182023
font-family: Fira Sans
Size: XL

H2 - Secondary Headings

color: #182023
font-family: Fira Sans
Size: Large
Weight: 500

H3 - Subheadings

color: #182023
font-family: Fira Sans
Size: Medium
Weight: 500

H4 - Important Body Text

color: #182023
font-family: Fira Sans
Size: Default

H5 - Small Heading

color: #182023
font-family: Fira Sans
Size: Default
Style: Bold Text

Paragraph - Body Text

color: #182023
font-family: Fira Sans
Size: Paragraph

Text Links

color: #FF7C22
font-family: Fira Sans
Size: Paragraph

Text Link Hover

color: #FF7C22
opacity: 0.8

Nav Link

color:#182023
font-family: Fira Sans
Size: Default

Nav Link Hover

color: #a7a9ac

Small Text Disclaimers

color:#182023
font-family: Fira Sans
font-size: 11px

Colors - Web

Buttons
#FF7C22

Button Hover
rgba(255, 124, 34, 0.81) 

Links
#FF7C22

Link Hover
rgba(255, 124, 34, 0.81)  

Headings & Accents
#182023

Body Text
#182023

Light Grey BKGD
& Footer
#F0F0F0

Buttons - Web

Primary Button
background color: #F26522
border radius: 4px
font-family: Montserrat
size: Medium
font-weight: semibold
text color: #ffffff

Primary Hover
background color: #F26522
Opacity: 0.8
Transition: all 0.2s

Secondary Button
background color: #ffffff
border radius: 4px
font-family: Fira Sans
size: Medium
font-weight: semibold
text color: #F26522

Secondary Hover
Opacity: 0.8
Transition: all 0.2s

Teritary Button
border radius: 4px
border color: #F26522
font-family: Fira Sans
size: Medium
font-weight: semibold
text color: #F26522

Teritary Hover
Opacity: 0.8
Transition: all 0.2s

Large Button
size: Large

Small Button
size: Small

Padding

section: 70px
section-first: 70px 0 0 0;
section-middle: 35px 0;
section-side: 50px, 50px
section-last: 0 0 70px 0;

Form Fields

Place Holder
Color: #888888
Font size: 18px

Input
Border solid 2px #dddddd
Color: #888888
Font style: Regular
Padding: 15px
Width: 100%

Input Error
Color: #D41840
Border solid 2px #D41840