Fithabits
Brand Guidelines
v.1.0
These are Fithabits Brand Guidelines. The alpha and omega of our physical and digital presence. Our best bud when it comes to verbal and visual communication. Our trusted pilot when it comes to strategy and design assets. Our cool ID when we introduce ourselves. Advise it regularly.
Contents
4 Strategy
22 Design
5
Overview
23 Logomark
6 7 8 9
Our Drive Our Premise Our Character Our Values
24 25 26 27 28 29 30 31 32 33 34 35
10 Tagline & Slogans 11 Tagline 12 Slogan
13 Language System 15 Device Access & Data Request 16 Motivation for Action 17 Errors 18 Cancellations 19 Account 20 Payments & Security 21 Experience
Logomark Logo Design Logo Extension Positive / Negative Clear Space Sizes Alignment Logomark as an icon Color Combinations Logomark as a Graphic Logomark as a Graphic Things to Avoid
36 Logotype 37 38 39 40 41 42 43 44 45
Logotype Logotype Design Logotype Kerning Positive / Negative Clear Space Sizes Alignment / Arangement Color Combinations Things to Avoid
46 Color 47 48 49 50 51 52
FITHABITS BRAND GUIDELINES V.1.0 DECEMBER 2018
Primary Colors UI Colors Gradients Color Combinations Color Combinations Things to Avoid
53 Typography
87 Iconography
54 55 56 57 58 59 60 61 62
88
Brand Typeface Typography Ηierarchy Typography Scale Rate Typography Scale Rate Alignment / Arrangement Typesetting Leading Typesetting Kerning Color Combinations UI Typeface 62 Web / MacOS 63 Web / Windows 64 App / iOS 65 App / Android
96 98 100
66 Imagery 67 68 69 70 72
Imagery Logomark on images Filters Guides Feeling
73 Digital 74
79
82
Website 75 Landing Page 76 User Home 77 Discover Page 78 Responsive Design Application 80 Basic Screens 81 8pt System Grid Social Media 82 Facebook Page 83 Instagram Profile 84 General Share Image 85 Square Posts 86 Stories
103
106
109
System Icons 88 Monocolor Fill 89 / Grid System 90 / Spacing / Size 91 Monocolor Line 1/2 92 Monocolor Line 2/2 93 / Grid System 94 / Spacing / Size 95 Circled Icons Navbar Icons 97 Grid System / Spacing / Size Notification Icons 99 Grid System / Spacing / Size Dashboard Icons 101 Grid System 102 Spacing / Size Emoticons 104 Grid System 105 Size / Spacing Activities Icons 107 Grid System 108 Size / Spacing Map Icons 110 Grid System / Spacing / Size
111 Illustration 112 Illustration Character 113 Anatomy 114 Color Palette 115 Color Combinations 116 Coloring Techniques 117 Applications 117 Website Landing Page 118 Top Activities 119 Outdoor Activities 120 Mobile App Animated Illustrations 121 Things to Avoid
122 Applications 123 Digital 131 Print
137 Contact
STRATEGY
STRATEGY
OVERVIEW
STRATEGY
OVERVIEW
Our Drive
OUR DRIVE
6
Enjoy your body, it’s the greatest instrument you’ll ever own. — Baz Luhrmann
FITHABITS BRAND GUIDELINES
STRATEGY
OVERVIEW
Our Premise
FITHABITS BRAND GUIDELINES
OUR PREMISE
 7
Accessible, fun and purposeful fitness lifestyle.
STRATEGY
OVERVIEW
Our Character
FITHABITS BRAND GUIDELINES
OUR CHARACTER
8
Intimate
Motivational
We’re slack and cool, we use slang, we keep it personal.
We’ve failed, yet we know there is a way out of procrastination. We want to make people change their habits.
All-inclusive
Heroic
No discrimination, no gender roles, no prejudice, no shaming.
We want to change the fitness industry.
STRATEGY
OVERVIEW
Our Values
OUR VALUES
9
Don’t procrastinate
Fuck Mondays. Start today. Don’t compromise
Find your perfect fit. Don’t give up
The only limit is you. Thrive and shine
Hack your way into achieving your every fitness goal.
FITHABITS BRAND GUIDELINES
STRATEGY
TAGLINE & SLOGANS
STRATEGY
TAGLINE & SLOGANS
Tagline
FITHABITS BRAND GUIDELINES
TAGLINE
 11
STRATEGY
TAGLINE & SLOGANS
SLOGAN
12
Slogan English Version
Book activities as fast as you order pizza. Hack your way into achieving your every fitness goal. Whenever - Whatever! No strings attached. Find your perfect fit. Book instantly. Ace the fitness game, starting today. Forget Mondays. Start today.
Greek Version
Κλείσε δραστηριότητες όσο γρήγορα παραγγέλνεις pizza. Πέτυχε τους fitness στόχους σου. Όλους τους. Όποτε θες! Χωρίς δεσμεύσεις. Βρες την ιδανική δραστηριότητα. Κλείσε στη στιγμή. Ξέχνα τις Δευτέρες. Ξεκίνα σήμερα.
FITHABITS BRAND GUIDELINES
STRATEGY
LANGUAGE SYSTEM
Sure, we’re cool and casual, yet several cases demand our respective behavior. Here we’ve grouped the most important ones, along with some examples of the optimal language that each requires.
STRATEGY
LANGUAGE SYSTEM
Device Access & Data Request
DEVICE ACCESS & DATA REQUEST
15
Cases
Guides
- Native alerts
- Height
Don’t waste user’s time
- SOS contact
- Medical history
Don’t just demand actions
- Date of birth
- Exercise history
Don’t be distant
- Gender
- Personal goals
Be brief Explain why
Inspire confidentiality
- Weight
Examples SOS contact
Camera access
DO: Λογικά δεν θα χρειαστεί, αλλά για να είμαστε σίγουροι θα θέλαμε να ξέρουμε το τηλέφωνο ενός κοντινού σου ανθρώπου. Θα το χρησιμοποιήσουμε αποκλειστικά σε τυχόν έκτακτη ανάγκη.
DO: Για να τραβήξεις φωτογραφίες μέσω της εφαρμογής θα χρειαστεί πρώτα να επιτρέπεται πρόσβαση στην κάμερα.
DON’T: Πρόσθεσε μια επαφή έκτακτης ανάγκης.
FITHABITS BRAND GUIDELINES
DON’T: Άνοιξε την κάμερά σου για να τραβήξεις φωτογραφία.
STRATEGY
LANGUAGE SYSTEM
Motivation for Action
MOTIVATION FOR ACTION
16
Cases
Guides
- Badges
- Profile completion
Don’t sound typical
- Booking notifications
- New article / video / recipe / event notifications
Don’t let users get bored
- Subscribe - Reviews / Ratings - Personalization teasers
Don’t expect initiative
Make him / her feel unique Give reward Lead, repeat & remind
- Pre / After-work out notification
Examples Personalization teaser DO: Λίγο ακόμη έμεινε! Με λίγες τελευταίες πινελιές στο προφίλ σου, θα μας βοηθήσεις να σου προτείνουμε δραστηριότητες και fitness pro tips μόνο για σένα! Buttons: - Πάμε! - Όχι τώρα
FITHABITS BRAND GUIDELINES
DON’T: Ολοκλήρωσε το προφίλ σου απαντώντας στις ερωτήσεις που ακολουθούν. Buttons: - OK - Παράλειψη
STRATEGY
LANGUAGE SYSTEM
ERRORS
17
Errors Cases
Guides
- Wrong password
Don’t complicate things
- Forgot password
Don’t let users feel insecure
- Connection failed
Don’t be indifferent
Make it easy Act cool
Ensure everything is going to be okay
Don’t expect users to know the way out
Show the way to fix things up
Examples Forgot password
404 error page
DO: It’s okay!
DO: Χμμ… Η σελίδα που ψάχνεις δεν υπάρχει.
Μπορείς να τον αλλάξεις τσακ-μπαμ. Ποιο είπαμε ότι είναι το e-mail σου;
Πάμε ξανά; Button: Πίσω στην αρχική
DON’T: Λάθος κωδικός. Βάλε το e-mail σου για να ορίσεις νέο κωδικό πρόσβασης.
FITHABITS BRAND GUIDELINES
DON’T: Η σελίδα δε βρέθηκε. Button: Αρχική Σελίδα
STRATEGY
LANGUAGE SYSTEM
CANCELLATIONS
18
Cancellations Cases
Guides
- Class cancellation
Don’t just inform
- Booking cancellation
Don’t expect the user to know the alts
Sympathize Redirect
- Payment failure
Examples Payment failure
Class cancellation notification
DO: Oops!
DO:
Η πληρωμή σου δεν εγκρίθηκε από την τράπεζα. Βεβαιώσου για το υπόλοιπο της κάρτας σου και προσπάθησε ξανά αργότερα.
Δυστυχώς το μάθημα Body Pump ακυρώθηκε. Επέλεξε τώρα μια άλλη ώρα και μέρα!
Button: Το' πιασα DON’T: Σφάλμα! Η συναλλαγή σου απέτυχε. Button: OK
FITHABITS BRAND GUIDELINES
DON’T: Το μάθημα Body Pump ακυρώθηκε.
STRATEGY
LANGUAGE SYSTEM
ACCOUNT
19
Account Cases
Guides
- Profile
Don’t use long sentences
- Dashboard / Menu bar
Don’t use generic language
Be specific
- Profile settings
Don’t be too loose or expert
Use familiar terms
- Notification settings
No surprises - No shit - No misguides
Keep it short & simple
- New terms & conditions (notification)
Examples
FITHABITS BRAND GUIDELINES
Settings / Profile Settings
Profile
DO: Βασικά στοιχεία / Περιοχές
DO: Θερμίδες, Βήματα
DON’T: Πώς σε λένε; / Πού συχνάζεις;
DON’T: Έχεις κάψει, Έχεις περπατήσει
STRATEGY
LANGUAGE SYSTEM
Payments & Security
PAYMENTS & SECURITY
20
Cases
Guides
- Settings / Billing address
Don’t fool around
- Settings / Cards
Don’t allow misunderstandings
Explain what’s happening now
- Password setting
Don’t underestimate users’ data
Ensure you’ll keep them safe
Be direct
Examples
FITHABITS BRAND GUIDELINES
Settings / Billing address
Settings / Cards
DO: Πληροφορίες χρέωσης
DO: Κάρτες πληρωμών
Για να είμαστε σωστοί σε όλα μας, πρόσθεσε εδώ τα πραγματικά σου στοιχεία για την έκδοση νόμιμης απόδειξης.
Τα πλήρη στοιχεία της κάρτας σου είναι διαθέσιμα για αποθήκευση και επεξεργασία μόνο από το σύστημα της Τράπεζας Πειραιώς.
DON’T: Πληροφορίες
DON’T: Κάρτες πληρωμών
Πρόσθεσε τα στοιχεία σου.
Πρόσθεσε τα στοιχεία της κάρτας σου για τις πληρωμές σου στη Fithabits.
STRATEGY
LANGUAGE SYSTEM
EXPERIENCE
21
Experience Cases
Guides
- Splash screen
Don’t be distant
Be friendly
- Personal e-mails
Don’t command
Engage
Don’t waste user’s time
Say what this is actually about
Examples Application on-boarding DO: 1. Καλώς ήρθες στο Fithabits — Your One-Stop Wellness App 2. Βρες και κλείσε φανταστικές δραστηριότητες στο λεπτό. 3. Βρες συναρπαστικά videos, fit-expert άρθρα και λαχταριστές συνταγές χωρίς τύψεις.
FITHABITS BRAND GUIDELINES
DON’T: 1. Καλώς ήρθες στην παρέα του Fithabits! 2. Εξερεύνησε και κλείσε τώρα νέες δραστηριότητες κοντά σου. 3. Για να ξεκινήσεις, πάτα εδώ. Προσφορές, δώρα και νέες δραστηριότητες σε περιμένουν!
DESIGN
DESIGN
LOGOMARK
DESIGN
LOGOMARK
LOGOMARK
Logomark This is our logomark. Being mostly typographic, it emerges from the combination of the letters F and H, the initials of our brand name’s two basic components; Fit and Habits. Except guaranteeing the logomark’s legibility and identification, it also allows a prompt connection with the brand name itself.
FITHABITS BRAND GUIDELINES
24
DESIGN
LOGOMARK
LOGO DESIGN
25
Logo Design And this is how it actually happens, with x and z setting the weights of the horizontal and vertical lines that comprise it.
X
X
Z
FITHABITS BRAND GUIDELINES
Z
DESIGN
LOGOMARK
LOGO EXTENSION
26
Logo Extension The extension of the logomark functions as a logotype asset, a graphic element and a visual concept to be met throughout our brand presence. "x" defines the ratio that should be kept in logo’s extended versions and never be disregarded or misused.
X
FITHABITS BRAND GUIDELINES
3X
6X
DESIGN
LOGOMARK
Positive Negative
FITHABITS BRAND GUIDELINES
POSITIVE NEGATIVE
27
DESIGN
LOGOMARK
CLEAR SPACE
28
Clear Space In all applications and in any case, the logomark should be surrounded by clear space at least equal to its size.
Χ
Χ
FITHABITS BRAND GUIDELINES
DESIGN
LOGOMARK
SIZES
29
Sizes These are the minimum sizes which the logomark is allowed to be used in web and print applications.
18 px
Web
FITHABITS BRAND GUIDELINES
4 mm
DESIGN
LOGOMARK
ALIGNMENT
30 X
Alignment
X
Here are some guides on how to place the logomark in space and several types of layouts to be used in applications.
Z
X
X X
FITHABITS BRAND GUIDELINES
X
X
X
Z
DESIGN
LOGOMARK
LOGOMARK AS AN ICON
31
Logomark as an icon When used as an icon, our logomark should appear in the showing proportions. Note that its main use as an icon is mostly met in in app and social media icons.
X
X
Negative
FITHABITS BRAND GUIDELINES
Y
2xY
DESIGN
LOGOMARK
COLOR COMBINATIONS
Color Combinations
32
Primary
Secondary
Teal / Light
Teal / Light
Indigo / Light
White / Indigo
Teal / Indigo
Indigo / Teal
White / Teal
These are the color combinations which can be applied on the icon in several applications. It’s them and only them that can be used each time, so make sure you get these right! For exact color palette, check Colors chapter (see page 46) ;)
FITHABITS BRAND GUIDELINES
DESIGN
LOGOMARK
Logomark as a Graphic When used as a graphic element, logomark is appropriate for empowering the brand identity and giving prominence to its character. Check some examples.
FITHABITS BRAND GUIDELINES
LOGOMARK AS A GRAPHIC
33
DESIGN
LOGOMARK
Logomark as a Graphic When used as a graphic element, logomark is appropriate for empowering the brand identity and giving prominence to its character. Check some examples.
FITHABITS BRAND GUIDELINES
LOGOMARK AS A GRAPHIC
34
DESIGN
LOGOMARK
THINGS TO AVOID
35
Things To Avoid If you’re using our logomark and it looks anything like the examples on the right, abandon mission! All these cases should be avoided, no joke.
FITHABITS BRAND GUIDELINES
Don’t use colors of your choice Stick to the brand colors
Don’t rotate
Don’t shear
Don’t improvise on color combinations
No full-bleed
Don’t crop
Don’t outline
Don’t go nuts with shapes - keep it square
Don’t stretch
Don’t use it as a photo frame
Don’t use multiple colors
Don’t apply special effects
DESIGN
LOGOTYPE
DESIGN
LOGOTYPE
Logotype This is Fithabits logotype. Take it or leave it.
FITHABITS BRAND GUIDELINES
LOGOTYPE
37
DESIGN
LOGOTYPE
LOGOTYPE DESIGN
38
Logotype Design To make sure the logotype works properly, check distance between logotype elements and ratios to be kept in all applications. Z
3X
X
2,5X
Z
FITHABITS BRAND GUIDELINES
DESIGN
LOGOTYPE
LOGOTYPE KERNING
39
Logotype Kerning To achieve visual cohesion and optical correctness, we’ve made some custom kerning on the logotype typography. And it should be preserved in all cases.
Custom Kerning
FITHABITS BRAND GUIDELINES
DESIGN
LOGOTYPE
Positive Negative
FITHABITS BRAND GUIDELINES
POSITIVE NEGATIVE
40
DESIGN
LOGOTYPE
CLEAR SPACE
41
Clear Space In all applications and in any case, the logotype should be surrounded by clear space as defined on the right.
X
X
FITHABITS BRAND GUIDELINES
DESIGN
LOGOTYPE
SIZES
42
Sizes These are the logotype’s minimum sizes allowed for web and print applications.
30 px
Web
FITHABITS BRAND GUIDELINES
7 mm
DESIGN
LOGOTYPE
Alignment Arangement Here are some guides on how to place the logotype in space and several types of layouts to be used in applications.
FITHABITS BRAND GUIDELINES
ALIGNMENT ARANGEMENT
43
DESIGN
LOGOTYPE
COLOR COMBINATIONS
44
Color Combinations This is the only color combination to be applied on the logotype in several applications. It’s the only one to be used, so make sure you get it right! For the exact color palette, see page 46 ;)
TEAL
LIGHT OR WHITE
INDIGO
FITHABITS BRAND GUIDELINES
DESIGN
LOGOTYPE
THINGS TO AVOID
45
Things To Avoid If you’re using our logotype and it looks anything like the examples on the right, abandon mission! All these cases should be avoided, no joke.
FITHABITS BRAND GUIDELINES
Don’t use colors of your choice Stick to the brand colors
Don’t rotate
Don’t shear
Don’t improvise on color combinations
No full-bleed
Don’t crop
Don’t outline
Don’t rearrange the logotype’s alignment
Don’t stretch
We said, don’t stretch
Don’t mix colors
Don’t apply special effects
DESIGN
COLOR
DESIGN
COLOR
PRIMARY COLORS
Primary Colors Let us introduce you to Fithabits primary colors; Light Grey, Indigo, Teal and Dark. The way you see them on the right stands for their proportion in all uses. Advise this palette on print and web applications and you’ll stay safe and consistent.
FITHABITS BRAND GUIDELINES
47
LIGHT
INDIGO
TEAL
DARK
RGB
RGB
RGB
RGB
249/249/249
48/79/254
29/233/182
58/58/58
CMYK
CMYK
CMYK
CMYK
00/00/00/05
100/35/00/00
50/00/45/00
00/00/00/80
PANTONE
PANTONE
PANTONE
PANTONE
11-0601 TPX
2728 Coated
3385 Coated
425 Coated
Bright White
2728 Uncoated
3385 Uncoated
426 Uncoated
BLACK
DESIGN
COLOR
UI COLORS
48
HEX #000000
UI Colors Being a mostly online service, we had to make a special study on our UI colors, the ones to be met throughout our digital presence. What we actually did is a color translation, if you wish, and you’re more than welcome to stick to it, always respecting the suggested quota. :)
DARK
INDIGO
TEAL
HEX #3A3A3A
HEX #304FFE
HEX #1DE9B6
PURPLE HEX #F612E9
LIGHT PURPLE HEX #FF5FF4
MEDIUM HEX #E6E6E6
FITHABITS BRAND GUIDELINES
LIGHT
WHITE
HEX #F9F9F9
HEX #FFFFFF
LIGHT INDIGO
LIGHT TEAL
HEX #3D5AFE
HEX #64FFDA
DARK INDIGO
DARK TEAL
HEX #3F51B5
HEX #009688
DESIGN
COLOR
GRADIENTS
49
Gradients We love gradients - you can tell. So, these are the suggested ones based on our basic color palette. TEAL 100%
WHITE 30%
INDIGO 100%
FITHABITS BRAND GUIDELINES
INDIGO 50%
TEAL 100%
PURPLE 40%
DESIGN
COLOR
COLOR COMBINATIONS
Color Combinations These are the color combinations which run our brand presence. Each time you choose one of them, make sure you keep to the suggested colors' quota.
TEAL
INDIGO
DARK
WHITE
FITHABITS BRAND GUIDELINES
50
DESIGN
COLOR
COLOR COMBINATIONS
Color Combinations These are the color combinations which run our brand presence. Each time you choose one of them, make sure you keep to the colors’ suggested quota.
GRADIENT 01
GRADIENT 02
GRADIENT 03
FITHABITS BRAND GUIDELINES
51
DESIGN
COLOR
THINGS TO AVOID
52
Things To Avoid
A
Color combinations and color arrangement have rules here. Avoid all the showing cases and everything will be fine.
FITHABITS BRAND GUIDELINES
Don’t use black / dark as background
Don’t use purple as background
Don’t use white as background
Don’t use gradient with different colors quota
Don’t use black/dark with gradient
Don’t use UI colors on print applications
Don’t use all colors together at once
Don’t use colors of your choice stick to the brand colors
Don’t use purple on text
Don’t apply effects / filters on colors
DESIGN
TYPOGRAPHY
DESIGN
TYPOGRAPHY
Brand Typeface Brand’s official typeface for both English and Greek language is Averta, a sans-serif font with geometric rounds, open apertures, and low contrast strokes that transmit an unmoderated, straightforward character, resulting in a friendly typeface, designed by Kostas Bartsokas.
FITHABITS BRAND GUIDELINES
BRAND TYPEFACE
54
Averta Sans-Serif English
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
Greek
ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ αβγδεχηθικλμνξοπρστυφχψω
Numbers
1234567890➀➁➂➃➄➅➆➇➈
Symbols
!@=#$%^&*()_+{}¨”<>?΄[]€’,./-«»±
DESIGN
TYPOGRAPHY
TYPOGRAPHY ΗIERARCHY
55
Typography Ηierarchy Everything we say or write has its own importance, and thus gravity in the context of content, which is imprinted on our typography and the specific typeface weights that are applied.
Headlines Averta Extra-Bold
Sub-Headlines Averta Bold
Body-Copy Averta Regular
FITHABITS BRAND GUIDELINES
Κλείσε Pilates όσο γρήγορα παραγγέλνεις pizza Βρες την ιδανική δραστηριότητα. Κλείσε στην στιγμή. Με παραπάνω από 1700 δραστηριότητες διαθέσιμες, θα βρεις την ιδανική για εσένα, δίπλα σου. Τόσο απλά.
DESIGN
TYPOGRAPHY
TYPOGRAPHY SCALE RATE
56
Typography Scale Rate Our typography also lies under a specific scale rate that allows its minimum and maximum points, guaranteeing a visual harmony.
12pt
Fithabits Brand Guidelines
14pt
Fithabits Brand Guidelines
20pt
Fithabits Brand Guidelines
24pt
Fithabits Brand Guidelines
32pt
Fithabits Brand Guidelines
64pt
FITHABITS BRAND GUIDELINES
Fithabits Brand Guidelines
DESIGN
TYPOGRAPHY
TYPOGRAPHY SCALE RATE
57
Typography Scale Rate
Headline X - 64pt
Κλείσε Pilates όσο γρήγορα παραγγέλνεις pizza
Sub-Headline X/2 - 32pt
Όποτε θες! Χωρίς συνδρομές.
A specific scale rate, or at least a respected relation, is suggested for each content level as defined on the Typography Hierarchy sub-chapter (see page 55).
Body-Copy X/3 - 20pt
Ήταν πολύ εύκολο να παραγγείλεις φαγητό και πολύ δύσκολο να κλείσεις δραστηριότητες. Όχι πια. Τι περιμένεις;
FITHABITS BRAND GUIDELINES
DESIGN
TYPOGRAPHY
ALIGNMENT ARRANGEMENT
58
Left Alignment
Alignment Arrangement
Κλείσε Pilates όσο γρήγορα παραγγέλνεις pizza
Content must always be aligned on the left of the respective page or layout.
X X
Left Alignment
Κλείσε Pilates όσο γρήγορα παραγγέλνεις pizza
Όποτε θες! Χωρίς συνδρομές. Ήταν πολύ εύκολο να παραγγείλεις φαγητό και πολύ δύσκολο να κλείσεις δραστηριότητες. Όχι πια. Τι περιμένεις;
X
Left Alignment
X Ξέρουμε τους λόγους που δεν τα καταφέρνεις γιατί έχουμε αποτύχει και εμείς. Ξέρουμε πως το πάπλωμα είναι βαρύ το χειμώνα, η ζέστη εξαντλητική το καλοκαίρι και η άνοιξη κρατάει με το ζόρι 10 μέρες. Πως είσαι όλη μέρα στο πόδι και πως ο αποχωρισμός του καναπέ είναι δύσκολος. Πως είναι ευκολότερο το continue watching από μια ώρα τρέξιμο και πως πίτσες και σουβλάκια είναι ένα κλικ μακριά από το τραπεζάκι του σαλονιού σου.
X X
FITHABITS BRAND GUIDELINES
X
Body Column: Width: 500px / 175mm
DESIGN
TYPOGRAPHY
Typesetting Leading These are the distances to be kept between lines.
TYPESETTING LEADING
Headline Print: 110% / Web: 150% - 160%
Κλείσε Pilates όσο γρήγορα παραγγέλνεις pizza Body-Copy Print: 110% / Web: 150% - 160%
Ήταν πολύ εύκολο να παραγγείλεις φαγητό και πολύ δύσκολο να κλείσεις δραστηριότητες. Όχι πια.
FITHABITS BRAND GUIDELINES
59
Sub-Headline Print: 110% / Web: 150% - 160%
Όποτε θες! Χωρίς συνδρομές. Πέτυχε τους fitness στόχους σου. Όλους τους. Βρες την ιδανική δραστηριότητα. Κλείσε στην στιγμή.
DESIGN
TYPOGRAPHY
Typesetting Kerning These are the distances to be kept between characters.
FITHABITS BRAND GUIDELINES
TYPESETTING KERNING
Headline Metric Kerning / Tracking: +10
Κλείσε Pilates όσο γρήγορα παραγγέλνεις pizza
60
Sub-Headline Metric Kerning / Tracking: +10
Όποτε θες! Χωρίς συνδρομές. Πέτυχε τους fitness στόχους σου. Όλους τους.
Body-Copy Metric Kerning / Tracking: +10
Ήταν πολύ εύκολο να παραγγείλεις φαγητό και πολύ δύσκολο να κλείσεις δραστηριότητες. Όχι πια.
DESIGN
TYPOGRAPHY
Color Combinations
COLOR COMBINATIONS
61
Forget Mondays. Start today. Color Options on Light
When it comes to typography, these - and only these - color combinations for texts and background are allowed, in order to guarantee the content’s clarity, and thus legibility.
Dark
Forget Mondays. Start today. Forget Mondays. Start today. Color Options on White
Medium / Dark
Forget Mondays. Start today. Forget Mondays. Start today. Forget Mondays. Start today. Color Options on Teal
White / Indigo / Dark
Forget Mondays. Start today. Forget Mondays. Start today. Color Options on Indigo
FITHABITS BRAND GUIDELINES
White / Teal
DESIGN
TYPOGRAPHY
UI Typeface Web / MacOS In all digital applications, our content borrows the typeface suggested by the software in use. For MacOS devices, our platform’s web version appears in Helvetica typeface.
UI TYPEFACE
WEB / MACOS
62
Helvetica MEDIUM
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
AaBbCc123 MEDIUM
Fancy an adventurous hike, a memorable dive in Greek waters or a thrilling parachuting experience? Looking for new, extreme sports for you and your friends?
AaBbCc123 BOLD
Fancy an adventurous hike, a memorable dive in Greek waters or a thrilling parachuting experience? Looking for new, extreme sports for you and your friends?
ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ αβγδεχηθικλμνξοπρστυφχψω 1234567890!@#$%^&*()_+{}”:?<>
BOLD
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ αβγδεχηθικλμνξοπρστυφχψω 1234567890!@#$%^&*()_+{}”:?<>
FITHABITS BRAND GUIDELINES
DESIGN
TYPOGRAPHY
UI Typeface Web / Windows In all digital applications, our content borrows the typeface suggested by the software in use. For Windows devices, our platform’s web version appears in Arial typeface.
UI TYPEFACE
WEB / WINDOWS
63
Arial BOLD
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
AaBbCc123 BOLD
Fancy an adventurous hike, a memorable dive in Greek waters or a thrilling parachuting experience? Looking for new, extreme sports for you and your friends?
AaBbCc123 BLACK
Fancy an adventurous hike, a memorable dive in Greek waters or a thrilling parachuting experience? Looking for new, extreme sports for you and your friends?
ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ αβγδεχηθικλμνξοπρστυφχψω 1234567890!@#$%^&*()_+{}”:?<>
BLACK
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ αβγδεχηθικλμνξοπρστυφχψω 1234567890!@#$%^&*()_+{}”:?<>
FITHABITS BRAND GUIDELINES
DESIGN
TYPOGRAPHY
UI Typeface App / iOS In all digital applications, our content borrows the typeface suggested by the software in use. For iOS devices, our application content appears in San Francisco typeface.
UI TYPEFACE
APP / IOS
64
San Fransisco SEMIBOLD
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
AaBbCc123 SEMIBOLD
Fancy an adventurous hike, a memorable dive in Greek waters or a thrilling parachuting experience? Looking for new, extreme sports for you and your friends?
AaBbCc123 HEAVY
Fancy an adventurous hike, a memorable dive in Greek waters or a thrilling parachuting experience? Looking for new, extreme sports for you and your friends?
ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ αβγδεχηθικλμνξοπρστυφχψω 1234567890!@#$%^&*()_+{}”:?<>
HEAVY
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ αβγδεχηθικλμνξοπρστυφχψω 1234567890!@#$%^&*()_+{}”:?<>
FITHABITS BRAND GUIDELINES
DESIGN
TYPOGRAPHY
UI Typeface App / Android In all digital applications, our content borrows the typeface suggested by the software in use. For Android devices, our application content appears in Roboto typeface.
UI TYPEFACE
APP / ANDROID
65
Roboto MEDIUM
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz
AaBbCc123 MEDIUM
Fancy an adventurous hike, a memorable dive in Greek waters or a thrilling parachuting experience? Looking for new, extreme sports for you and your friends?
AaBbCc123 BLACK
Fancy an adventurous hike, a memorable dive in Greek waters or a thrilling parachuting experience? Looking for new, extreme sports for you and your friends?
ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ αβγδεχηθικλμνξοπρστυφχψω 1234567890!@#$%^&*()_+{}”:?<>
BLACK
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩ αβγδεχηθικλμνξοπρστυφχψω 1234567890!@#$%^&*()_+{}”:?<>
FITHABITS BRAND GUIDELINES
DESIGN
IMAGERY
DESIGN
IMAGERY
IMAGERY
Imagery Imagery accompanying our informational and promotional material has no place for fake people, stiff smiles or unrealistic body standards. Images used could be taken from your phone, yet always be aware of their high quality and clarity. Special tip; focus on close-ups and details and try to capture each activity’s tension. So, say no to stock photos, embrace realistic day-to-day practice conditions, highlight human body’s dynamics and you’ll always be in context.
FITHABITS BRAND GUIDELINES
67
DESIGN
IMAGERY
LOGOMARK ON IMAGES
Logomark on images On images and photos, logomark can only appear as an icon, in light color and indigo or teal background, as indicated in the Logomark chapter (go back to page 31).
FITHABITS BRAND GUIDELINES
â&#x20AC;&#x201A;68
DESIGN
IMAGERY
FILTERS
Filters Filters used on the images shall be warm, offering a great balance to the whole brand look and feel and guidelines, as gathered so far.
FITHABITS BRAND GUIDELINES
â&#x20AC;&#x201A;69
DESIGN
IMAGERY
GUIDES
70
Guides If you’re not sure an image fits the Fithabits spirit, here are some indicative guides to help you out with stock or original imagery selection.
FITHABITS BRAND GUIDELINES
Composition of different imagery elements “Ideal” or “struggling” body representations
Clean and minimal layout Realistic features of elements depicted
Intense & undue visual effects Fake imagery setting / environment
Clear details through close-up shots Actual & lively environments
DESIGN
IMAGERY
GUIDES
â&#x20AC;&#x201A;71
Guides If youâ&#x20AC;&#x2122;re not sure an image fits the Fithabits spirit, here are some indicative guides to help you out with stock or original imagery selection.
FITHABITS BRAND GUIDELINES
Forced or fake facial expressions Isolated faces, figures or items
Imperfect yet realistic representations Close-up details
Cold or impassive feeling Flawless places & setups
Emotion & intensity Used equipment & human, lived-in sites
DESIGN
IMAGERY
Feeling So, we’re not looking for a sterile scenery here - through warm filters, we go for heat, passion, adrenaline and powerful senses. Strong and warm feeling that will immerse users to the Fithabits experience.
FITHABITS BRAND GUIDELINES
FEELING
72
DESIGN
DIGITAL
DESIGN
DIGITAL
WEBSITE
Website User-friendly, fun, light, easy, clear; that’s the mood of our website, based on a light, clear background, present and characteristic for all pages throughout user’s navigation. Following all the guidelines given in previous chapters, from logomark alignment to typography hierarchy and color combinations, our website’s landing page tends to aspire a friendly, casual essence, while being clean and cushy.
FITHABITS BRAND GUIDELINES
74
DESIGN
DIGITAL
WEBSITE
LANDING PAGE
â&#x20AC;&#x201A;75
Website Landing Page
Logo
Basic Message
Menu & Login
Visiting fithabits.gr for the very first time? A colourful and illustrated, yet clean and easy, landing page is there to welcome you. Basic slogan, motivational content and a direct call to action will shortly get you in the fitness game.
Cookies Alert
Light Mood
Illustration
FITHABITS BRAND GUIDELINES
DESIGN
DIGITAL
WEBSITE
USER HOME
â&#x20AC;&#x201A;76
Website User Home
Logo
Search Trigger
User Menu
Since youâ&#x20AC;&#x2122;re a signed-in user, this is the page you get. Keeping to all the principles for a clean and user-friendly interface, the user homepage shall show all the options a user keeps in their hands, from activities discovery and class booking to blog exploration, personal notifications and favorites.
Personalized Activity Suggestion
Personalized Content Suggestion
FITHABITS BRAND GUIDELINES
DESIGN
DIGITAL
WEBSITE
DISCOVER PAGE
â&#x20AC;&#x201A;77
Website Discover Page
Logo
User Menu
Search Sub-Menu
On the Discover page, the user must be kept focused on the results showing, while being able to filter and customize them according to their needs. User has control of the search, while being able to extract the most important information from the short activity / studio profile overview.
Search Filters
Search Results
FITHABITS BRAND GUIDELINES
Map
DESIGN
DIGITAL
WEBSITE
RESPONSIVE DESIGN
78
Website Responsive Design All website pages perfectly respond to both desktop and mobile versions, in all dimensions and screen resolutions available. The most vital asset of our website’s responsive design is header section’s shift from top to bottom, in order to be promptly accessible to the user’s resting thumbs.
Desktop
FITHABITS BRAND GUIDELINES
Mobile
DESIGN
DIGITAL
APPLICATION
79
Application User onboarding to Fithabits App is especially taken care of by our favorite Fithabits Squad, showcasing app’s starring features.
Animated Feeling
Light Mood
FITHABITS BRAND GUIDELINES
DESIGN
DIGITAL
APPLICATION
BASIC SCREENS
80
Application Basic Screens Home, Profile, Discover and Ticket are Fithabits App’s main screens in white, clean background to serve user’s easy and smooth navigation.
Home
FITHABITS BRAND GUIDELINES
Profile
Discover
Ticket
DESIGN
DIGITAL
APPLICATION
8PT SYSTEM GRID
â&#x20AC;&#x201A;81
Application 8pt System Grid Fithabits App is designed based on the 8-point grid system guaranteeing consistency in spaces and information architecture.
24pt
8pt 24pt
16pt
24pt 24pt
FITHABITS BRAND GUIDELINES
DESIGN
DIGITAL
SOCIAL MEDIA
Social Media Facebook Page Facebook page’s assets should always be aligned with brand guidelines summarized in all previous chapters. Since you follow all the precedent rules, our Facebook page remains consistent, clean and fabulous.
FITHABITS BRAND GUIDELINES
FACEBOOK PAGE
82
DESIGN
DIGITAL
SOCIAL MEDIA
Social Media Instagram Profile Instagram profile’s assets should always be aligned with brand guidelines summarized in all previous chapters. Since you follow all the precedent rules, our Instagram page remains consistent, clean and fabulous, with custom icons to guide our followers through our rich stories collection.
FITHABITS BRAND GUIDELINES
INSTAGRAM PROFILE
83
DESIGN
DIGITAL
SOCIAL MEDIA
Social Media General Share Image Facebook main share image is made up of colorful activity icons, highlighting the plurality and diversity of activities to be found across our platform. In marketing terms, variety and diversity in our share image is always welcome to support our dynamic as a marketplace full of fun fitness activities.
FITHABITS BRAND GUIDELINES
GENERAL SHARE IMAGE
â&#x20AC;&#x201A;84
DESIGN
DIGITAL
SOCIAL MEDIA
Social Media Square Posts Here are some examples of square posts, all following brand guidelines and feeling dictations as described in previous chapters.
FITHABITS BRAND GUIDELINES
SQUARE POSTS
â&#x20AC;&#x201A;85
DESIGN
DIGITAL
SOCIAL MEDIA
Social Media Stories Here are some examples of stories, all following brand guidelines and feeling dictations as described in previous chapters.
FITHABITS BRAND GUIDELINES
STORIES
â&#x20AC;&#x201A;86
DESIGN
ICONOGRAPHY
DESIGN
ICONOGRAPHY
System Icons Monocolor Fill System icons serve application’s appropriate use by being minimal, yet descriptive, in order to be guiding in all cases. System icons are used in monocolor fill, designed based on a solid grid system as shown next.
FITHABITS BRAND GUIDELINES
SYSTEM ICONS
MONOCOLOR FILL
Bullets
Calendar
Comment
88
Delete
Edit
Eye
Flag
Lock
Select
Settings
Share
Star
DESIGN
ICONOGRAPHY
System Icons Monocolor Fill / Grid System For monocolor filled system icons, we 've followed the showing grid system.
FITHABITS BRAND GUIDELINES
SYSTEM ICONS
MONOCOLOR FILL / GRID SYSTEM
â&#x20AC;&#x201A;89
DESIGN
ICONOGRAPHY
SYSTEM ICONS
MONOCOLOR FILL / SPACING / SIZE
â&#x20AC;&#x201A;90
System Icons Monocolor Fill / Spacing / Size For monocolor filled system icons, use the following clear space and size guidelines.
x 2x
24 px
FITHABITS BRAND GUIDELINES
DESIGN
ICONOGRAPHY
System Icons Monocolor Line 1/2 System icons are also met in monocolor lines, designed based on a solid grid system as shown next.
FITHABITS BRAND GUIDELINES
SYSTEM ICONS
MONOCOLOR LINE 1/2
Add
Arrow Down
â&#x20AC;&#x201A;91
Arrow Left
Arrow Right Arrow Right 2
Check
Close
Contact
Download
Favorite
DESIGN
ICONOGRAPHY
System Icons Monocolor Line 2/2 System icons are also met in monocolor lines, designed based on a solid grid system as shown next.
FITHABITS BRAND GUIDELINES
SYSTEM ICONS
MONOCOLOR LINE 2/2
â&#x20AC;&#x201A;92
Filters
Log-out
Qr
Save
Search
Subscribe
Target
DESIGN
ICONOGRAPHY
System Icons Monocolor Line / Grid System For monocolor line system icons, we 've followed the showing grid system.
FITHABITS BRAND GUIDELINES
SYSTEM ICONS
MONOCOLOR LINE / GRID SYSTEM
â&#x20AC;&#x201A;93
DESIGN
ICONOGRAPHY
SYSTEM ICONS
MONOCOLOR LINE / SPACING / SIZE
â&#x20AC;&#x201A;94
System Icons Monocolor Line / Spacing / Size For monocolor line system icons, use the following clear space and size guidelines.
24 px
x 2x
FITHABITS BRAND GUIDELINES
DESIGN
ICONOGRAPHY
System Icons Circled Icons System icons are also met in circled format, designed based on a solid grid system as shown next.
FITHABITS BRAND GUIDELINES
SYSTEM ICONS
CIRCLED ICONS
95
Check
Time
Close
Αdd
DESIGN
ICONOGRAPHY
Navbar Icons Navbar icons are shown on the bottom of the app to help user navigate themselves through the 5 main screens; Home, Discover, Favorites, Notifications and Profile.
FITHABITS BRAND GUIDELINES
NAVBAR ICONS
â&#x20AC;&#x201A;96
Home
Discover
Favorite
Notifications
Profile Female
Profile Male
DESIGN
ICONOGRAPHY
NAVBAR ICONS
/ GRID SYSTEM / SPACING / SIZE
â&#x20AC;&#x201A;97
Navbar Icons / Grid System / Spacing / Size For navbar icons, use the following clear space and size guidelines.
x 2x
24 px
FITHABITS BRAND GUIDELINES
DESIGN
ICONOGRAPHY
Notification Icons Notification icons are used to accompany content notifying user about their in-app activity in a pictorial, yet plain and friendly way, for each type of user notifications.
FITHABITS BRAND GUIDELINES
NOTIFICATION ICONS
â&#x20AC;&#x201A;98
Blog
Cancel
Comment
Confirm
Event
Rating
Play
Target
DESIGN
ICONOGRAPHY
NOTIFICATION ICONS
/ GRID SYSTEM / SPACING / SIZE
â&#x20AC;&#x201A;99
Notification Icons / Grid System / Spacing / Size For notification icons, use the following clear space and size guidelines.
x 2x
48 px
FITHABITS BRAND GUIDELINES
DESIGN
ICONOGRAPHY
Dashboard Icons Dashboard icons follow a more descriptive, colorful and illustrated approach to help user smoothly and easily flow through their profile options and settings.
FITHABITS BRAND GUIDELINES
DASHBOARD ICONS
â&#x20AC;&#x201A;100
Activities
Blog
Bookings
Content
Dashboard
Finance
Flags
Gyms
Like
Notifications
Program
Ratings
Reports
Roles
Safe
Setting
Smile
Target
Tick
Trainers
Payments
DESIGN
ICONOGRAPHY
Dashboard Icons Grid System For dashboard icons, we've followed the showing grid system.
FITHABITS BRAND GUIDELINES
DASHBOARD ICONS
â&#x20AC;&#x201A;101
DESIGN
ICONOGRAPHY
DASHBOARD ICONS
/ SPACING / SIZE
â&#x20AC;&#x201A;102
Dashboard Icons / Spacing / Size For dashboard icons, use the following clear space and size guidelines.
x 2x
32 px
FITHABITS BRAND GUIDELINES
DESIGN
ICONOGRAPHY
Emoticons
EMOTICONS
â&#x20AC;&#x201A;103
Angry
Astonished
Disappointed
Frowning
Gift
Heart-Eyes
Tongue
Worried
To achieve a consistent and wholesome feeling during navigation, custom emoticons are used to accompany different scenarios the user bumps into.
FITHABITS BRAND GUIDELINES
DESIGN
ICONOGRAPHY
Emoticons Grid System For emoticons, we've followed the showing grid system.
FITHABITS BRAND GUIDELINES
EMOTICONS
GRID SYSTEM
â&#x20AC;&#x201A;104
DESIGN
ICONOGRAPHY
EMOTICONS
/ SIZE / SPACING
â&#x20AC;&#x201A;105
Emoticons / Size / Spacing For emoticons, use the following clear space and size guidelines.
48 px
x x
FITHABITS BRAND GUIDELINES
DESIGN
ICONOGRAPHY
Activities Icons
ACTIVITIES ICONS
â&#x20AC;&#x201A;106
Cardio
Sports
Extreme Sports
Functional
Dance
Martial
Mountain
Outdoor
Pilates
Spinning
Water Sports
Yoga
General Badge
Ratings Badge
Multi Badge
Activities icons represent each activity category and aim at creating a colorful, vivid and motivational essence about each one of them in a unique pictorial way.
FITHABITS BRAND GUIDELINES
DESIGN
ICONOGRAPHY
Activities Icons Grid System For activities icons, use the following clear space and size guidelines.
FITHABITS BRAND GUIDELINES
ACTIVITIES ICONS
GRID SYSTEM
â&#x20AC;&#x201A;107
DESIGN
ICONOGRAPHY
ACTIVITIES ICONS
/ SIZE / SPACING
â&#x20AC;&#x201A;108
Activities Icons / Size / Spacing For activities icons, the following clear space guidelines have been followed, along with the size to be used.
48 px
x x
FITHABITS BRAND GUIDELINES
DESIGN
ICONOGRAPHY
Map Icons
MAP ICONS
â&#x20AC;&#x201A;109
Map Pin
By Bike
By Car
Walking
up to 5 km
up to 10 km
up to 2 km
Brand feeling consistency also applies in maps and distance filters, where pins and options are represented by custom-designed icons.
FITHABITS BRAND GUIDELINES
DESIGN
ICONOGRAPHY
MAP ICONS
/ GRID SYSTEM / SPACING / SIZE
â&#x20AC;&#x201A;110
Map Icons / Grid System / Spacing / Size For map icons, use the following clear space and size guidelines.
48 px
x x
FITHABITS BRAND GUIDELINES
DESIGN
ILLUSTRATION
DESIGN
ILLUSTRATION
ILLUSTRATION CHARACTER
â&#x20AC;&#x201A;112
Illustration Character Our illustrated hosts and hostesses are always up to welcome, guide and motivate users to hop in the Fithabits game. However, they also do follow rules in their appearance, poses and attitude, which we gather and analyze in this very chapter.
Mr Fithabits
FITHABITS BRAND GUIDELINES
DESIGN
ILLUSTRATION
ILLUSTRATION CHARACTER
ANATOMY
113
Illustration Character c
Anatomy
d
e
f
It’s all about golden ratio a Extremely long legs b Distinctive dress code c Exaggerating hands d Big-shoe-size feet e No face f Funnily tiny palms A Head B Clear space C Main body D Legs E Feet
A B
C b
a
D
E
FITHABITS BRAND GUIDELINES
DESIGN
ILLUSTRATION
COLOR PALETTE
BLACK
PURPLE
INDIGO
TEAL
HEX #000000
HEX #d11ae3
HEX #3965dd
HEX #1ce8b5
Color Palette This is the color palette that dresses our beloved characters. Always respect the suggested colors quota! ;)
FITHABITS BRAND GUIDELINES
LIGHT
DARK
HEX #f9f9f9
HEX #595958
â&#x20AC;&#x201A;114
DESIGN
ILLUSTRATION
ILLUSTRATION CHARACTER
COLOR COMBINATIONS
â&#x20AC;&#x201A;115
Illustration Character Color Combinations Our characters follow their own fashion code; black sleeveless athletic shirt is their characteristic feature, while indigo and teal colors apply on their body combined with purple details.
Indigo
Purple Detail
FITHABITS BRAND GUIDELINES
Indigo & Teal
Always Black
Teal
DESIGN
ILLUSTRATION
COLORING TECHNIQUES
â&#x20AC;&#x201A;116
Coloring Techniques Three main coloring techniques are applied on our illustration characters; flat, gradient and dot-textured.
Flat Vector
FITHABITS BRAND GUIDELINES
Vector Gradient
Dot Texture
DESIGN
ILLUSTRATION
Applications Website Landing Page
FITHABITS BRAND GUIDELINES
APPLICATIONS
WEBSITE LANDING PAGE
â&#x20AC;&#x201A;117
DESIGN
ILLUSTRATION
Applications Top Activities
FITHABITS BRAND GUIDELINES
APPLICATIONS
TOP ACTIVITIES
â&#x20AC;&#x201A;118
DESIGN
ILLUSTRATION
Applications Outdoor Activities
FITHABITS BRAND GUIDELINES
APPLICATIONS
OUTDOOR ACTIVITIES
â&#x20AC;&#x201A;119
DESIGN
ILLUSTRATION
Applications Mobile App Animated Illustrations
FITHABITS BRAND GUIDELINES
APPLICATIONS
MOBILE APP ANIMATED ILLUSTRATIONS
â&#x20AC;&#x201A;120
DESIGN
ILLUSTRATION
THINGS TO AVOID
121
Things To Avoid If you’re using our dearest characters and they look anything like the examples on the right, abandon mission! Don’t use in purple
Don’t use in dark background
Don’t improvise on color combinations
Don’t use non-brand colors
Don’t go monocolor
Don’t shear
Don’t stretch
Don’t outline
Don’t change ratio
Don’t add facial characteristics
Don’t apply special effects
Don’t crop
No full-bleed
Don’t use sexist / harassing representations
All these cases should be avoided, no joke.
FITHABITS BRAND GUIDELINES
APPLICATIONS
APPLICATIONS
DIGITAL
APPLICATIONS
DIGITAL
FITHABITS BRAND GUIDELINES
â&#x20AC;&#x201A;125
APPLICATIONS
DIGITAL
20% OFF
FITHABITS BRAND GUIDELINES
â&#x20AC;&#x201A;126
APPLICATIONS
DIGITAL
FITHABITS BRAND GUIDELINES
â&#x20AC;&#x201A;127
APPLICATIONS
DIGITAL
FITHABITS BRAND GUIDELINES
â&#x20AC;&#x201A;128
APPLICATIONS
DIGITAL
FITHABITS BRAND GUIDELINES
â&#x20AC;&#x201A;129
APPLICATIONS
DIGITAL
FITHABITS BRAND GUIDELINES
â&#x20AC;&#x201A;130
APPLICATIONS
APPLICATIONS
FITHABITS BRAND GUIDELINES
â&#x20AC;&#x201A;132
APPLICATIONS
FITHABITS BRAND GUIDELINES
â&#x20AC;&#x201A;133
APPLICATIONS
FITHABITS BRAND GUIDELINES
â&#x20AC;&#x201A;134
APPLICATIONS
FITHABITS BRAND GUIDELINES
â&#x20AC;&#x201A;135
CONTACT
fithabits.gr Got questions? Drop us a line. Fithabits Team info@fithabits.gr
Made with love by