Yzli.studio / Référentiel de styles
Mise à jour : 24 septembre 2026 · Elementor V4
Kit UI V2
Les typographies et les couleurs d’Yzli, réunies dans un même référentiel. Chaque spécimen utilise les classes globales du site.
Variables de typographies
24 classes · Zain pour les titres, Poppins pour les textes. Tailles indiquées en pixels dans l’ordre desktop / tablette / mobile. Les noms de classes conservent leur casse actuelle.
Styles principaux
tp-h1
Zain — titre de niveau 1
D / T / M
48 / 42 / 34 px
Interligne : 110 %
Interlettrage : .02em
Graisse : 900
Capitales
tp-h2
Zain — titre de niveau 2
D / T / M
40 / 34 / 28 px
Interligne : 110 %
Interlettrage : 0em
Graisse : 900
Capitales
tp-h3
Zain — titre de niveau 3
D / T / M
32 / 28 / 26 px
Interligne : 110 % · M 120 %
Interlettrage : 0em
Graisse : 900
Capitales
tp-h4
Zain — titre de niveau 4
D / T / M
28 / 24 / 24 px
Interligne : 110 %
Interlettrage : 0em
Graisse : 600
tp-h5
Extension à valider
Zain — titre de niveau 5
D / T / M
24 / 22 / 20 px
Interligne : 120 %
Interlettrage : 0em
Graisse : 600
tp-body-M
Poppins — Les bonnes idées prennent forme.
D / T / M
20 / 18 / 14 px
Interligne : 150 %
Interlettrage : 0em
Graisse : 500
tp-body
Poppins — Les bonnes idées prennent forme.
D / T / M
18 / 16 / 14 px
Interligne : 150 %
Interlettrage : 0em
Graisse : 400
tp-body-s
Poppins — Les bonnes idées prennent forme.
D / T / M
14 / 12 / 11 px
Interligne : 150 %
Interlettrage : 0em
Graisse : 400
tp-Body-XS
Poppins — Les bonnes idées prennent forme.
D / T / M
12 / 12 / 11 px
Interligne : 150 %
Interlettrage : 0em
Graisse : 400
tp-Body-XS-CAPS
Extension à valider
Poppins — Les bonnes idées prennent forme.
D / T / M
12 / 12 / 11 px
Interligne : 150 %
Interlettrage : .02em
Graisse : 700
Capitales
TP-SS-TITRE
Poppins — Les bonnes idées prennent forme.
D / T / M
16 / 16 / 16 px
Interligne : 150 %
Interlettrage : 0em
Graisse : 700
Capitales
Styles complémentaires
tp-display
Une idée forte.
D / T / M
80 / 42 / 34 px
Interligne : 110 %
Interlettrage : .02em
Graisse : 900
Capitales
tp-citation
« Donnons du sens à chaque idée. »
D / T / M
24 / 18 / 14 px
Interligne : 150 %
Interlettrage : 0em
Graisse : 500
tp-body-compact
Poppins — Les bonnes idées prennent forme.
D / T / M
16 / 16 / 16 px
Interligne : 150 %
Interlettrage : 0em
Graisse : 400
tp-body-medium
Poppins — Les bonnes idées prennent forme.
D / T / M
16 / 16 / 14 px
Interligne : 150 %
Interlettrage : 0em
Graisse : 500
tp-body-M-bold
Poppins — Les bonnes idées prennent forme.
D / T / M
20 / 18 / 14 px
Interligne : 150 %
Interlettrage : 0em
Graisse : 700
tp-Body-XS-bold
Poppins — Les bonnes idées prennent forme.
D / T / M
12 / 12 / 11 px
Interligne : 150 %
Interlettrage : 0em
Graisse : 700
tp-button
D / T / M
16 / 16 / 16 px
Interligne : 140 %
Interlettrage : 1px
Graisse : 700
Capitales
tp-nav
Le studio · Nos expertises
D / T / M
16 / 16 / 16 px
Interligne : 125 %
Interlettrage : 0em
Graisse : 500
tp-nav-dropdown
Communication & création
D / T / M
14 / 20 / 20 px
Interligne : 150 %
Interlettrage : 0em
Graisse : 900
Capitales
tp-label
Votre nom
D / T / M
13 / 12 / 11 px
Interligne : 150 %
Interlettrage : 0em
Graisse : 400
Capitales
tp-field
Parlez-nous de votre projet
D / T / M
14 / 16 / 14 px
Interligne : 150 %
Interlettrage : 0em
Graisse : 400
tp-accordion
Comment travaille le studio ?
D / T / M
18 / 18 / 16 px
Interligne : 120 % · M 100 %
Interlettrage : 0em
Graisse : 500
tp-filter
Tous les projets
D / T / M
16 / 16 / 14 px
Interligne : 150 %
Interlettrage : 0em
Graisse : 600
Une classe typographique définit l’apparence. La balise HTML est choisie séparément selon le rôle du contenu. Ici, les spécimens sont des paragraphes ; les titres organisent les rubriques.
Variables de couleurs
10 couleurs existantes. Les aplats utilisent les variables globales ; les spécimens « Aa » utilisent les classes de couleur correspondantes. Une classe color-* agit sur le texte.
#20E7B7
color-primary
Accent principal
Aa
#197278
color-secondary
Accent secondaire
Aa
#051923
color-body
Texte sombre
Aa
#EEE5E9
color-tertiary
Surface claire
Aa
#FFFFFF
color-white
Blanc
Aa
#053D2F
color-quaternary
Fond vert forêt
Aa
#011B16
color-quinary
Fond de formulaire
Aa
#031608
color-senary
Fond de champ
Aa
#EAFDF8
primary-10
Menthe pâle existante
Aa
#FF0000
color-error
Erreur
Aa
primary-10 est le nom de la teinte #EAFDF8 : ce n’est pas une opacité de 10 %. Les autres variantes pâles du kit CISIC ne sont pas créées pour Yzli.
Classes structurelles
Emplacements réservés. Les styles et leurs démonstrations seront définis lors de la prochaine étape.
Reset
Remises à zéro — convention el-reset à préciser.
Sections
Espacements et rythme — convention el-section à préciser.
Contenu centré
Largeurs et alignements — convention el-boxed à préciser.
Classes d’aspect
Emplacements réservés. Les styles et leurs démonstrations seront définis lors de la prochaine étape.
Ombres
Effets d’élévation et surfaces.
Fonds et dégradés
Fonds de marque et variantes.
Lignes et séparateurs
Traits, bordures et accents.
Styles spécifiques
Éléments propres au site Yzli.
Classes boutons
Emplacements réservés. Les styles et leurs démonstrations seront définis lors de la prochaine étape.
Bouton principal
Convention bt-primary — apparence et états à définir.
Variante claire
Convention bt-primary-white — à définir.
Lien tertiaire
Convention bt-tertiary — à définir.
Lien tertiaire clair
Convention bt-tertiary-white — à définir.
Alerte
Convention bt-alert — à définir.
Spécifications & nomenclature
Spec Variables ↗
Spec Classes ↗
Les variables et classes ci-dessus sont disponibles dans Elementor V4. Les emplacements vides ne créent aucune classe structurelle, d’aspect ou de bouton.