BRANDBOOK
MÁRTON SEBESTYÉN - CEO
Table of contents Logos
5
Color & Patterns
23
Typography
29
UI Kit
39
Websites & Applications
47
Infographics & illustrations
55
Offline contets
63
4
Logos Construction and white space are very important parts of designing a mark. Such as the cohesion between the main visual and sub-brand elements.
5
CONSTRUCTION OF LOGOTYPE
6
CONSTRUCTION OF THE LIGATURE SYMBOL
7
FINAL LOGO LIGHT HORIZONTAL VERSION
8
RATIO OF THE HORIZONTAL STRUCTURED LOGO
9
VERTICAL LOGO WHITE SAFE AREA
min spacing
The spacing of the vertical logo’s safe area is conscturted of half the ligature symbol
10
RATIO OF THE VERTICAL STRUCTURED LOGO
4
4
2
2
2 1 1 4
4
4
11
FINAL LOGO LIGHT HORIZONTAL VERSION
12
RATIO OF THE HORIZONTAL STRUCTURED LOGO
13
HORIZONTAL LOGO WHITE SAFE AREA
safe area
14
RATIO OF THE HORIZONTAL STRUCTURED LOGO
1 1 1 1 1
15
LOGO USING REQUIREMENTS
DO NOT CHANGE THE DEFINED COLORS
DO NOT USE ANY OTHER TYPEFACES
Online Capital DO NOT MODIFY THE RATIO
16
OC
LOGO USING REQUIREMENTS
DO NOT VIEW WITHOUT ALL DETAILS
DO NOT USE WITHOUT THE PRESCRIBED PADDINGS
DO USE OVER TOO FASCINATING PATTERNS OR BACKGROUNDS
17
EMBLEM
18
ICONS
256 px
128 px
64 px
32 px
19
PRODUCT LOGOS
20
G oogl e Ad s
Fa ce b oo k Ad s Go o g le Ads
Google Analytics Fa ce b ook Ad s
Market & Business
Google Analytics 21
LOGOS FOR SUB BRAND
22
powered by
powered by
powered by 23
24
Colors & patterns A good identity works without colors, but with a colorful pattern the visual will be more powerful. Innovation, precision and elegance. These benefits were the goals what the color selection shows now.
25
MAIN BACKGROUND
26
SECONDARY BACKGROUND
27
MAIN COLORS
000050
00B1FF
000050
000000
28
SECONDARY COLORS:
06D007 00D77E 06BB6D
路 Call To Actions 路 Chart colors 路 Illustrations 路 UI colors
000000 FF4739 B50238 000000 FFAF00 5537D9
29
T
T
T
T
T
T
T
T
T
T
T
T
T 30
T
T T
Typography Recognition of an identity meanwhile reading a text is the essence of every content what the company wants to show.
31
PARAGRAPH IN FRAME
40px 40px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum rutrum laoreet. Cras ante nibh, imperdiet at hendrerit id, tempor vel ligula. Mauris placerat lobortis facilisis. Nam dapibus, eros nec porta volutpat, sem diam elementum dolor, quis posuere odio felis ultrices diam. Nunc sapien ante, mattis vitae feugiat id, dictum vitae ex. Proin facilisis ipsum et magna commodo, id sodales orci lacinia. Fusce lacus ex, porta quis orci tempus, tempus elementum lectus. Text highlighting. Duis tempor nulla eget ex egestas, eu egestas erat rhoncus. Vivamus vulputate nunc et venenatis aliquam. Aenean luctus lobortis pellentesque. Nunc ac lobortis nisl. Praesent id feugiat diam. Ut vulputate blandit hendrerit. Ut in condimentum enim. Curabitur porta ex a nisl euismod ultricies. Vivamus odio magna, gravida nec urna nec, consectetur suscipit metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer congue felis id euismod iaculis. Donec vel egestas nisl, nec semper lorem. Phasellus lobortis fringilla viverra. Nam convallis consectetur ante eu varius. Nunc pretium id magna nec auctor. Praesent ornare placerat ex, non aliquet sem. Maecenas lacinia massa ac aliquet volutpat. Vivamus metus nibh, commodo eget lorem at, mattis ultricies nulla. Sed vestibulum, ex convallis molestie vestibulum, nibh ligula cursus metus, convallis mollis purus nisi vitae augue. Donec quis porttitor ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ultricies, tortor non finibus pharetra, nibh libero eleifend massa, vitae luctus dui tortor id nibh. Nulla eget cursus lacus. Fusce ac posuere urna, nec volutpat velit. Sed sit amet quam ullamcorper dolor bibendum vulputate. 40px
32
dropshadow
40px
PARAGRAPH
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum rutrum laoreet. Cras ante nibh, imperdiet at hendrerit id, tempor vel ligula. Mauris placerat lobortis facilisis. Nam dapibus, eros nec porta volutpat, sem diam elementum dolor, quis posuere odio felis ultrices diam. Nunc sapien ante, mattis vitae feugiat id, dictum vitae ex. Proin facilisis ipsum et magna commodo, id sodales orci lacinia. Fusce lacus ex, porta quis orci tempus, tempus elementum lectus. Text highlighting. Duis tempor nulla eget ex egestas, eu egestas erat rhoncus. Vivamus vulputate nunc et venenatis aliquam. Aenean luctus lobortis pellentesque. Nunc ac lobortis nisl. Praesent id feugiat diam. Ut vulputate blandit hendrerit. Ut in condimentum enim. Curabitur porta ex a nisl euismod ultricies. Vivamus odio magna, gravida nec urna nec, consectetur suscipit metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer congue felis id euismod iaculis. Donec vel egestas nisl, nec semper lorem. Phasellus lobortis fringilla viverra. Nam convallis consectetur ante eu varius. Nunc pretium id magna nec auctor. Praesent ornare placerat ex, non aliquet sem. Maecenas lacinia massa ac aliquet volutpat. Vivamus metus nibh, commodo eget lorem at, mattis ultricies nulla. Sed vestibulum, ex convallis molestie vestibulum, nibh ligula cursus metus, convallis mollis purus nisi vitae augue. Donec quis porttitor ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ultricies, tortor non finibus pharetra, nibh libero eleifend massa, vitae luctus dui tortor id nibh. Nulla eget cursus lacus. Fusce ac posuere urna, nec volutpat velit. Sed sit amet quam ullamcorper dolor bibendum vulputate. Curabitur in nisl vel velit imperdiet elementum. Etiam eget congue metus. Donec arcu dui, facilisis et finibus vel, molestie vel ante. Nunc sed hendrerit sem. In tincidunt tellus ac mi vehicula suscipit. font-family: Titilium Web Regular fontsize: 18 pt (print 11 pt) font-color: #000000 text-align: left line-height: 22 pt (print 14 pt)
33 33
TYPEFACES
SYNCOPATE USE THE BOLD UPPERCASE VERSION FOR HEADLINES
USE THE LIGHT VERSION FOR THE FLOWING TEXTS, AND THE BOLD FOR THE TEXT HIGHLIGHTS AND SUBHEADLINES. USE THE REGULAR VERSION FOR FUNTIONAL TEXTS, LIKE BUTTON TEXTS, LINKS AND OTHER INTERACTIVE ELEMENTS.
AÁBCDEÉFGHIÍJKLMNOÓ ÖŐPQRSTUÚÜŰVWXYZ 0123456789
Titilium Web Regular
Titilium Web Italic
AÁBCDEÉFGHIÍJKLMNOÓ ÖŐPQRSTUÚÜŰVWXYZ aábcdeéfghiíjklmnoó öőpqrstuúüűvwxyz 0123456789
AÁBCDEÉFGHIÍJKLMNOÓ ÖŐPQRSTUÚÜŰVWXYZ aábcdeéfghiíjklmnoó öőpqrstuúüűvwxyz 0123456789
Titilium Web Bold AÁBCDEÉFGHIÍJKLMNOÓ ÖŐPQRSTUÚÜŰVWXYZ aábcdeéfghiíjklmnoó öőpqrstuúüűvwxyz 0123456789 34
HEADING
HEADLINE 01 Headline 02
font-family: Syncopate Bold fontsize: 60 pt (print 48 pt) font-color: #ffffff text-align: center line-height: 50pt font-family: Titilium Web Bold fontsize: 36 pt (print 24 pt) font-color: #00050 (on dark background: #ffffff) line-height: 43pt (print 28 pt)
Headline 03
font-family: Titilium Web Bold fontsize: 30 pt (print 20 pt) font-color: #00b1ff (on dark background: #ffffff) line-height: 36 pt (print 24 pt)
Headline 04
font-family: Titilium Web Regular fontsize: 24 pt (print 18 pt) font-color: #000050 (on dark background: #ffffff) line-height: 28pt (print 22 pt)
BLOG POST TITLE
font-family: Syncopate Bold fontsize: 36 pt font-color: #ffffff text-align: center line-height: 36 pt
35
SLOGAN
THE MARKETING INVESTOR COMPANY
36
MAIN TITLES
BUILDING NUMBER ONES SHARING RISK & BOOSTING RESULTS PAY ON RESULTS PROGRAM 37
38
UI kit The properties of an interactive element has to define the identity. Animations in a living interface can also mirror the company’s philosophy.
39
INVALID RADIO BUTTONS / CHECKBOXES
Invalid
Checkbox 03 *A követkeő részt kötelező kitölteni
width: 20px height: 20px border-size: 1px border-radius: 2px border-color: #ff4739 margin-right: 20px
TEXT LISTS
Listed text
Bulletpoint 01 Subtext
font-family: Titilium Web Regular fontsize: 18px font-color: #ff4739
Bulletpoint 02 Subtext
font-family: Titilium Web Bold fontsize: 10 px font-color: #ff4739f text-align: left
Invalid
Radiobutton 03 *A követkeő részt kötelező kitölteni
width: 20px height: 20px border-size: 1px border-radius: 10px border-color: #ff4739 margin-right: 20px font-family: Titilium Web Regular fontsize: 18px font-color: #ff4739 font-family: Titilium Web Bold fontsize: 10 px font-color: #ff4739f text-align: left
40
Bulletpoint 02 Subtext
Numbered list 1
Bulletpoint 01 Subtext
2
Bulletpoint 02 Subtext
3
Bulletpoint 02 Subtext
width: 10px height: 10px border-size: 1px border-radius: 10px color: #00c379 border-color: #00c379 margin-right: 20px font-family: Titilium Web Bold/Regular fontsize: 18 px font-color: #ffffff padding-bottom: 20px
font-family: Titilium Web Bold fontsize: 14px font-color: #ffffff width: 20px height: 20px border-size: 1px border-radius: 10px color: #00c379 border-color: #00c379 margin-right: 20px font-family: Titilium Web Bold/Regular fontsize: 18 px font-color: #ffffff
FORM ELEMENTS
Default
Normal textbox
Normal textbox email@adress.com font-family: Titilium Web Italic fontsize: 18 px font-color: #7f7f7f text-align: left
Active
width: auto height: 40px border-size: 1px border-radius: 5px border-color: #00b1ff
email@adress.com width: auto height: 40px border-radius: 5px box-shadow:0 5px 15px 0 rgba(0,177,255,0.50) background-color: white
Filled
Normal textbox email@adress.com width: auto height: 40px border-size: 1px border-radius: 5px border-color: #00b1ff
font-family: Titilium Web Regular fontsize: 18 px font-color: #ffffff text-align: left
font-family: Titilium Web Bold fontsize: 18 px font-color: #ffffff padding-bottom: 20px
Invalid
Normal textbox email@adress.com *A követkeő részt kötelező kitölteni font-family: Titilium Web Italic fontsize: 18 px font-color: #ff4739 text-align: left
font-family: Titilium Web Regular fontsize: 18 px font-color: #ff4739 text-align: left
width: auto height: 40px border-size: 1px border-radius: 5px border-color: #ff4739 font-family: Titilium Web Bold fontsize: 10 px font-color: #ff4739f text-align: left
41
FORM ELEMENTS
Default
Drop down box
Drop down box Choose
Choose
font-family: Titilium Web Italic fontsize: 18 px font-color: #7f7f7f text-align: left
width: auto height: 40px border-size: 1px border-radius: 10px border-color: #00b1ff
font-family: Titilium Web Bold fontsize: 18 px font-color: #ffffff padding-bottom: 20px
Filled
Active
Drop down box Choose
Friday Saturday Sunday
width: auto height: 40px border-size: 1px border-radius: 10px border-color: #00b1ff
width: auto height: 40px border-size: 1px border-radius: 10px box-shadow:0 5px 15px 0 rgba(0,177,255,0.50); background-color: white;
font-family: Titilium Web Regular fontsize: 18 px font-color: #ffffff text-align: left
Invalid
Normal textbox email@adress.com *A követkeő részt kötelező kitölteni font-family: Titilium Web Italic fontsize: 18 px font-color: #ff4739 text-align: left
42
font-family: Titilium Web Regular fontsize: 18 px font-color: #ff4739 text-align: left
width: auto height: 40px border-size: 1px border-radius: 10px border-color: #ff4739 font-family: Titilium Web Bold fontsize: 10 px font-color: #ff4739f text-align: left
RADIO BUTTONS / CHECKBOXES
Active
Radiobutton 01
width: 20px height: 20px border-size: 1px border-radius: 10px color: #00c379 border-color: #00d77e margin-right: 20px font-family: Titilium Web Regular fontsize: 18px font-color: #ffffff
Default
Radiobutton 02
width: 20px height: 20px border-size: 1px border-radius: 10px border-color: #00b1ff margin-right: 20px
Active
Checkbox 01
font-family: Fontawesome Pro 5 Regular fontsize: 14px
Default
Checkbox 02
width: 20px height: 20px border-size: 1px border-radius: 2px color: #00c379 border-color: #00c379 margin-right: 20px font-family: Titilium Web Regular fontsize: 18px font-color: #ffffff width: 20px height: 20px border-size: 1px border-radius: 2px border-color: #00b1f margin-right: 20px font-family: Titilium Web Regular fontsize: 18px font-color: #ffffff
Hover
Radiobutton 01
width: 10px height: 10px border-size: 1px border-radius: 5px color: #00c379 border-color: #00d77e
font-family: Titilium Web Regular fontsize: 18px font-color: #ffffff
Active
Checkbox 01
width: 20px height: 20px border-size: 1px border-radius: 2px color: #00c379 border-color: #00c379 margin-right: 20px font-family: Titilium Web Regular fontsize: 18px font-color: #ffffff
43
FORM ELEMENTS
Default
Modal textbox
Active
Modal textbox
Message
Message
font-family: Titilium Web Italic fontsize: 18 px font-color: #7f7f7f text-align: left
width: auto min-height: min-height: 100px border-size: 1px border-radius: 5px border-color: #00b1ff
font-family: Titilium Web Bold fontsize: 18 px font-color: #ffffff padding-bottom: 20px
Filled
Modal textbox Message
width: auto min-height: min-height: 100px border-radius: 5px box-shadow:0 5px 15px 0 rgba(0,177,255,0.50); background-color: white;
font-family: Titilium Web Regular fontsize: 18 px font-color: #ffffff text-align: left
width: auto min-height: min-height: 100px border-size: 1px border-radius: 5px border-color: #00b1ff
Invalid
Normal textbox Message
*A követkeő részt kötelező kitölteni font-family: Titilium Web Italic fontsize: 18 px font-color: #ff4739 text-align: left
font-family: Titilium Web Regular fontsize: 18 px font-color: #ff4739 text-align: left
font-family: Titilium Web Bold fontsize: 10 px font-color: #ff4739f text-align: left
width: auto min-height: min-height: 100px border-size: 1px border-radius: 5px border-color: #ff4739
BUTTONS
Default
Main
Secondary
A J Á N L AT OT K É R E K
A J Á N L AT OT K É R E K
font-family: Titilium Web Bold (uppercase) fontsize: 16 px font-color: #ffffff text-align: center
Hover
A J Á N L AT OT K É R E K font-family: Titilium Web Bold (uppercase) fontsize: 16 px font-color: #ffffff text-align: center
Pressed
width: auto height: 50px border-size: 1px border-radius: 5px background-image: linear-gradient ( to top, #06d007, #06bb6d );
width: auto height: 50px border-radius: 5px color: #00b1ff background-image: linear-gradient ( to top, #00b1ad, #06d007 );
A J Á N L AT OT K É R E K font-family: Titilium Web Bold (uppercase) fontsize: 16 px font-color: #ffffff text-align: center
width: auto height: 50px border-size: 1px border-radius: 5px color: #06d007
font-family: Titilium Web Bold (uppercase) fontsize: 16 px font-color: #00b1ff text-align: center
width: auto height: 50px border-size: 1px border-radius: 5px border-color: #00b1ff
A J Á N L AT OT K É R E K font-family: Titilium Web Bold (uppercase) fontsize: 16 px font-color: #00b1ff text-align: center
width: auto height: 50px border-size: 1px border-radius: 5px border-color: #00b1ff box-shadow:0 5px 15px 0 rgba(0,177,255,0.50); background-color: white;
A J Á N L AT OT K É R E K font-family: Titilium Web Bold (uppercase) fontsize: 16 px font-color: #00d77e text-align: center
width: auto height: 50px border-size: 1px border-radius: 5px border-color: #00d77e
45
46
Websites & Applications A product could be the manifestation of an online based company. But we must realize an application by the brand, like a leaf by the tree.
47
COMPANY WEBSITES
48
TOOLS SITE
49
APPLICATION UI
50
ICONS
51
EMAIL FOOTER
width: 154px
font-family: Titilium Web Regular fontsize: 18 pt font-color: #00b1ff text-align: left line-height: 22 pt
font-family: Font Awesome 5 Pro Regular fontsize: 14 pt font-color: #ffffff text-align: center line-height: 20 pt
font-family: Titilium Web Bold fontsize: 20 pt font-color: #000050 text-align: left line-height: 24 pt
font-family: Titilium Web Bold fontsize: 16 pt font-color: #000050 text-align: left line-height: 20 pt
height: 90px backgorund-color: #ffffff
height: 105 px backgorund-color: #00b1ff
image-height: 18 px height: 100 px backgorund-color: #000050 image-height: 26 px
52
width: 600px
SOCIAL MEDIA
53
54
sh
Infographics & illustrations The textual content needs some shapes and color to imagine more effective it’s primary message. That is the way what we call illustration. These are visual metaphors, that could make things more understandable.
55
mm
egt
érü
lő r em
ark etin g
% -8
+
0%
INFOGRAPHICS
ési
0% +4 -3 %
+
0% +5
−
-1 0%
+
-1
0% +3
+
2%
−
-1 7%
+
% +9
−
% +6
−
lon
g ta
% +3
−
tbo
t
We
bsi
te C
We
bsi
ER
P
56
alls
hat
We
bsi
te
Le Pop ad Ge Up n
dat Clou aba d
te C
köl ts
ég
db 00 ék 10 rm te
−
Cha
ég Hir det
% -3
0% +3
+
−
köl ts
il
Boxes and shapes
Icons
Arrows
ELEMENTS
font-family: Font Awesome 5 Pro Regular
♥
Charts
57
APPLICATION ILLUSTRATION
58
APPLICATION ILLUSTRATION
59
ILLUSTRATIONS
60
GRADIENT COLORS AND AXONOMETRIC GRID
FFFFFF 000050
000000 000050
FFFFFF B50238
00D77E 000050
000000 000050
30°
61
62
Offline contents There are no dimensions when a visual system is specified. Online and offline identity need to support eachother
63
FOLDER
THE MAR INV KETI COMESTORNG PAN Y Telje
Megb
ízott:
Megb
Gross
ízó: Ko
sítés
Marke
paszi
ting Pr
oduc
Gát Kf
i igaz
olás
t Kft., 1033 Buda pest, 17 Bu Kéve dape u. 14 st, Ko . paszi gát 5.
t., 11
2019
. már
Megb ízo követke tt és Me gbízó ző tét alu eleke t a Me lírott me gbízo gbízo 1. Ér tt tt 20 deklőd 19.m képviselőj ő közv árcius e 31-i dá megvizsgá etítés, lták és tumm konv al tel erzió jesíte megállapít alapú tte: ották elszám , hogy
cius
olássa
l
Kelt:
Az elv összeg égzett fel adat ű szám la beny teljesíté se ala újtha pján tó. össz
Buda
pest,
esen
2019
2812
00 Ft
.04.15
+ ÁF A, az az bru ttó 35 71
Se be
a
24 Ft
st yé .......... n M ár ..........Inv es tm en .......... to n ..........t an d Gr ow Co..... th -F..... ou..... Megbí seb est nd er ..........Str ate gy, zó aláyen .ma . írás
..........
a rto n@ onl ine + 36 20 466 cap ital .hu 284 2
inf o@
on lin e- ca + 36 pit al. 20 46 hu 6 28 42
64
BUSINESS CARD
Width: 90mm
margin: 15mm
Front
height: 50mm
THE MARKETING INVESTOR COMPANY
margin: 15mm
font-family: Syncopate Bold (uppercase) fontsize: 15 px font-color: # 00b1ff / #ffffff text-align: center
margin: 10mm
Back
margin: 4mm margin: 7mm
SebestyĂŠn MĂĄrton Investment and Growth Strategy, Co-Founder sebestyen.marton@onlinecapital.hu + 36 20 466 2842
h3 (print) body (print)
font-family: Titilium Web Regular fontsize: 8 px font-color: black text-align: center
65
PEN / PENCIL / ERASER
66
ENVELOPE
67
ID CARD NECK STRAP
68
ID CARD NECK STRAP
63mm
15 mm
22 mm
13 mm 7mm
87mm
THE MARKETING INVESTOR COMPANY
30 mm
69
PAGE HEADER
margin: 20mm
Teljesítési igazolás
H2
Megbízott: Kft., 1111 Budapest
Body text
Megbízó: Kft., 1111 Budapest
Body text
2019. május
H3
Megbízott és Megbízó alulírott megbízott képviselője megvizsgálták és megállapították, hogy a következő tételeket a Megbízott 2019.május 31-i dátummal teljesítette: 1. Érdeklődő közvetítés, konverzió alapú elszámolással
Exported table
Tejlesítésigazolás - 2019-05-01 - 2019-05-31 Konverzió neve
70
Body text
Konverzió értéke (Ft)
Konverziók száma (db)
Ajánlatkérés lakásválsztóból
000
44
Hírlevél regisztráció
000
3
Telefonhívás
000
0
Üzenet küldés Lakásadatlapról
000
18
Üzenet küldés Kapcsolat
000
30
Üzenet küldés Lakás
000
0
Visszahívást kér Lakás
000
0
Üzenet küldés Lakásadatlapról
000
30
Üzenet küldés Kapcsolat
000
0
Üzenet küldés Lakás
000
0
Visszahívást kér Lakás
000
4
Üzenetküldés Egyéb
000
2
Előregisztráció angol
000
0
Összesen:
PAGE FOOTER
77
nettó
281 200 Ft
bruttó
357 124 Ft
Összes konverzió ára:
Az elvégzett feladat teljesítése alapján összesen xxxxx Ft + ÁFA, azaz bruttó xxxxx Ft összegű számla benyújtható.
Kelt: Budapest, 2019.06.15
Body text
............................................................................ Megbízó aláírása
image-height: 6mm margin: 20mm
2
font-family: Titilium Web Bold (uppercase) fontsize: 16 px font-color: #00b1ff text-align: center
71
COMPANY POLO
72
COMPANY CAP
73
EMPLOYEE WELCOME KIT
74
PERSONAL MUG
75
COMPANY OFFICES
76
COMPANY OFFICES
77
Designed and edited by TamĂĄs TĹ‘rincsi 2019
