Welcome 👋

Ce style guide est conçu pour vous aider à comprendre et à prendre en main votre site sur Webflow.

Il a été conçu pour être “client-first”, et faciliter l’adaptation du client.Il se divise en deux parties, la partie “Brand Element” qui intègre tous les éléments qui constituent votre identité. Et la deuxième partie “Grid System” qui regroupe toutes les classes permettant la structuration de votre site.

Style Guide

De hd conseil

Brand elements

01

02

03

04

Grid system

05

elements

06

grid

07

spacing

08

alignment

HEADING

H1

ML Madena

heading-h1

Heading

Heading

H2

ML Madena

heading-h2

Heading

Heading

H3

ML Madena

heading-h3

Heading

Heading

H4

Switzer

heading-h4

Heading

Heading

Paragraphe

paragraphe xxl

Switzer

text-xxl

Hipster ipsum tattooed brunch I'm baby. Rights lo-fi cold-pressed truck pop-up post-ironic bulb small. A cray vice pack 3-moon crucifix chambray.

paragraphe xl

Switzer

text-xl

Hipster ipsum tattooed brunch I'm baby. Rights lo-fi cold-pressed truck pop-up post-ironic bulb small. A cray vice pack 3-moon crucifix chambray.

Hipster ipsum tattooed brunch I'm baby. Rights lo-fi cold-pressed truck pop-up post-ironic bulb small. A cray vice pack 3-moon crucifix chambray.

paragraphe large

Switzer

text-lg

Hipster ipsum tattooed brunch I'm baby. Rights lo-fi cold-pressed truck pop-up post-ironic bulb small. A cray vice pack 3-moon crucifix chambray.

Hipster ipsum tattooed brunch I'm baby. Rights lo-fi cold-pressed truck pop-up post-ironic bulb small. A cray vice pack 3-moon crucifix chambray.

Hipster ipsum tattooed brunch I'm baby. Rights lo-fi cold-pressed truck pop-up post-ironic bulb small. A cray vice pack 3-moon crucifix chambray.

paragraphe medium

Switzer

text-md

Hipster ipsum tattooed brunch I'm baby. Rights lo-fi cold-pressed truck pop-up post-ironic bulb small. A cray vice pack 3-moon crucifix chambray.

Hipster ipsum tattooed brunch I'm baby. Rights lo-fi cold-pressed truck pop-up post-ironic bulb small. A cray vice pack 3-moon crucifix chambray.

paragraphe small

Switzer

text-xs

Hipster ipsum tattooed brunch I'm baby. Rights lo-fi cold-pressed truck pop-up post-ironic bulb small. A cray vice pack 3-moon crucifix chambray.

Hipster ipsum tattooed brunch I'm baby. Rights lo-fi cold-pressed truck pop-up post-ironic bulb small. A cray vice pack 3-moon crucifix chambray.

label

Outfit

text-label

Label

bleu - h&d conseil

bleu 200

#DDE5EC

bg-blue200

text-blue200

bleu 400

#547FA1

bg-blue400

text-blue400

master

19476B

bg-bluemaster

text-bluemaster

bleu 600

#12293F

bg-blue600

text-blue600

bleu 400

#0E263A

bg-blue700

text-blue700

bleu 800

#0B1A28

bg-blue800

text-blue800

vert

vert 400

#87EA90

bg-green400

text-green400

vert master

#50D85D

bg-greenmaster

text-greenmaster

beige

beige 700

#F2E8D9

bg-beige700

text-beige700

beige 600

#F8F3EB

bg-beige600

text-beige600

beige master

#FAF9F6

bg-beigemaster

text-beigemaster

erreur

erreur 300

#FFE5E6

bg-error300

text-error300

erreur 400

#FF8A8C

bg-error400

text-error400

erreur master

#FF575A

bg-errormaster

text-errormaster

buttons

primary

button-primary

secondary

button-secondary

tertiary

button-tertiary

social

button-social

icon

button-social

forms

basic form

form-wrapper

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

container

container

container

row

row

row

col

col

col

col

col

col

desktop

col-lg-1

col-lg-11

col-lg-2

col-lg-10

col-lg-3

col-lg-9

col-lg-4

col-lg-8

col-lg-5

col-lg-7

col-lg-6

col-lg-6

col-lg-12

tablet

col-md-1

col-md-11

col-md-2

col-md-10

col-md-3

col-md-9

col-md-4

col-md-8

col-md-5

col-md-7

col-md-6

col-md-6

col-md-12

md-no-margin

landscape

col-sm-1

col-sm-11

col-sm-2

col-sm-10

col-sm-3

col-sm-9

col-sm-4

col-sm-8

col-sm-5

col-sm-7

col-sm-6

col-sm-6

col-sm-12

sm-no-margin

mobile

col-xs-1

col-xs-11

col-xs-2

col-xs-10

col-xs-3

col-xs-9

col-xs-4

col-xs-8

col-xs-5

col-xs-7

col-xs-6

col-xs-6

col-xs-12

xs-no-margin

height="0" width="0" style="display:none;visibility:hidden">