# Kajabi Sage-Designsystem ## Vorschau der Kajabi Sage-Designsystemoberfläche Wähle einen fiktiven Kurs aus, prüfe einen Link oder eine Nachricht und kopiere den exakt angezeigten Inhalt – mit manueller Alternative. ## Designreferenz für das Kajabi Sage-Designsystem Öffentliche Komponenten- und Schriftdokumentation von Sage sowie das Stylesheet von Pine für den Standard-/Hellmodus, das von der aktuellen Dokumentation tatsächlich geladen wird. Die veröffentlichte Sage-Schrifttabelle und die neueren Pine-Aliase sind getrennte Referenzen; behandle sie nicht stillschweigend als identisch. ### Aktuelle Pine-Farbrollen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --pine-color-primary | var(--pine-color-grey-900) | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | | --pine-color-primary-hover | var(--pine-color-grey-950) | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | | --pine-color-text | var(--pine-color-grey-900) | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | | --pine-color-text-primary | var(--pine-color-white) | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | | --pine-color-background-app | var(--pine-color-grey-100) | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | | --pine-color-background-container | var(--pine-color-white) | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | | --pine-color-border | var(--pine-color-grey-300) | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | ### Aktuelle Pine-Grundfarben | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --pine-color-grey-100 | #f8f8f8 | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | | --pine-color-grey-300 | #d2d1d1 | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | | --pine-color-grey-900 | #343332 | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | | --pine-color-grey-950 | #1a1a19 | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | | --pine-color-white | #ffffff | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | ### Aktuelle Pine-Abmessungen und -Eckenradien | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --pine-dimension-xs | var(--pine-dimension-100) | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | | --pine-dimension-sm | var(--pine-dimension-200) | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | | --pine-dimension-md | var(--pine-dimension-300) | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | | --pine-dimension-lg | var(--pine-dimension-400) | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | | --pine-dimension-100 | 8px | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | | --pine-dimension-200 | 16px | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | | --pine-dimension-300 | 24px | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | | --pine-dimension-400 | 32px | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | | --pine-border-radius-md | var(--pine-dimension-125) | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | | --pine-dimension-125 | 10px | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | | --pine-border-radius-full | 9999px | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | ### Aktueller Pine-Schriftsatz | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | --pine-font-family-body | var(--pine-font-family-inter) | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | | --pine-font-family-inter | "Inter", system-ui, "Segoe UI", "Roboto", "Ubuntu", sans-serif | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | | --pine-font-size-body-md | var(--pine-font-size-100) | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | | --pine-font-size-100 | 14px | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | | --pine-font-size-body-lg | var(--pine-font-size-116) | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | | --pine-font-size-116 | 16px | Aktueller Snapshot des Pine-Stylesheets für den Standard-/Hellmodus, geladen von den Sage-Dokumentationsseiten. | ### Veröffentlichte Sage-Schriftklassen | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | t-sage-heading-1 | 40px / 48px; 700; -0.6px tracking | Veröffentlichte Schriftspezifikation der Dokumentation. | | t-sage-heading-2 | 32px / 40px; 700; -0.5px | Veröffentlichte Überschriften-Spezifikation. | | t-sage-heading-3 | 28px / 32px; 700; -0.15px | Veröffentlichte Überschriften-Spezifikation. | | t-sage-heading-4 | 24px / 32px; 600; -0.15px | Veröffentlichte Überschriften-Spezifikation. | | t-sage-body | 16px / 24px; 400 | Veröffentlichte Fließtext-Spezifikation. | | t-sage-body-small | 14px / 20px; 400 | Veröffentlichte ergänzende Schriftspezifikation. | | t-sage-body-xsmall | 12px / 16px; 400 | Veröffentlichte Spezifikation für den kleinsten Fließtext. | | Body weight suffixes | -med 500 / -semi 600 / -bold 700 | Zur Fließtext-Klassenfamilie hinzufügen. | ### Eigenschaften der Kopierkomponente | Name / Regel | Wert / Konfiguration | Verwendung | | --- | --- | --- | | SageCopyText.value | Required string | Anzuzeigender und zu kopierender Text. | | semibold | Boolean, default false | Hervorhebung des gesamten Blocks. | | SageCopyButton.fill_container | Boolean, default false | Kopierschaltfläche über die gesamte Containerbreite. | | SageCopyButton.borderless | Boolean example | Kopieraktion mit geringer Hervorhebung. | | SageCopyTextCard.truncate_contents | true enables truncation | Lange Inhalte nur dann beschränken, wenn der vollständige Text weiterhin verfügbar ist. | ## Vollständiger Leitfaden zum Kajabi Sage-Designsystem Ein praktischer Leitfaden zur Auswahl, Anwendung und Überprüfung dieses Systems für ein echtes Interface. Umfassende Anleitung, Einstieg in die Implementierung und Links zu den Quellen. ## Kajabi Sage-Designsystem: Ein Freigabefenster für den Workflow von Kreativen ### Der Kurs bleibt neben seinem Link erkennbar > Sage wird in den Benutzeroberflächen von Kajabi für Kreative und den Wissenshandel eingesetzt. Ein Kursfreigabefenster ist eine nützliche kleine Komposition: Es verbindet Produktkontext, einen langen technischen Wert und eine Aktion, deren Erfolg unabhängig von der Seite scheitern kann. Das Beispiel bietet zwei fiktive Kurse mit eigens erstellten Titelbildern, einer Lernenden-URL und einer E-Mail-fertigen Nachricht. Beim Wechsel des Kurses werden beide Ausgaben aktualisiert. Beim Wechsel des Ausgabeformats ändert sich der zu kopierende Text, während der ausgewählte Kurs sichtbar bleibt. Es wird nichts veröffentlicht oder versendet; der einzige optionale Nebeneffekt tritt ein, wenn jemand die Schaltfläche für die Zwischenablage betätigt. Unterstützende Spezifikation lesen ## Kajabi Sage-Designsystem und Pine haben eine klar definierte Abhängigkeitsgrenze ### Eine CSS-Farbfunktion liefert nicht immer einen Hex-Wert In der aktuellen README von Sage Assets steht, dass Pine-Token von der einbindenden Anwendung geladen und nicht in sage-assets mitgeliefert werden. Sie unterscheidet sage-color(), das eine semantische CSS-Variable zurückgibt, von sage-color-hex(), das für Sass-Farboperationen ältere Werte ausliest. Eine Farbfunktion, die jetzt var(...) zurückgibt, kann nicht ohne Weiteres in eine Hex-Berechnung zur Kompilierzeit einfließen. Die aktuellen Dokumentationsseiten laden @kajabi-ui/styles/dist/pine/pine.css. In dessen Standard-/Hellmodus-Stamm wird die primäre Rolle über grey-900 aufgelöst, während das Hex-Beispiel in der älteren README blau ist. Der Leitfaden hält diese Fakten auseinander: Ersteres ist die aktuelle semantische Rolle, Letzteres veranschaulicht das Auslesen eines älteren Hex-Werts. Eine neue Implementierung darf das eine nicht ohne Prüfung durch das andere ersetzen. Unterstützende Spezifikation lesen ## Kajabi Sage-Designsystem: Zurückhaltung in der Anwendung, Ausdruck im Inhalt ### Aktionsfarben an ihre Bedeutung knüpfen Die Farbrichtlinien von Sage setzen Farbe ein, um Interaktionen, ausgewählte Zustände und Rückmeldungen kenntlich zu machen, statt der Benutzeroberfläche willkürlich einen eigenen Charakter zu verleihen. Das Beispiel hält den Anwendungsrahmen neutral; die Kursgrafiken sorgen für ausdrucksstarke Farben. So ist die Kopieraktion leicht zu finden, ohne jedes Panel in einen anderen Statusfarbton zu tauchen. Erfolg wird erst nach erfolgreichem Schreiben in die Zwischenablage gemeldet. Wird der Zugriff auf die Zwischenablage blockiert, sollte eine praktische Möglichkeit zum manuellen Kopieren angezeigt werden, keine grüne Erfolgsmeldung. Der ausgewählte Kurs und das ausgewählte Ausgabeformat haben eigene Steuerelementzustände, unabhängig vom Ergebnis des letzten Kopiervorgangs. Unterstützende Spezifikation lesen ## Kajabi Sage-Designsystem: Veröffentlichte Sage-Spezifikationen und aktuelle Token-Aliase ### Schriftrolle und HTML-Semantik bleiben unabhängig voneinander Die veröffentlichte Sage-Tabelle enthält die Klassen t-sage-heading und t-sage-body mit genau festgelegten Kombinationen aus Schriftgröße, Zeilenhöhe und Schriftstärke. Die Tabelle eignet sich zur Umsetzung dieser dokumentierten Spezifikation. Das neuere Pine-Stylesheet stellt außerdem eigene Fließtext-Aliase bereit, darunter eine mittlere Fließtextrolle mit 14 Pixeln. Bei einer aktuellen Integration sollte daher geprüft werden, welche Ebene die jeweilige Komponente verwendet. Wenn einem Element eine visuelle Überschriftenklasse zugewiesen wird, ändert sich dadurch nicht seine semantische Ebene. Der Kursname bleibt eine Überschrift, die URL bleibt Formularinhalt und die Kopieraktion bleibt eine Schaltfläche. Die Vorschau verwendet die veröffentlichte Sage-Überschrift im Format 32/40 und den Fließtext im Format 16/24 mit einer Systemschrift als Fallback. Sie erweckt nicht den Eindruck, dass Schriftdateien mitgeliefert werden. Unterstützende Spezifikation lesen ## Kajabi Sage-Designsystem: Text kopieren, Kopierschaltfläche und Textkopierkarte ### Komponentenstruktur nach Inhaltsform auswählen Die Dokumentation unterscheidet zwischen Inline-Kopiertext, einer Blockkarte und einer Kopierschaltfläche. Der Block eignet sich, wenn eine Beschriftung und mehrere Zeilen zusammenbleiben sollen. Eine Schaltfläche kann den gesamten Container ausfüllen oder ohne Rahmen dargestellt werden; mit Semibold lässt sich die Hervorhebung auf Komponentenebene umsetzen. Das Beispiel verwendet ein schreibgeschütztes Textarea-Feld für den aktuellen Inhalt. Diese native Umsetzung ist bewusst gewählt: Sie ermöglicht die Textauswahl, falls der Zugriff auf die Zwischenablage nicht verfügbar ist, und sorgt dafür, dass eine mehrzeilige E-Mail-Nachricht gut lesbar bleibt. Der Wert entspricht exakt dem an den Browser übergebenen Inhalt – ohne unsichtbare zusätzliche Beschriftung und ohne veraltete Kurskennung. - Inline-Kopiertext eignet sich für einen kurzen Einzelwert neben anderem Fließtext. - Eine Kopierkarte fasst zusammengehörige Zeilen zusammen und bietet genug Breite, um sie zu prüfen. - Eine separate Schaltfläche macht die Aktion deutlich, wenn der Wert lang ist oder mehrere Zeilen umfasst. Unterstützende Spezifikation lesen ## Kajabi Sage-Designsystem: Lange Links sollten das Panel nicht sprengen ### Eine zweispaltige Anordnung, die in eine Abfolge untereinander übergeht Im Desktop-Beispiel befindet sich neben dem aktiven Kurs eine Leiste zur Kursauswahl mit Teilen-Steuerelementen. Auf kleinen Bildschirmen wird die Leiste zu einer horizontalen Kartenreihe mit zwei Karten; das Teilen-Panel folgt darunter. Das Wertefeld passt sich der Breite seines Containers an; die Schaltfläche bleibt darunter sichtbar. Die offiziellen Hinweise zu Copy Text empfehlen eine lokale maximale Breite und bieten für Karteninhalte eine Kürzungsoption. Dieses Beispiel setzt stattdessen auf Zeilenumbruch und manuelle Auswahl, damit kein wichtiger Teil der URL verborgen bleibt. Die Abstände folgen den verifizierten Pine-Abstufungen 8/16/24/32; das Zweispaltenverhältnis und der Breakpoint sind anwendungsspezifische Entscheidungen. Unterstützende Spezifikation lesen ## Kajabi Sage Designsystem – vollständiges öffentliches Beispiel und ein transparenter nativer Weg ### Kopieren erst nach einer Aktion des Nutzers Die eigenständige Einrichtung lädt öffentliche Pine-Tokens und stellt ein eigenes HTML sowie eine Zwischenablage-Logik bereit. Sie funktioniert ohne Zugang zu einem Sage-Paketkonto. Das native Rails-Beispiel wird separat als Integration in eine bestehende Sage-Anwendung ausgewiesen; es wird nicht behauptet, dass ein einzelner eingefügter Helfer das System installiert. Sage Assets gibt GitHub Packages als Veröffentlichungs-Registry an. Teams, die diesen Weg nutzen, müssen den genehmigten Registry-Zugang verwenden und die externe Pine-Ebene laden, bevor sie auf semantische Farbvariablen zurückgreifen. In der Dokumentation werden außerdem Einschränkungen für Font-Domains erwähnt. Daher ist ein System-Fallback ehrlicher, als stillschweigend davon auszugehen, dass die Markenschriften erfolgreich geladen wurden. 1. Öffne das eigenständige Beispiel über localhost oder HTTPS und wähle einen Kurs sowie ein Ausgabeformat aus. 2. Kopiere den Text und melde den Erfolg erst, wenn das Clipboard-Promise aufgelöst wurde. Andernfalls wähle den Text zum manuellen Kopieren aus. 3. Ändere den Kurs oder das Format und setze den bisherigen Kopierstatus zurück, damit er sich nie auf einen veralteten Text bezieht. Unterstützende Spezifikation lesen ## Kajabi Sage Designsystem – Komponentenbeispiele ### Vollständige, eigenständige interaktive Demo Speichern Sie das vollständige Dokument als index.html und öffnen Sie es in einem Browser. Eigenständige Interpretation in nativem HTML, basierend auf dem Aufbau von Sage Copy Text, veröffentlichten Typografievorgaben und den aktuellen Pine-Werten für die Standard- und helle Darstellung. Keine Sage-Laufzeit und kein proprietäres Schriftpaket. ``` 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.

``` Code-Referenz - Kopierversuche verwenden die Browser-Zwischenablage API und bieten eine manuelle Kopiermöglichkeit als Fallback. Die dargestellten Kurse sind eigene Beispiele; native Rails-CopyText-Komponenten werden separat dokumentiert. ### Vollständige Kopierfunktion mit Fehlerbehandlung Der kopierte Text bleibt auswählbar, falls Browserberechtigungen oder der Einbettungskontext das Schreiben in die Zwischenablage verhindern. ``` Share a sample course link

Share a sample course link

This is a fictional course URL.

``` Code-Referenz - „Kopiert“ wird erst angezeigt, wenn das Clipboard-Promise erfolgreich aufgelöst wurde. - Der sichtbare Text und der kopierte Text sind identisch. - Dies ist eine eigenständige Implementierung mit veröffentlichten Pine-Tokens, keine erfundene Sage-Zwischenablage-API. ### Native Sage-Rails-Copy-Text-Anatomie Verwende die dokumentierten Rails-Helfer in einer bereits konfigurierten Sage-Rails-Anwendung. ```

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 } %> ``` Code-Referenz - Die Helfer setzen eine bestehende Integration von Sage Rails, Assets und System-JavaScript voraus. - Verwende für die gesamte Komponente Semibold, statt eine pauschale Bold-Überschreibung hinzuzufügen. ## Kajabi Sage Designsystem – Einrichtung für AI Agents ### Ausgangspunkt für die Implementierung Vollständige eigenständige Implementierung mit öffentlichen Tokens. Speichere sie als Datei HTML und stelle sie für die Unterstützung der Zwischenablage über localhost oder HTTPS bereit. Lädt keine Sage-Rails-/React-Komponenten. Native Sage-Assets werden über die GitHub-Packages-Registry verteilt; laut aktueller Asset-README müssen Pine-Tokens separat geladen werden. ``` Share a sample course link

Share a sample course link

This is a fictional course URL.

``` ### Ein Prompt für dein Projekt ``` Erstelle ein Kajabi Sage-Panel zum Teilen von Kursen mit expliziter Kursauswahl und kopierbarem Text. Unterscheide klar zwischen veröffentlichter Sage-Typografie und der extern geladenen Pine-Token-Ebene. Lass den genauen Text sichtbar, zeige den Erfolg beim Kopieren erst nach erfolgreichem Abschluss an und biete bei einer Blockierung die manuelle Auswahl an. Verwende keine echten Kurse, Kunden oder Veröffentlichungsintegrationen. ``` ## Kajabi Sage Designsystem – Quellen und Geltungsbereich Eigenständiger Leitfaden zu OpenDesign. Die Kurse und Titelillustrationen sind eigene Beispiele. Die Vorschau verwendet natives HTML und dokumentierte visuelle Referenzen; für Rails-Beispiele ist eine bestehende, autorisierte Sage-Integration erforderlich. Es werden keine Inhalte veröffentlicht oder versendet. - Sage-Übersicht Creator-Produkte, Rails und React. - Typospezifikation Veröffentlichte Schriftgrößen und Schriftschnitte. - Kopierkomponenten Anatomie, Rails-Props und Hinweise zum Kürzen. - Farbrichtlinien Einsatz und Verwendung für Interaktionen und Rückmeldungen. - Sage-Asset-Abhängigkeit Externe Pine-Tokens und nachgeschlagene Hex-Werte für ältere Varianten. - Metadaten des Asset-Pakets CSS-Einstiegspunkt und Verteilung über GitHub Packages. - Aktives Pine-Stylesheet Standard-/Light-Token-Aliase und -Werte. ## Kajabi Sage Designsystem – weiterführende Ressourcen ### Kiwi Orbit Ein auf Reisen ausgerichteter Orbit-Leitfaden mit echten Produktfarben und Abständen, nativen Gepäckoptionen, einer einheitlichen Preisübersicht und einem vollständigen lokalen Prüfablauf. ### Maersk Designsystem Untersuchen Sie die Sprache operativer Benutzeroberflächen von Maersk anhand realer Rollen im hellen Theme, Schriftgrößen für Überschriften und Fließtext, abgestuften Eckenradien und der Behandlung von Kennungen. Eine beispielhafte Sendungssuche veranschaulicht den exakten Abgleich von Referenzen und einen barrierefreien Ereignisverlauf, ohne Zugriff auf Live-Logistikdaten zu behaupten. ### Microsoft Fluent 2 Richte einen Fluent-UI-React-v9-Arbeitsbereich mit echten semantischen Tokens, den Web-Typografie- und Abstandsabstufungen, gesteuerten Tabs und einem validierten Zugriffsdialog ein. Vergleiche die Theme-Werte, untersuche den Aufbau der Komponenten und teste eine lokale Interaktion, bevor du das vollständige React-Beispiel verwendest. - [Implementierungsreferenz](https://sage.kajabi.com/pages/component/copy_text) - [Quelle](https://cdn.jsdelivr.net/npm/@kajabi-ui/styles@latest/dist/pine/pine.css) - [Quelle](https://sage.kajabi.com/pages/foundations/typography) - [Quelle](https://sage.kajabi.com/pages/component/copy_text) - [Unterstützende Spezifikation lesen](https://sage.kajabi.com/pages/index) - [Unterstützende Spezifikation lesen](https://raw.githubusercontent.com/Kajabi/sage-lib/develop/packages/sage-assets/README.md) - [Unterstützende Spezifikation lesen](https://sage.kajabi.com/pages/foundations/color) - [Unterstützende Spezifikation lesen](https://sage.kajabi.com/pages/foundations/typography) - [Unterstützende Spezifikation lesen](https://sage.kajabi.com/pages/component/copy_text) - [Unterstützende Spezifikation lesen](https://raw.githubusercontent.com/Kajabi/sage-lib/develop/packages/sage-assets/package.json) - [Code-Referenz](https://sage.kajabi.com/pages/component/copy_text) - [Sage-Übersicht Creator-Produkte, Rails und React.](https://sage.kajabi.com/pages/index) - [Typospezifikation Veröffentlichte Schriftgrößen und Schriftschnitte.](https://sage.kajabi.com/pages/foundations/typography) - [Kopierkomponenten Anatomie, Rails-Props und Hinweise zum Kürzen.](https://sage.kajabi.com/pages/component/copy_text) - [Farbrichtlinien Einsatz und Verwendung für Interaktionen und Rückmeldungen.](https://sage.kajabi.com/pages/foundations/color) - [Sage-Asset-Abhängigkeit Externe Pine-Tokens und nachgeschlagene Hex-Werte für ältere Varianten.](https://raw.githubusercontent.com/Kajabi/sage-lib/develop/packages/sage-assets/README.md) - [Metadaten des Asset-Pakets CSS-Einstiegspunkt und Verteilung über GitHub Packages.](https://raw.githubusercontent.com/Kajabi/sage-lib/develop/packages/sage-assets/package.json) - [Aktives Pine-Stylesheet Standard-/Light-Token-Aliase und -Werte.](https://cdn.jsdelivr.net/npm/@kajabi-ui/styles@latest/dist/pine/pine.css)