The Style Guide

English


Kick off your Webflow project with this straightforward style guide. 🚀🎨

Tip n°1 :

To modify tags, click on a title, then on the Class creation area, and select the pink element.

Tip n°2 :

For colors, mimic the color examples below, rename the classes as is--yourcolor, change the background color, and save it.

Tip n°3 :

To keep this page unpublished and not indexed by Google, save it as a 'Draft' in Webflow. 🔒

French

Lancez votre projet Webflow avec ce style guide  🚀🎨

Conseil n°1:

Pour modifier les balises, cliquez sur un titre, puis sur la zone de création de Class, et sélectionnez l'élément rose.

Conseil n°2:

Pour les couleurs, imitez les exemples de couleurs ci-dessous, renommez les classes en is--votrecouleur, changez la couleur d'arrière-plan et enregistrez-la.

Conseil n°3 :

Pour garder cette page non publiée et non indexée par Google, enregistrez-la en tant que 'Draft' dans Webflow. 🔒

Black

#2c2d37

Light Sea Green

#50bcbb

White Smoke

#f0efef

Dark Grey

#96b0b0

Light Steel Blue

#c2c5e2

Light Slate Grey

#8c8faa
Body Font

To edit the font family and color used globally on all type elements edit, select the Body__style-guide element and edit the Body (All Pages) class.

Montserrat

Heading 1

To edit the global H1 class edit the ALL H1 Heading class.

Montserrat

Heading 2

To edit the global H2 class edit the ALL H2 Heading class.

Montserrat

Heading 3

To edit the global H3 class edit the ALL H3 Heading class.

Montserrat

Paragraph

To edit the global paragraph (P) class edit the ALL paragraphs class.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Unordered List

To edit All Unordered Lists class edit the ALL Unordered Lists class.

  • Lorem ipsum dolor sit amet

  • Duis cursu mi quis viverra ornare

  • Suspendisse varius enim in eros elementum

Ordered List

To edit All ordered Lists class edit the ALL Ordered Lists class.

  1. Lorem ipsum dolor sit amet

  2. Duis cursu mi quis viverra ornare

  3. Suspendisse varius enim in eros elementum

Link

To edit All links class edit the ALL Links class.

Normal Link
Quote

To edit All block quote class edit the ALL Block Quotes class.

Block Quote – Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Text Input

To edit the different elements by selecting the classed starting with Form

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Text Area

To edit the different elements by selecting the classed starting with Form

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Select

To edit the different elements by selecting the classed starting with Form

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
radio button

To edit the different elements by selecting the classed starting with Form

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Checkbox

To edit the different elements by selecting the classed starting with Form

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Buttons

To edit the size and padding of all buttons edit the Main-button class.

To edit the Main button, you can create a combo class and customize it as you wish. Specific changes to the Main button, such as background color & border, should be made on the Main-Button class.

Main Button
Accordion
Adipiscing Egestas Tristique Purus

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Logos
2023 © Designed by