La typographie définit l'identité visuelle de l'interface. Elle guide l'attention, rythme la lecture et instaure une hiérarchie de l'information prévisible. Utilisez ces préréglages de manière cohérente pour garantir la clarté de l'ensemble du contenu.

Titres et accroches

k-heading-display-lg / md / sm — Titres d'affichage à fort impact utilisés pour rompre les schémas visuels et capter l'attention.

Utilisation :
• Affichage LG : accroche principale (par exemple, promesse majeure ou argument de vente).
• Affichage SM : titres promotionnels secondaires ou sous-titres de la page de destination.

k-heading-h1 — Le principal résultat ou la promesse de la page.
Utilisation : À utiliser une fois par page pour communiquer l’avantage ou l’objectif principal.

k-heading-h2 — Titres de section qui introduisent de nouveaux blocs d'informations.
Utilisation : À utiliser pour commencer les principales sections ou « chapitres » de votre récit (par exemple, les cadres d'avantages, les groupes de fonctionnalités).

k-heading-h3 — Sous-titres pour les points principaux.
Utilisation : Idéal pour les titres d’éléments de grille, les avantages ou le contenu imbriqué dans une section H2.

Interface utilisateur et étiquettes spécialisées

k-text-eyebrow — Petite étiquette en gras et en majuscules.
Utilisation : À placer au-dessus des balises H1 ou H2 pour catégoriser ou encadrer le contenu (ex. : « MASTERCLASS GRATUITE »).

k-text-badge — Indicateurs de pilule à contraste élevé.
Utilisation : À utiliser pour des étiquettes d’état rapides telles que « NOUVEAU », « VENTE » ou « EN DIRECT ».

k-text-label — Microtexte fonctionnel.
Utilisation : À placer au-dessus des champs de formulaire, des filtres ou des métadonnées telles que les dates.

k-text-body / k-text-body-l — Texte de contenu principal.

Usage:

• Corps L : Premier paragraphe d'introduction d'une section, servant de lien entre le titre et le contenu du corps du texte.

• Corps du texte : Paragraphe standard pour une lecture longue.

KrafterPRO utilise une hiérarchie de couleurs fonctionnelle où chaque couleur a une fonction précise. Les couleurs sont divisées en deux groupes : Information et Action.

Le cadre 60-30-10

- 60 % Surface principale — Votre fond principal (blanc, gris clair ou foncé). Il définit l'ambiance générale de l'interface utilisateur.

- 30 % de surface secondaire — Utilisée pour les fiches, les sauts de section et les regroupements structurels. Il doit s'agir d'une légère variation de la surface principale afin d'organiser visuellement le contenu.

- Couleur d'accentuation (10 %) : couleur de votre action. Réservée aux appels à l'action, elle crée un contraste visuel fort et attire immédiatement l'attention.

Utilisation des niveaux de gris

Gris foncés — À utiliser pour le corps du texte afin d'améliorer la lisibilité sans la rigidité du noir pur.

Gris moyens — À utiliser pour les étiquettes, les sourcils et les textes secondaires afin d'en réduire l'impact visuel.

Gris clairs — À utiliser pour les bordures, les séparateurs, les arrière-plans subtils et les calques de surface afin de séparer le contenu sans ajouter de bruit visuel.

Le système d'espacement KrafterPRO repose sur une philosophie axée sur la fluidité.
Chaque valeur utilise la fonction clamp() pour une mise à l'échelle mathématique sur toutes les tailles d'écran, garantissant ainsi une mise en page harmonieuse sur mobile et ordinateur (largeur maximale de 1280 px).

Micro-espacement (XS et S)

Objectif : Créer des unités visuelles cohérentes.
Stratégie :
• À utiliser pour les éléments qui doivent paraître liés.
• Les étiquettes, les badges, les icônes et les microtextes s’appuient sur ces valeurs pour éviter une impression de flottement.

Espacement structurel (M, L, XL)

Objectif : Créer une narration fluide et un rythme de mise en page harmonieux.
Stratégie :
• Utiliser M pour tous les espaces horizontaux et l’espacement structurel.
• Utiliser L ou XL pour séparer les groupes de contenu importants, tels que les articles ou les témoignages.
• Ces dimensions permettent au lecteur de distinguer clairement les idées.

Rembourrage de section (2XL et 3XL)

Objectif : Instaurer une image d’autorité, de luxe et d’espace visuel aéré.
Stratégie :
• 3XL → Sections principales, mises en avant importantes, introductions aux offres haut de gamme.
• 2XL → Espacement vertical standard entre les principaux chapitres de vos pages de destination.
• Un espacement plus important inspire confiance et valorise le contenu.

Largeur des lignes et flux de lecture :
La largeur de votre contenu influence la façon dont les utilisateurs lisent, traitent l’information et restent concentrés. Utilisez la largeur des lignes de manière réfléchie pour guider l’attention et créer un rythme visuel régulier sur la page.

Ligne de texte étroite — 800 px.
Objectif : Lecture de textes longs.
Utilisation : Idéal pour les lettres de vente, les pages VSL et les contenus narratifs. Des lignes plus courtes améliorent la compréhension et réduisent la fatigue oculaire, incitant ainsi les lecteurs à lire des passages plus longs.

Ligne de texte large — 1000 px.
Objectif : Approfondissement de l’information.
Utilisation : Idéale pour la documentation, les explications de fonctionnalités et les blocs de texte détaillés nécessitant plus d’espace. Assez étroite pour maintenir l’attention au centre tout en laissant respirer un contenu plus complexe.

Ligne standard — 1280 px.
Objectif : Largeur de mise en page par défaut.
Utilisation : Idéale pour les mises en page avec encart, les structures à deux colonnes, les grilles de fonctionnalités à trois colonnes, les témoignages et le contenu général du site. Elle permet de créer la mise en page équilibrée moderne que l’on retrouve sur la plupart des sites web SaaS haut de gamme.

Ligne de contenu large — 1440 px et plus.
Objectif : Narration visuelle percutante.
Utilisation : Présentation de produits, images grand format, galeries étendues et sections d’affichage immersives. Idéal lorsque les visuels doivent occuper tout l’écran et susciter une forte émotion.

Utilisation en pleine largeur
 : expérience visuelle immersive.
Réservé aux bannières de logo, aux diaporamas, aux révélations d’images et aux sections avec fond perdu. Ceci crée un contraste avec les lignes de contenu plus étroites et renforce le rythme visuel.

Les boutons sont des éléments clés. Ils orientent l'utilisateur, favorisent les conversions et indiquent visuellement la priorité. Leur impact dépend non seulement de la couleur, mais aussi de la maîtrise des nuances de gris, fondement d'une conception d'interface utilisateur de qualité. Utilisez-les à bon escient et de manière cohérente.

k-button-primary —
Objectif de l'action principale : L'action principale que vous souhaitez que les utilisateurs effectuent.
Exemples : « Rejoignez-nous », « Acheter maintenant », « Commencer ».

Bonnes pratiques :
• Utilisez un bouton principal par vue pour une navigation intuitive.
• Assurez un contraste marqué entre le bouton et son arrière-plan : la maîtrise des nuances de gris est essentielle. Les surfaces claires nécessitent des couleurs vives ; les surfaces sombres, un accent lumineux et contrasté.
• Associez-le à la micro-interaction de balayage lumineux pour dynamiser l’interaction et susciter une curiosité subtile.
• Utilisez des verbes d’action pour renforcer l’intention.

k-button-secondaire — Action secondaire

Objectif : Actions de soutien importantes mais non prioritaires.

Exemples : « En savoir plus », « Voir la galerie », « Lire les détails ».

Meilleures pratiques :

• À utiliser lorsque l'utilisateur a besoin d'un autre chemin ou d'un contexte supplémentaire avant de valider.

• Fonctionne particulièrement bien en contour, en remplissage doux ou en style fantôme — c'est là que les tons neutres et les gris excellent.

• Toujours se positionner après l'action principale afin de maintenir la hiérarchie.

Conseils relatifs aux niveaux de gris pour les boutons principaux :
• Sur fond clair, utilisez des tons neutres foncés autour du bouton (bordures, zones de texte) pour le faire ressortir davantage.
• Sur fond foncé, évitez les ombres trop marquées derrière le bouton ; utilisez des nuances de gris plus douces pour créer de la profondeur sans masquer la couleur de l’action.
• Ne placez jamais un bouton d’appel à l’action principal sur une surface gris moyen ; cela diminue l’urgence visuelle.

Votre contenu va ici. Modifiez ou supprimez ce texte en ligne ou dans les paramètres Contenu du module. Vous pouvez également styliser chaque aspect de ce contenu dans les paramètres Design du module et même appliquer du CSS personnalisé à ce texte dans les paramètres Avancés du module.