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

Secondary Logo - Full Color

MiGym Logo Secondary

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

Primary Logo - All White

MiGym Logo White

Primary Logo - Greyscale

MiGym Logo Greyscale

Primary Logo - Single Color Imprint - Grey

MiGym Logo Grey

Primary Logo - Single Color Imprint - Orange

MiGym Logo Orange

Secondary Logo - Full Color

text logo

Secondary Logo - White

white text logo

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

incorrect logo 1

2. Change orientation or rotation

incorrect logo 2

3. Disproportionately scale or resize

incorrect logo 3

4. Change the color of elements

incorrect logo 4

5. Recreate the logo or change font

incorrect logo 5

6. Add special effects to the logo

incorrect logo 6

7. Display logo as an outline text

incorrect logo 7

8. Use on top of contrasting background

incorrect logo 8

9. Add other elements not specified

incorrect logo 9

10. Cropping the logo in any way

incorrect logo 10

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 guide

Colors

Primary Color Palette

PMS: Pantone 165C
CMYK: 0, 75, 100, 0
RGB: 242, 101, 34
WEB: #F26522

PMS: Pantone 429C
CMYK: 0, 0, 0, 40
RGB: 167, 169, 172
WEB: #A7A9AC

Secondary Color Palette

Dark Grey 
#515151

White
#FFFFFF

Typography

Typeface for Logo

The MiGym logo typeface is Optima Bold. This font is only used in the logo. 

Optima Bold

Optima Bold Font

Typeface for Web

Our primary typeface for all web materials and emails is Open Sans and Montserrat. We use Open Sans at regular weight for standard copy and Montserrat at bold weight for headlines and calls to action. If Open Sans and Montserrat are unavailable, Arial is acceptable to use in its place.

Fira Sans Regular - Body Text

ABCDEFGHIJKLMNOPQRSTUVWXYZ
Abcdefghijklomnopqrstuvwxyz
1234567890

Montserrat Bold - Headings

ABCDEFGHIJKLMNOPQRSTUVWXYZ
Abcdefghijklomnopqrstuvwxyz
1234567890

Visual Language

Icon Fonts & Styles

Branded App Class Scheduling
Native Apps for Android and Apple platforms
Custom App branding
Cardless Check-in
Virtual coupons and trials
Real-time data Analytics

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:#1B1B1B
font-family: Montserrat
Size: XL

H2 - Secondary Headings

color: #1B1B1B
font-family: Montserrat
Size: Large
Weight: 600

H3 - Subheadings

color: #1B1B1B
font-family: Montserrat
Size: Medium
Weight: 600

H4 - Important Body Text

color: #1B1B1B
font-family: Open Sans
Size: Default

H5 - Small Heading

color: #1B1B1B
font-family: Montserrat
Size: Default
Style: Bold Text <b>

Paragraph - Body Text

color: #1B1B1B
font-family: Open Sans
Size: Paragraph

Text Links

color: #F26522
font-family: Open Sans
Size: Paragraph

Text Link Hover

color: #F26522
opacity: 0.8

Nav Link

color:#1B1B1B
font-family: Open Sans
Size: Default

Nav Link Hover

color: #a7a9ac

Small Text Disclaimers

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

Colors - Web

Buttons
#F26522 

Button Hover
#F26522 rgba(242, 101, 34 , 0.8)

Links
#F26522 

Link Hover
#F26522
rgba(242, 101, 34, 0.8) 

Headings & Accents
#1B1B1B

Body Text
#1B1B1B

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