logo-blanc-terraterre
Website Style Guide
Retour à l'accueil

Introduction

Welcome to the style guide for your website. You can use this page to quickly make changes to things such as fonts, text sizes, colours, buttons, and more. These changes will then be applied across your website.

To ensure your site is responsive and adapts to all devices, some elements will have different stylings across different breakpoints. For example, heading sizes on desktop breakpoints are slightly different to those on mobile breakpoints.

Your style guide is not viewable to the public, and can only be accessed with a password.

If you have any questions about this style guide or your website in general, then please do not hesitate to email me - example@domain.com

Colours

Primary Colour

Tint 2
#99999A
Tint 1
#777778
Base Hue
#565557
Shade 1
#444445
Shade 2
#333334

Secondary Colour

Tint 2
#EAB08A
Tint 1
#e39663
Base Hue
#dc7d3c
Shade 1
#b06330
Shade 2
#844A24

Other Colours

White
#EEEEEE
Black
#333333
Success
#00b04f
Error
#b00020

Typography

The primary colour for all typography on your website is #EEEEEE.

As mentioned in the introduction, the sizing of your headings differ between desktop and mobile breakpoints. Both desktop and mobile breakpoints have a base font size of 18px (1em). All pixel values have been rounded.

Desktop - Major Third Scale (1.25)
44px | 35px | 28px | 23px | 18px | 14px | 12px

Mobile - Minor Third Scale (1.20)
37px | 31px | 26px | 22px | 18px | 15px | 12px

H1

The quick brown fox jumps over the lazy dog.

Desktop: Arial | 44px / 2.44em | 110% | Bold
Mobile: Arial | 37px / 2.05em | 110% | Bold
H2

The quick brown fox jumps over the lazy dog.

Desktop: Arial | 35px / 1.94em | 120% | Bold
Mobile: Arial | 31px / 1.72em | 120% | Bold
H3

The quick brown fox jumps over the lazy dog.

Desktop: Arial | 28px / 1.56em | 120% | Bold
Mobile: Arial | 26px / 1.44em | 120% | Bold
H4

The quick brown fox jumps over the lazy dog.

Desktop: Arial | 23px / 1.28em | 130% | Bold
Mobile: Arial | 22px / 1.22em | 130% | Bold
H5
The quick brown fox jumps over the lazy dog.
Desktop & Mobile: Arial | 18px / 1em | 140% | Bold
H6
The quick brown fox jumps over the lazy dog.
Desktop & Mobile: Arial | 14px / 0.78em | 140% | Bold | All Caps
Paragraph

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.

Desktop & Mobile: Arial | 18px / 1em | 150% | Normal

The .p1 class can have a number of combo-classes applied to it, such as -

.small (reduces font size to 14px / 0.78em).
.tiny (reduces font size to 12px / 0.67em).
.centred (centre aligns the text).
.capitals (makes the the text all CAPS).
.no-max-width (disables the 65ch max-width setting).
.desktop-only (texts only displays on desktop breakpoints).
.mobile-only (text only displays on tablet & mobile breakpoints).

Text
This is a piece of text. Not quite the same as a paragraph element.
Desktop & Mobile: Arial | 18px / 1em | 150% | Normal

The .text class can also have the same combo-classes applied to it as the .p1 class.

Logos & Assets

Dummy placeholder logo
Logo - White
Logo - Black
Favicon - 32x32px
Webclip - 256x256px

Buttons & CTAs

Filled Button - Primary
Filled Button - Secondary
Filled Button - Icon
Outlined Button - Primary
Outlined Button - Secondary
Outlined Button - Icon

Rich Text - Blog Posts

Rich text blocks (RTBs) are different from regular paragraph and text elements. RTBs allow you to format headings, paragraphs, quotes, images, videos, captions, and lists all within the one element.

RTBs are what will be used for the primary body of your blog posts.

Quelle différence y a-t-il entre contribution carbone et greenwashing ? 

Après l’Accord de Paris en 2016, 82 pays dont la France se sont engagés à atteindre la « neutralité carbone » en 2050. 
Pour atteindre cet ambitieux (et nécessaire) objectif, les particuliers comme les entreprises vont devoir réduire leurs émissions de gaz à effet de serre annuelles pour empêcher les désagréments qu'engendrerait une augmentation de la température de 2°.

Mais que faire des 800.000.000.000 tonnes d'excédent de CO2 atmosphérique accumulées lors des deux derniers siècles ? 🤔 C’est là que le mécanisme de la contribution intervient.

Pour les entreprises deux options s’ouvrent : 
  1. Continuer sur un même rythme de pollution et se racheter une conscience en finançant des projets de capture de CO2 = greenwashing. 
  2. Mesurer ses émissions, les réduire et financer des projets de capture de CO2 à hauteur de ses émissions incompressibles = contribution carbone.

Qu’est ce que la contribution carbone ? 

Mesurer, réduire, compenser...

Pour pouvoir prétendre à la neutralité carbone, tout individu ou entreprise doit obligatoirement passer par trois étapes : 

  1. Mesurer ses émissions de façon rigoureuse et indépendante. Un bilan carbone de qualité est la pierre angulaire de toute politique climat sérieuse : il permettra de faire un diagnostic complet des émissions de gaz à effet de serre de chaque branche d’une entreprise, afin de fixer les priorités et d’établir un plan d’action.
  1. Réduire voire cesser complètement ses émissions de gaz à effet de serre en repensant ses pratiques. Pour une entreprise, celà passera par une stratégie bas carbone de long terme dont les objectifs peuvent être validés par des organismes indépendants, comme l’initiative Science Based Targets (SBTi).

Par exemple, il pourra s’agir de prioriser un approvisionnement en plastique recyclé, de choisir un fournisseur d’énergie renouvelable, d’utiliser la digitalisation de manière raisonnée…

Réduire, réduire… d’accord, mais toute activité engendre forcément des émissions, même réduites au stricte minimum. C’est pour contrebalancer ces émissions inévitables (et uniquement celles-là) qu’existe la compensation carbone. D’ailleurs, ces émissions inévitables sont appelées incompressibles ou résiduelles.

This is a H3 heading

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.

This is a H4 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

This is a H5 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

This is a H6 heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

This is a figure/image caption

This is an ordered list -

  1. Fully responsive
  2. Cloneable
  3. Swap in with your client's styles

Rappel :

Le H1 est le plus gros, le titre de l'article généralement

Le H2 constitue les sous-titres

Le H3 encore en dessous, avec une tabulation

Ici une definition en H5 - Agriculture régénératrice : nom féminin. Philosophie de la production agricole qui encourage aux méthodes de culture et d’élevage raisonnées afin d’inverser le changement climatique par la régénération de la biodiversité et des sols.
Synonyme : agriculture régénérative, agriculture de conservation

Voici un paragraph : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Ici, une phrase avec un mot en gras en plein milieu. A noter que le gras est en vert.

Ici une phrase en italique. Et en gras + italique (en noir).

Voici une citation

Et un lien vers un autre site.

Ici, une phrase soulignée (le style est H6)

Voici une liste

  • Fully responsive
  • Cloneable
  • Swap in with your client's styles

Other

You can use this section for any other important elements that you'll use throughout your client's website, such as -

• Navigation
• Footer
• Icons
• Cards
• Form elements
• Social media share buttons

Thank you for checking out this style guide template. You can clone it here. If you have any questions about it, please feel free to message me on Twitter.

Go to Homepage