Styleguide
Logotype
Typography
family
Poppins
size
rem 1 - px 16 - pt 12
normal weight
regular 400
bolder weight
semibold 600
line height
1.5
line length
words 8-12 - ch 63
bottom spacing
rem 1 - px 16 - pt 12
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisl sapien, ornare eu ligula consequat, imperdiet tincidunt quam. Nullam rutrum, ipsum sit amet tincidunt consequat, nunc nibh rhoncus tellus, in pellentesque tortor metus id libero. Ut consectetur enim a pharetra tristique.
Cras aliquet, diam sed facilisis gravida, quam libero porttitor magna, a vehicula sem risus pellentesque velit. Nullam vitae molestie diam, a dignissim tellus.
family
Cormorant
size
rem 3 - px 48 - pt 36
weight
bold 700
line height
1
bottom spacing
rem 2 - px 32 - pt 24
default level
h1
css class
xlarge
Lorem ipsum dolor sit amet consectetur adipiscing elit
family
Cormorant
size
rem 2.5 - px 40 - pt 30
weight
bold 700
line height
1
bottom spacing
rem 1 - px 16 - pt 12
default level
h2
css class
large
Lorem ipsum dolor sit amet consectetur adipiscing elit
family
Cormorant
size
rem 2 - px 32 - pt 24
weight
bold 700
line height
1
bottom spacing
rem 1 - px 16 - pt 12
default level
h3
css class
medium
Lorem ipsum dolor sit amet consectetur adipiscing elit
family
Cormorant
size
rem 1.5 - px 24 - pt 18
weight
bold 700
line height
em 1.15
default level
h4
css class
small
Lorem ipsum dolor sit amet consectetur adipiscing elit
family
Cormorant
size
rem 1.25 - px 20 - pt 15
weight
bold 700
line height
1.25
default level
h5, h6
css class
xsmall
Lorem ipsum dolor sit amet,
consectetur adipiscing elit
family
Cormorant
weight
semibold 500
style
italic
css class
cursive
Lorem ipsum dolor sit amet consectetur adipiscing elit
Grid
12/12 – 1/1
6/12 – 1/2
6/12 – 1/2
4/12 – 1/3
4/12 – 1/3
4/12 – 1/3
3/12 – 1/4
3/12 – 1/4
3/12 – 1/4
3/12 – 1/4
8/12 – 2/3
4/12 – 1/3
3/12 – 1/4
9/12 – 3/4
huge
rem 9 - px 144
wider
rem 6 - px 96
wide
rem 4 - px 64
extended
rem 3 - px 48
normal
rem 2 - px 32
lower
rem 1.5 - px 24
narrow
rem 1 - px 16
Colors
hex
#1b1fb4
rgb
27, 31, 180
cmyk
85, 83, 0, 29
hex
#000
rgb
0, 0, 0
cmyk
0, 0, 0, 100
hex
#9E9E9E
rgb
158, 158, 158
cmyk
0, 0, 0, 38
hex
#eee
rgb
238, 238, 238
cmyk
0, 0, 0, 7
hex
#fafafa
rgb
250, 250, 250
cmyk
0, 0, 0, 2
Images
size
px 1300 x 650
ratio
16:9
size
px 1300 x 975
ratio
4:3
size
px 650 x 650
huge size
px 1300 x 1300
ratio
1:1
size
px 650 x 1300
ratio
16:9
Buttons
Section Title
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Audio Player
Blog List
Comment soigner sa ligne éditoriale
Soigner sa ligne éditoriale, c'est un travail de longue haleine. Composantes, méthodologie et check-list à télécharger.
Le Generative Engine Optimization (GEO) : le référencement réinventé par l’IA
À l'aube de 2025, le référencement naturel (SEO) vit une révolution sans précédent grâce à l'intégration massive de l'intelligence artificielle dans les moteurs de recherche. Exit le référencement traditionnel, place au Generative Engine Optimization (GEO), une évolution nécessaire pour continuer à capter
Portfolio List
Accordion
Mauris eget metus at est facilisis faucibus
Proin aliquam leo eget enim placerat, vel laoreet lorem malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis, est in tempus ullamcorper, ex erat efficitur erat, et sodales enim ligula ut lectus. Nunc a mi ac felis interdum ultrices. Vestibulum sit amet hendrerit nisi. Maecenas mauris mi, auctor in aliquet in, lobortis vitae lectus. Maecenas auctor faucibus nisi sed hendrerit. Nullam a viverra neque.
Nullam efficitur mauris consequat odio
Proin aliquam leo eget enim placerat, vel laoreet lorem malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis, est in tempus ullamcorper, ex erat efficitur erat, et sodales enim ligula ut lectus. Nunc a mi ac felis interdum ultrices. Vestibulum sit amet hendrerit nisi. Maecenas mauris mi, auctor in aliquet in, lobortis vitae lectus. Maecenas auctor faucibus nisi sed hendrerit. Nullam a viverra neque.
Quisque pharetra sapien vitae
Proin aliquam leo eget enim placerat, vel laoreet lorem malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas facilisis, est in tempus ullamcorper, ex erat efficitur erat, et sodales enim ligula ut lectus. Nunc a mi ac felis interdum ultrices. Vestibulum sit amet hendrerit nisi. Maecenas mauris mi, auctor in aliquet in, lobortis vitae lectus. Maecenas auctor faucibus nisi sed hendrerit. Nullam a viverra neque.
