# Système de design Kajabi Sage ## Kajabi Sage Aperçu de l’interface du système de design Choisissez un cours fictif, examinez un lien ou un message, puis copiez à l’identique le contenu visible, avec une solution de secours manuelle. ## Kajabi Sage Référence de conception du système de design Documentation publique des composants et de la typographie de Sage, ainsi que la feuille de style Pine par défaut/en mode clair actuellement chargée par la documentation. Le tableau typographique publié de Sage et les alias Pine plus récents sont des références distinctes ; ne les considérez pas comme identiques sans le signaler. ### Rôles de couleur Pine actuels | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --pine-color-primary | var(--pine-color-grey-900) | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | | --pine-color-primary-hover | var(--pine-color-grey-950) | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | | --pine-color-text | var(--pine-color-grey-900) | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | | --pine-color-text-primary | var(--pine-color-white) | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | | --pine-color-background-app | var(--pine-color-grey-100) | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | | --pine-color-background-container | var(--pine-color-white) | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | | --pine-color-border | var(--pine-color-grey-300) | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | ### Couleurs primitives Pine actuelles | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --pine-color-grey-100 | #f8f8f8 | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | | --pine-color-grey-300 | #d2d1d1 | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | | --pine-color-grey-900 | #343332 | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | | --pine-color-grey-950 | #1a1a19 | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | | --pine-color-white | #ffffff | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | ### Dimensions et rayons Pine actuels | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --pine-dimension-xs | var(--pine-dimension-100) | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | | --pine-dimension-sm | var(--pine-dimension-200) | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | | --pine-dimension-md | var(--pine-dimension-300) | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | | --pine-dimension-lg | var(--pine-dimension-400) | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | | --pine-dimension-100 | 8px | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | | --pine-dimension-200 | 16px | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | | --pine-dimension-300 | 24px | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | | --pine-dimension-400 | 32px | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | | --pine-border-radius-md | var(--pine-dimension-125) | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | | --pine-dimension-125 | 10px | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | | --pine-border-radius-full | 9999px | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | ### Entrée typographique Pine actuelle | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | --pine-font-family-body | var(--pine-font-family-inter) | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | | --pine-font-family-inter | "Inter", system-ui, "Segoe UI", "Roboto", "Ubuntu", sans-serif | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | | --pine-font-size-body-md | var(--pine-font-size-100) | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | | --pine-font-size-100 | 14px | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | | --pine-font-size-body-lg | var(--pine-font-size-116) | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | | --pine-font-size-116 | 16px | Instantané de la feuille de style Pine actuelle, par défaut/en mode clair, chargé par la documentation Sage. | ### Classes typographiques Sage publiées | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | t-sage-heading-1 | 40px / 48px; 700; -0.6px tracking | Spécification typographique de la documentation publiée. | | t-sage-heading-2 | 32px / 40px; 700; -0.5px | Spécification publiée des titres. | | t-sage-heading-3 | 28px / 32px; 700; -0.15px | Spécification publiée des titres. | | t-sage-heading-4 | 24px / 32px; 600; -0.15px | Spécification publiée des titres. | | t-sage-body | 16px / 24px; 400 | Spécification publiée du corps de texte. | | t-sage-body-small | 14px / 20px; 400 | Spécification typographique publiée. | | t-sage-body-xsmall | 12px / 16px; 400 | Spécification publiée du corps de texte en taille minimale. | | Body weight suffixes | -med 500 / -semi 600 / -bold 700 | À ajouter à la famille de classes du corps de texte. | ### Propriétés du composant Copy | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | SageCopyText.value | Required string | Texte à afficher et à copier. | | semibold | Boolean, default false | Mise en évidence de l’ensemble du bloc. | | SageCopyButton.fill_container | Boolean, default false | Bouton de copie sur toute la largeur du conteneur. | | SageCopyButton.borderless | Boolean example | Action de copie discrète. | | SageCopyTextCard.truncate_contents | true enables truncation | Limitez la longueur du contenu uniquement si le texte complet reste accessible. | ## Kajabi Sage Guide complet du système de design Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Système de design Kajabi Sage — Un panneau de partage pour le parcours d’un créateur ### Le cours reste identifiable à côté de son lien > Sage équipe les interfaces de Kajabi dédiées aux créateurs et au commerce de connaissances. Un panneau de partage de cours est un petit exemple de composition utile : il associe le contexte du produit, une longue valeur technique et une action dont l’échec peut être indépendant de celui de la page. L’exemple présente deux cours fictifs avec des illustrations de couverture originales, une URL destinée aux apprenants et un message prêt à envoyer par e-mail. Changer de cours met à jour les deux sorties. Changer le format de sortie modifie le texte qui sera copié, tandis que le cours sélectionné reste visible. Rien n’est publié ni envoyé ; le seul effet secondaire facultatif se produit lorsqu’une personne active le bouton du presse-papiers. Consultez la spécification associée ## Système de design Kajabi Sage : Pine et ses dépendances sont clairement délimités ### Une fonction de couleur CSS ne se contente pas toujours de rechercher une valeur hexadécimale Le fichier README actuel de Sage Assets indique que les jetons Pine sont chargés par l’application qui les utilise et ne sont pas inclus dans sage-assets. Il distingue sage-color(), qui renvoie une variable CSS sémantique, de sage-color-hex(), qui lit les valeurs héritées pour les opérations de couleur Sass. Une fonction de couleur qui renvoie désormais var(...) ne peut pas être utilisée sans risque dans un calcul hexadécimal à la compilation. La documentation en ligne charge @kajabi-ui/styles/dist/pine/pine.css. Dans la racine par défaut / claire de cette feuille de style, le rôle principal renvoie à grey-900, tandis que l’exemple hexadécimal de l’ancien README est bleu. Le guide distingue ces deux faits : le premier correspond au rôle sémantique en vigueur, le second illustre une recherche hexadécimale héritée. Une nouvelle implémentation ne doit pas remplacer l’un par l’autre sur la base d’une simple supposition. Consultez la spécification associée ## Système de design Kajabi Sage : sobriété dans l’application, expressivité dans le contenu ### Associez les couleurs d’action à leur signification Les recommandations de Sage sur les couleurs préconisent de les utiliser pour identifier les interactions, les états sélectionnés et les retours d’information, plutôt que d’ajouter une personnalité arbitraire à l’interface. L’exemple conserve un cadre d’application neutre ; les illustrations des cours apportent la touche expressive. L’action de copie est ainsi facile à repérer sans attribuer une couleur d’état différente à chaque panneau. Le succès ne s’affiche qu’après une copie réussie dans le presse-papiers. Si l’accès au presse-papiers est bloqué, l’interface doit proposer une solution pratique de copie manuelle, et non un message de réussite vert. Le cours et le format de sortie sélectionnés ont leurs propres états de contrôle, indépendants du résultat de la dernière copie. Consultez la spécification associée ## Système de design Kajabi Sage : spécifications Sage publiées et alias de jetons actuels ### Le rôle typographique et la sémantique HTML restent indépendants Le tableau publié de Sage fournit les classes t-sage-heading et t-sage-body, avec des combinaisons précises de taille, de hauteur de ligne et de graisse. Il est utile pour reproduire les spécifications documentées. La feuille de style Pine plus récente expose également ses propres alias de corps de texte, notamment un rôle moyen de 14 pixels ; une intégration actuelle doit donc vérifier quelle couche utilise son composant. Appliquer une classe de style de titre à un élément ne modifie pas son niveau sémantique. Le nom du cours reste un titre, l’URL reste un contenu de formulaire et l’action de copie reste un bouton. L’aperçu reprend les styles de titre 32/40 et de lecture 16/24 publiés, avec une police système de remplacement ; il ne prétend pas que les fichiers de police sont intégrés. Consultez la spécification associée ## Système de design Kajabi Sage : texte à copier, bouton de copie et carte de texte à copier ### Choisissez la structure en fonction du contenu La documentation distingue le texte à copier en ligne, la carte en bloc et le bouton de copie. Le bloc est utile lorsqu’une étiquette et plusieurs lignes doivent rester regroupées. Un bouton peut occuper toute la largeur de son conteneur ou être affiché sans bordure ; une graisse semi-grasse permet d’accentuer un composant. L’exemple utilise une zone de texte en lecture seule pour le contenu actif. Il s’agit d’un choix d’implémentation native délibéré : le texte reste sélectionnable si l’accès au presse-papiers est indisponible, et le message multiligne est facile à lire. La valeur correspond exactement au contenu transmis au navigateur, sans étiquette supplémentaire invisible ni identifiant de cours obsolète. - Le texte à copier en ligne convient à une courte valeur unique placée à côté d’un autre texte. - Une carte de copie regroupe les lignes associées dans un espace suffisamment large pour les examiner. - Un bouton distinct rend l’action explicite lorsque la valeur est longue ou multiligne. Consultez la spécification associée ## Système de design Kajabi Sage : les liens longs ne doivent pas déborder du panneau ### Une composition sur deux colonnes qui devient linéaire Dans l’exemple pour ordinateur, un volet de sélection des cours côtoie le cours actif et les commandes de partage. Sur un petit écran, le volet devient une rangée horizontale de deux cartes, suivie du panneau de partage. Le contenu du champ s’adapte à la largeur de son conteneur ; le bouton reste visible en dessous. Les recommandations officielles sur le texte à copier préconisent une largeur maximale locale et proposent la troncature pour le contenu des cartes. Cet exemple privilégie le retour à la ligne et la sélection manuelle plutôt que de masquer une partie importante de l’URL. Les espacements suivent les valeurs Pine vérifiées de 8/16/24/32, tandis que le ratio des deux colonnes et le point de rupture relèvent des choix de l’application. Consultez la spécification associée ## Système de design Kajabi Sage : un exemple public complet et une solution native présentée sans détour ### Ne copiez qu’après activation de l’action par l’utilisateur La configuration autonome charge les jetons Pine publics et fournit son propre HTML ainsi que son gestionnaire du presse-papiers. Elle fonctionne sans compte de package Sage. L’exemple Rails natif est présenté séparément comme une composition destinée à une application Sage existante ; il ne prétend pas qu’un simple helper copié-colle installe le système. Sage Assets indique GitHub Packages comme registre de publication. Les équipes qui utilisent cette méthode doivent se servir de l’accès approuvé à leur registre et charger la couche Pine externe avant d’utiliser des variables de couleur sémantiques. La documentation signale également des restrictions liées au domaine des polices ; utiliser une police système de remplacement est donc plus honnête que de supposer silencieusement que les polices de la marque ont bien été chargées. 1. Ouvrez l’exemple autonome depuis localhost ou HTTPS, puis sélectionnez un cours et un format de contenu. 2. Activez la copie ; n’indiquez qu’elle a réussi qu’après la résolution de la promesse du presse-papiers. Sinon, sélectionnez le texte pour le copier manuellement. 3. Changez de cours ou de format et effacez l’ancien état de copie afin qu’il ne décrive jamais un contenu obsolète. Consultez la spécification associée ## Système de design Kajabi Sage : exemples de composants ### Exemple interactif autonome complet Enregistrez le document complet sous index.html et ouvrez-le dans un navigateur. Interprétation native et indépendante de HTML de l’anatomie de Sage Copy Text, des spécifications typographiques publiées et des valeurs Pine claires/par défaut en vigueur. Aucun runtime Sage ni lot de polices propriétaire. ``` Course sharing — Sage interpretation
CREATOR WORKSPACELocal sharing specimen

Give your course a clear invitation.

Choose a sample course and prepare the exact text to share.

Studio Notes

A fictional course about building a daily creative practice.

Independent Sage interpretation using verified Pine light-theme colors and dimensions. Original course covers; system-font fallback. No course is published and no message is sent.

``` Référence du code - Les tentatives de copie utilisent le presse-papiers du navigateur API et proposent une solution de copie manuelle. Les cours illustrés sont originaux ; les composants natifs Rails CopyText sont documentés séparément. ### Interaction de copie complète avec gestion des échecs Le texte copié reste sélectionnable si les autorisations du navigateur ou le contexte d’intégration empêchent l’écriture dans le presse-papiers. ``` Share a sample course link

Share a sample course link

This is a fictional course URL.

``` Référence du code - La promesse du presse-papiers doit être résolue avant d’afficher « Copié ». - La valeur affichée et la valeur copiée sont identiques. - Il s’agit d’une implémentation indépendante utilisant les jetons Pine publiés, et non d’un API du presse-papiers Sage fabriqué. ### Anatomie native de Sage Rails Copy Utilisez les helpers Rails documentés dans une application Sage Rails déjà configurée. ```

Course link

<%= sage_component SageCopyTextCard, {} do %>

Course: Studio Notes

https://example.com/courses/studio-notes

<% end %> <%= sage_component SageCopyButton, { value: "https://example.com/courses/studio-notes", semibold: true, fill_container: true } %> ``` Référence du code - Les helpers nécessitent l’intégration Sage Rails, des ressources et du système JavaScript déjà en place. - Utilisez le semi-gras pour l’ensemble du composant plutôt que d’ajouter une surcharge générale en gras. ## Configuration de l’agent du système de design Kajabi Sage ### Point de départ de l’implémentation Implémentation complète et autonome des jetons publics ; enregistrez-la dans un fichier HTML et servez-la sur localhost ou via HTTPS pour activer le presse-papiers. Elle ne charge pas les composants Sage Rails/React. Les ressources natives Sage sont distribuées via le registre GitHub Packages, et le README actuel des ressources indique que les jetons Pine doivent être chargés séparément. ``` Share a sample course link

Share a sample course link

This is a fictional course URL.

``` ### Un prompt pour votre projet ``` Créez un panneau de partage de cours Kajabi Sage avec une sélection explicite du cours et un contenu à copier. Préservez la distinction entre la typographie Sage publiée et la couche de jetons Pine chargée séparément. Gardez le contenu exact visible, n’indiquez la réussite de la copie qu’une fois celle-ci effectuée et proposez la sélection manuelle si elle est bloquée. N’utilisez aucun cours, client ou système de publication réel. ``` ## Sources et portée du système de design Kajabi Sage Guide indépendant OpenDesign. Les cours et les illustrations de couverture sont originaux. L’aperçu utilise HTML natif et des références visuelles documentées, tandis que les exemples Rails nécessitent une intégration Sage existante et autorisée. Aucun contenu n’est publié ni envoyé. - Présentation de Sage Produits pour créateurs, Rails et React. - Spécifications typographiques Tailles et graisses des classes publiées. - Composants de copie Anatomie, propriétés Rails et recommandations de troncature. - Recommandations sur les couleurs Utilisation des couleurs pour les interactions et les retours d’état. - Dépendance aux ressources Sage Jetons Pine externes et références hexadécimales héritées. - Métadonnées du package de ressources Entrée CSS et distribution via GitHub Packages. - Feuille de style Pine actuelle Alias et valeurs des jetons par défaut/clair. ## Ressources associées au système de design Kajabi Sage ### Kiwi Orbit Un guide Orbit axé sur le voyage, avec les couleurs et espacements réels du produit, des choix de bagages natifs, un récapitulatif de prix cohérent et un parcours complet de vérification en local. ### Maersk système de design Découvrez le langage d’interface opérationnel de Maersk à travers les rôles du thème clair, les échelles de titres et de texte, les rayons imbriqués et la gestion des identifiants. Un exemple de recherche d’expédition montre la correspondance exacte des références et un historique des événements accessible, sans prétendre accéder aux données logistiques en direct. ### Microsoft Fluent 2 Créez un espace de travail Fluent UI React v9 avec de véritables tokens sémantiques, les échelles typographiques et d’espacement Web, des onglets contrôlés et une boîte de dialogue d’accès validée. Comparez les valeurs du thème, examinez l’anatomie des composants et essayez une interaction locale avant d’utiliser l’exemple complet React. - [Référence de mise en œuvre](https://sage.kajabi.com/pages/component/copy_text) - [Source](https://cdn.jsdelivr.net/npm/@kajabi-ui/styles@latest/dist/pine/pine.css) - [Source](https://sage.kajabi.com/pages/foundations/typography) - [Source](https://sage.kajabi.com/pages/component/copy_text) - [Consultez la spécification associée](https://sage.kajabi.com/pages/index) - [Consultez la spécification associée](https://raw.githubusercontent.com/Kajabi/sage-lib/develop/packages/sage-assets/README.md) - [Consultez la spécification associée](https://sage.kajabi.com/pages/foundations/color) - [Consultez la spécification associée](https://sage.kajabi.com/pages/foundations/typography) - [Consultez la spécification associée](https://sage.kajabi.com/pages/component/copy_text) - [Consultez la spécification associée](https://raw.githubusercontent.com/Kajabi/sage-lib/develop/packages/sage-assets/package.json) - [Référence du code](https://sage.kajabi.com/pages/component/copy_text) - [Présentation de Sage Produits pour créateurs, Rails et React.](https://sage.kajabi.com/pages/index) - [Spécifications typographiques Tailles et graisses des classes publiées.](https://sage.kajabi.com/pages/foundations/typography) - [Composants de copie Anatomie, propriétés Rails et recommandations de troncature.](https://sage.kajabi.com/pages/component/copy_text) - [Recommandations sur les couleurs Utilisation des couleurs pour les interactions et les retours d’état.](https://sage.kajabi.com/pages/foundations/color) - [Dépendance aux ressources Sage Jetons Pine externes et références hexadécimales héritées.](https://raw.githubusercontent.com/Kajabi/sage-lib/develop/packages/sage-assets/README.md) - [Métadonnées du package de ressources Entrée CSS et distribution via GitHub Packages.](https://raw.githubusercontent.com/Kajabi/sage-lib/develop/packages/sage-assets/package.json) - [Feuille de style Pine actuelle Alias et valeurs des jetons par défaut/clair.](https://cdn.jsdelivr.net/npm/@kajabi-ui/styles@latest/dist/pine/pine.css)