Style Guide

Couleurs

Lightest Sand

var(--color-sand-lighter)

Lightest Sun

var(--color-sun-lighter)

Sun

var(--color-sun)

Lightest Sky

var(--color-sky-lighter)

Light Sky

var(--color-sky-light)

Sky

var(--color-sky)

Dark Sky

var(--color-sky-dark)

Darkest Sky

var(--color-sky-darker)

Lightest Wood

var(--color-wood-lighter)

Darkest Wood

var(--color-wood-darker)

Lightest Grass

var(--color-grass-lighter)

Light Grass

var(--color-grass-light)

Grass

var(--color-grass)

Darkest Grass

var(--color-grass-darker)

Ocean

var(--color-ocean)

Lightest Earth

var(--color-earth-lighter)

Earth

var(--color-earth)

Dark Earth

var(--color-earth-dark)

Lightest Fire

var(--color-fire-lighter)

Fire

var(--color-fire)

Dark Fire

var(--color-fire-dark)

Darkest Fire

var(--color-fire-darker)

Black

var(--color-black)

White

var(--color-white)

Typographie

Général

Font Families

Primary (Montserrat – Titres)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

var(--font-primary)

Usual (Avenir Next – Corps de texte)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

var(--font-usual)

Heading + Body

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi pretium commodo nulla, non fringilla nibh laoreet vel. Curabitur leo libero, mattis vulputate neque quis, euismod malesuada metus. In eget pharetra risus, et tincidunt mi. Vivamus congue, leo ac commodo tristique, mi nibh blandit lacus, a sodales nibh dui sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus blandit leo id urna accumsan porta. Curabitur suscipit augue id porttitor imperdiet. Pellentesque auctor rhoncus pulvinar. Praesent id fringilla nisl, ut commodo risus. Phasellus sollicitudin est nulla, at egestas sapien molestie dapibus.

Typographie

Échelle de tailles

Extra Small (0.75rem – 12px)

Lorem ipsum

var(--text-xs)

Small (0.875rem – 14px)

Lorem ipsum

var(--text-sm)

Normal (1rem – 16px)

Lorem ipsum

var(--text-base)

Medium (1.125rem – 18px)

Lorem ipsum

var(--text-md)

Large (1.25rem – 20px)

Lorem ipsum

var(--text-lg)

Extra Large (1.5rem – 24px)

Lorem ipsum

var(--text-xl)

2XL (1.5rem – 24px / 2rem – 32px)

Lorem ipsum

var(--text-2xl)

3XL (2rem – 32px / 2.5rem – 40px)

Lorem ipsum

var(--text-3xl)

Display 1

Lorem ipsum

var(--text-4xl)

Display 2

Lorem ipsum

var(--text-5xl)

Espacements

Extra Small (0.5rem – 8px)

var(--space-xs)

Small (1rem – 16px)

var(--space-sm)

Medium (1.5rem – 24px)

var(--space-md)

Large (2rem – 32px)

var(--space-lg)

Extra Large (2.5rem – 40px)

var(--space-xl)

2XL (3rem – 48px)

var(--space-2xl)

3XL (4rem – 64px)

var(--space-3xl)

4XL (5rem – 80px)

var(--space-4xl)

Boutons

Icons

UI

arrow-right
arrow-left
close
menu
plus
minus

Font Awesome – Light

location-dot
mobile-screen-button

Brands

facebook
flickr
google
instagram
linkedin
mail
pinterest
snapchat
spotify
twitch
twitter
vimeo
wordpress
youtube

Brands Color

facebook
instagram
twitter

BSA Web – Child Theme

shape_ilo_9
shape_ilo_5
Ilo_immeuble_4
expertise_rse
expertise_finance
expertise_certif_env
expertise_biodiv
expertise_mesure
expertise_etude_tech