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.

Montserrat

Usual (Avenir Next – Corps de texte)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Avenir Next

System

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

system-ui, sans-serif

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

Images par défaut

BSA Web UI

arrow-right
arrow-left
close
menu
plus
minus

Font Awesome – Light

location-dot
mobile-screen-button

Marques

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

Marques en couleur

facebook
instagram
twitter

BSA Web – Child Theme

expertise_finance
expertise_etude_tech
expertise_mesure
expertise_reemploi
expertise_retd
expertise_certif_env
expertise_biodiv