Wearethewords

Styleguide

horizontal
Wearethewords
Wearethewords
Wearethewords
vertical
Wearethewords
Wearethewords
Wearethewords
icône
Wearethewords
Wearethewords
Wearethewords
typo
Wearethewords
Wearethewords
Wearethewords

Typography

body
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.

heading xlarge
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

heading large
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

heading medium
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

heading small
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

heading xsmall
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
cursive variant
family

Cormorant

weight

semibold 500

style

italic

css class

cursive

Lorem ipsum dolor sit amet consectetur adipiscing elit

Grid

flexible 12 columns grid system

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

mixed grid

8/12 – 2/3

4/12 – 1/3

3/12 – 1/4

9/12 – 3/4

column gutter, row gap and padding
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

royal blue
hex

#1b1fb4

rgb

27, 31, 180

cmyk

85, 83, 0, 29

royal blue
hex

#000

rgb

0, 0, 0

cmyk

0, 0, 0, 100

dark grey
hex

#9E9E9E

rgb

158, 158, 158

cmyk

0, 0, 0, 38

medium grey
hex

#eee

rgb

238, 238, 238

cmyk

0, 0, 0, 7

light grey
hex

#fafafa

rgb

250, 250, 250

cmyk

0, 0, 0, 2

Images

landscape
10 idées brillantes pour recycler son contenu
size

px 1300 x 650

ratio

16:9

rectangle
10 idées brillantes pour recycler son contenu
size

px 1300 x 975

ratio

4:3

square
10 idées brillantes pour recycler son contenu
size

px 650 x 650

huge size

px 1300 x 1300

ratio

1:1

portrait
10 idées brillantes pour recycler son contenu
size

px 650 x 1300

ratio

16:9

Buttons

filled button
outlined button
textual button

Section Title

title tagline

Lorem ipsum dolor sit amet

optional cursive subtitle
title tagline

Lorem ipsum dolor sit amet

optional cursive subtitle
title tagline

Lorem ipsum dolor sit amet

optional cursive subtitle

Audio Player

Blog List

standard square
standard rectangle and excerpt
minimal

Portfolio List

info follow
info slide top

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.

Poll

Votre avis est important

Webinar

Contactez-nous

C'est à quel sujet ?

Une question, un conseil ponctuel, besoin d’un chiffrage, en quête d’un partenariat au long cours en marketing inbound et contenu ? Parlez-nous de votre projet, sans engagement.