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