Mon UI-Kit

Les éléments de mon site

Palette de couleurs utilisées en light mode

#88CCEE
#88CCEE
#135E84
#135E84
#595959
#595959
#FFFFFF
#FFFFFF
#000000
#000000

Palette de couleurs utilisées en dark mode

#88CCEE
#88CCEE
#A3A3A3
#A3A3A3
#141414
#141414
#FFFFFF
#FFFFFF
#000000
#000000

Typographies et hiérarchies sur mobile

Vous lirez d'abord ceci

h1 | Lexend | 35 px | font-weight : 800 | line-height : 1.5 | hiérarchie 1.272

Puis, vous lirez ceci

h2 | Lexend | 28 px | font-weight : 700 | line-height : 1.5 | hiérarchie 1.272

Ensuite, vous lirez ceci

h3 | Lexend | 22 px | font-weight : 700 | line-height : 1.5 | hiérarchie 1.272

Après, vous lirez peut-être ceci

h4 | Lexend | 17 px | font-weight : 800 | line-height : 1.5 | hiérarchie 1.272

Parfois, vous lirez ceci

p bold | Lexend | 17 px | font-weight : 600 | line-height : 1.6 | hiérarchie 1.272

Et enfin, vous lirez ceci

p | Lexend | 17 px | font-weight : 400 | line-height : 1.5 | hiérarchie 1.272

Ah ! Et de temps en temps, vous verrez ceci aussi

caption | Lexend | 12 px | font-weight : 400 | line-height : 1.5 | hiérarchie 1.272

Typographies et hiérarchies sur tablette

Vous lirez d'abord ceci

h1 | Lexend | 57 px | font-weight : 800 | line-height : 1.2 | hiérarchie 1.333

Puis, vous lirez ceci

h2 | Lexend | 43 px | font-weight : 700 | line-height : 1.3 | hiérarchie 1.333

Ensuite, vous lirez ceci

h3 | Lexend | 32 px | font-weight : 700 | line-height : 1.6 | hiérarchie 1.333

Après, vous lirez peut-être ceci

h4 | Lexend | 24 px | font-weight : 800 | line-height : 1.6 | hiérarchie 1.333

Parfois, vous lirez ceci

p bold | Lexend | 18 px | font-weight : 600 | line-height : 1.7 | hiérarchie 1.333

Enfin, vous lirez ceci

p | Lexend | 18 px | font-weight : 400 | line-height : 1.6 | hiérarchie 1.333

Ah ! Et de temps en temps, vous verrez ceci aussi

caption | Lexend | 14 px | font-weight : 400 | line-height : 1.6 | hiérarchie 1.333

Typographies et hiérarchies sur desktop

Vous lirez d'abord ceci

h1 | Lexend | 60 px | font-weight : 800 | line-height : 1.2 | hiérarchie 1.333

Puis, vous lirez ceci

h2 | Lexend | 45 px | font-weight : 700 | line-height : 1.3 | hiérarchie 1.333

Ensuite, vous lirez ceci

h3 | Lexend | 34 px | font-weight : 700 | line-height : 1.7 | hiérarchie 1.333

Après, vous lirez peut-être ceci

h4 | Lexend | 25 px | font-weight : 800 | line-height : 1.7 | hiérarchie 1.333

Parfois, vous lirez ceci

p bold | Lexend | 19 px | font-weight : 600 | line-height : 1.8 | hiérarchie 1.333

Enfin, vous lirez ceci

p | Lexend | 19 px | font-weight : 400 | line-height : 1.7 | hiérarchie 1.333

Ah ! Et de temps en temps, vous verrez ceci aussi

caption | Lexend | 14 px | font-weight : 400 | line-height : 1.7 | hiérarchie 1.333

Différents types de liens

Ceci est un lien normal

Ceci est un lien hover

Ceci est un lien visité