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.272Puis, vous lirez ceci
h2 | Lexend | 28 px | font-weight : 700 | line-height : 1.5 | hiérarchie 1.272Ensuite, vous lirez ceci
h3 | Lexend | 22 px | font-weight : 700 | line-height : 1.5 | hiérarchie 1.272Après, vous lirez peut-être ceci
h4 | Lexend | 17 px | font-weight : 800 | line-height : 1.5 | hiérarchie 1.272Parfois, vous lirez ceci
p bold | Lexend | 17 px | font-weight : 600 | line-height : 1.6 | hiérarchie 1.272Et enfin, vous lirez ceci
p | Lexend | 17 px | font-weight : 400 | line-height : 1.5 | hiérarchie 1.272Ah ! Et de temps en temps, vous verrez ceci aussi
caption | Lexend | 12 px | font-weight : 400 | line-height : 1.5 | hiérarchie 1.272Typographies et hiérarchies sur tablette
Vous lirez d'abord ceci
h1 | Lexend | 57 px | font-weight : 800 | line-height : 1.2 | hiérarchie 1.333Puis, vous lirez ceci
h2 | Lexend | 43 px | font-weight : 700 | line-height : 1.3 | hiérarchie 1.333Ensuite, vous lirez ceci
h3 | Lexend | 32 px | font-weight : 700 | line-height : 1.6 | hiérarchie 1.333Après, vous lirez peut-être ceci
h4 | Lexend | 24 px | font-weight : 800 | line-height : 1.6 | hiérarchie 1.333Parfois, vous lirez ceci
p bold | Lexend | 18 px | font-weight : 600 | line-height : 1.7 | hiérarchie 1.333Enfin, vous lirez ceci
p | Lexend | 18 px | font-weight : 400 | line-height : 1.6 | hiérarchie 1.333 caption | Lexend | 14 px | font-weight : 400 | line-height : 1.6 | hiérarchie 1.333Typographies et hiérarchies sur desktop
Vous lirez d'abord ceci
h1 | Lexend | 60 px | font-weight : 800 | line-height : 1.2 | hiérarchie 1.333Puis, vous lirez ceci
h2 | Lexend | 45 px | font-weight : 700 | line-height : 1.3 | hiérarchie 1.333Ensuite, vous lirez ceci
h3 | Lexend | 34 px | font-weight : 700 | line-height : 1.7 | hiérarchie 1.333Après, vous lirez peut-être ceci
h4 | Lexend | 25 px | font-weight : 800 | line-height : 1.7 | hiérarchie 1.333Parfois, vous lirez ceci
p bold | Lexend | 19 px | font-weight : 600 | line-height : 1.8 | hiérarchie 1.333Enfin, vous lirez ceci
p | Lexend | 19 px | font-weight : 400 | line-height : 1.7 | hiérarchie 1.333 caption | Lexend | 14 px | font-weight : 400 | line-height : 1.7 | hiérarchie 1.333Différents types de liens
Ceci est un lien normal
Ceci est un lien hover
Ceci est un lien visité