Brand
Reborn & Be
Ce document fournit des directives visuelles et recommandations pour vous aider à créer du matériel qui ressemble et s'accorde avec le style de Reborn&be, peu importe le média ou public.
X - Identité
Télécharger les logos
I - Font
Utilisations
La charte graphique se compose de trois typographies utilisées intelligemment pour servir au mieux l’image de la marque Reborn&Be et les différentes marques qui la composent. Leur utilisation permet de donner une image bienveillante, douce et iniatrice de rêves. Leur mise en page est régie par des espacements basés sur des multiples de 8.
Il s’agit d’utiliser la « Coiny » avec parcimonie, sans qu’elle devienne l’image de la marque, mais seulement comme un vecteur pour donner plus de consistance à la Nunito et développer le storytelling de la marque : avec Reborn&Be, on peut avoir les moyens de réaliser ses rêves.
heading large
font : Coiny
letter spacing : -2
size : 56
line : 64
Heading large
heading medium
font : Nunito ExtraBold
letter spacing : -1,5
size : 32
line : 34
Heading medium
heading small
font : Nunito ExtraBold
letter spacing : -0,5
size : 16
line : 24
Heading small
current text
font : Source Sans Pro Regular
letter spacing : 0,2
size : 16
line : 24
Current text
II - Color
Reborn & Be
#2E5E97
C70 M38 J0 N41
#E2EDF9
C9 M5 J0 N2
#F7F9FA
C1 M0 J0 N2
#2B3847
C39 M21 J0 N72
#687C95
C30 M17 J0 N42
#79848F
C15 M8 J0 N44
Be-Spaces
#6E4688
C19 M49 J0 N47
#EAE4EE
C2 M4 J0 N7
#FAF9FB
C0 M1 J0 N2
#2D2632
C10 M24 J0 N80
#7B628B
C12 M29 J0 N45
#8D8593
C4 M10 J0 N42
Be-Coworking
#62A7C5
C50 M15 J0 N23
#E1EEF3
C7 M2 J0 N5
#F7FBFC
C2 M0 J0 N1
#263134
C27 M6 J0 N80
#5F8390
C34 M9 J0 N44
#879194
C9 M2 J0 N42
Be-Services
#692344
C0 M67 J35 N59
#E8D6DE
C0 M8 J4 N9
#FDF8FA
C0 M2 J1 N1
#2D1621
C0 M51 J27 N82
#876776
C0 M24 J13 N47
#988B91
C0 M9 J5 N40
Be-Club
#335A6F
C54 M19 J0 N56
#D8E7EF
C10 M3 J0 N6
#F7F9FA
C1 M0 J0 N2
#142B38
C64 M23 J0 N78
#606F78
C20 M7 J0 N53
#8A959B
C11 M4 J0 N39
Be-Franchise-lab
#DC8358
C0 M40 J60 N14
#F2DCD1
C0 M9 J14 N5
#FDF8F5
C0 M2 J3 N1
#3D312B
C0 M20 J30 N76
#96796B
C0 M19 J29 N41
#928985
C0 M6 J9 N43
Be-Numerik
#A8C769
C16 M0 J47 N22
#DCE8C4
C5 M0 J16 N9
#F8FCF1
C2 M0 J4 N1
#32362A
C7 M0 J22 N79
#666F52
C8 M0 J26 N56
#84887C
C3 M0 J9 N47
III - Textfields & Call to action
Buttons state & hover
Background boxes
look
radius : 32px
shadow
opacity : 25%
blur : 3
x : +1
y : +2
Textfields
current text
height : 37px
icons : 16x16px
IV - Navigation
navbar example theme
height : 86px
icon logo side menu : 103x24px
active menu font : Nunito ExtraBold
menu font : Nunito SemiBold
VI - Layout & spacing rules
Two columns various layout
Rules
heading medium/paragraph spacing : 16px
heading small/paragraph spacing : 8px
heading medium/heading small spacing : 24px
paragraph/call to action spacing : 40px
alignement content : left
alignement call to action : left
icon round size : 80x80px
icon/heading medium spacing : 40px
module spacing : 120px
Heading medium title
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Heading medium title
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Heading medium title
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Heading medium title
Heading small subtitle
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Heading medium title
Heading small subtitle
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Heading medium title
Heading small subtitle
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Heading medium title
Heading small subtitle
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Three columns various layout
Rules
heading medium/paragraph spacing : 16px
heading small/paragraph spacing : 8px
heading medium/heading small spacing : 24px
paragraph/call to action spacing : 40px
alignement content : left
alignement call to action : center
icon round size : 80x80px
icon/heading medium spacing : 40px
module spacing : 120px
Heading medium title
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam.
Heading medium title
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam.
Heading medium title
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam.
Heading medium title
Heading small subtitle
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam.
Heading small subtitle
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam.
Heading small subtitle
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam.
Heading medium title
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam.
Heading medium title
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam.
Heading medium title
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam.
Heading medium title
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam.
Heading medium title
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam.
Heading medium title
Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam.