# Kajabi Sage デザインシステム

## Kajabi Sage デザインシステムのインターフェースプレビュー

架空のコースを選び、リンクやメッセージを確認して、画面に表示された内容をそのままコピーできます。手動でコピーする方法も用意しています。

## Kajabi Sage デザインシステムのデザインリファレンス

Sage の公開コンポーネントおよびタイポグラフィのドキュメントと、現在のドキュメントで実際に読み込まれている Pine のデフォルト／ライト用スタイルシート。公開済みの Sage のタイプ表と、新しい Pine のエイリアスは別々のリファレンスです。同一のものとして暗黙に扱わないでください。

### Pine の現在のカラー役割

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --pine-color-primary | var(--pine-color-grey-900) | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
| --pine-color-primary-hover | var(--pine-color-grey-950) | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
| --pine-color-text | var(--pine-color-grey-900) | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
| --pine-color-text-primary | var(--pine-color-white) | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
| --pine-color-background-app | var(--pine-color-grey-100) | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
| --pine-color-background-container | var(--pine-color-white) | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
| --pine-color-border | var(--pine-color-grey-300) | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
### Pine の現在のプリミティブカラー

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --pine-color-grey-100 | #f8f8f8 | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
| --pine-color-grey-300 | #d2d1d1 | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
| --pine-color-grey-900 | #343332 | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
| --pine-color-grey-950 | #1a1a19 | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
| --pine-color-white | #ffffff | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
### Pine の現在の寸法と角丸

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --pine-dimension-xs | var(--pine-dimension-100) | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
| --pine-dimension-sm | var(--pine-dimension-200) | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
| --pine-dimension-md | var(--pine-dimension-300) | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
| --pine-dimension-lg | var(--pine-dimension-400) | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
| --pine-dimension-100 | 8px | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
| --pine-dimension-200 | 16px | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
| --pine-dimension-300 | 24px | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
| --pine-dimension-400 | 32px | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
| --pine-border-radius-md | var(--pine-dimension-125) | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
| --pine-dimension-125 | 10px | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
| --pine-border-radius-full | 9999px | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
### Pine のタイプ項目

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --pine-font-family-body | var(--pine-font-family-inter) | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
| --pine-font-family-inter | "Inter", system-ui, "Segoe UI", "Roboto", "Ubuntu", sans-serif | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
| --pine-font-size-body-md | var(--pine-font-size-100) | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
| --pine-font-size-100 | 14px | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
| --pine-font-size-body-lg | var(--pine-font-size-116) | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
| --pine-font-size-116 | 16px | Sage のドキュメントで読み込まれる、現在の Pine のデフォルト／ライト用スタイルシートのスナップショット。 |
### 公開済みの Sage のタイプクラス

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| t-sage-heading-1 | 40px / 48px; 700; -0.6px tracking | 公開ドキュメントのタイプ仕様。 |
| t-sage-heading-2 | 32px / 40px; 700; -0.5px | 公開済みの見出し仕様。 |
| t-sage-heading-3 | 28px / 32px; 700; -0.15px | 公開済みの見出し仕様。 |
| t-sage-heading-4 | 24px / 32px; 600; -0.15px | 公開済みの見出し仕様。 |
| t-sage-body | 16px / 24px; 400 | 公開済みの本文仕様。 |
| t-sage-body-small | 14px / 20px; 400 | タイプ仕様を公開しました。 |
| t-sage-body-xsmall | 12px / 16px; 400 | 公開済みの最小サイズの本文仕様。 |
| Body weight suffixes | -med 500 / -semi 600 / -bold 700 | 本文クラスのファミリーに追加します。 |
### コンポーネントのプロパティをコピー

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| SageCopyText.value | Required string | 表示およびコピーするテキスト。 |
| semibold | Boolean, default false | ブロック全体を強調します。 |
| SageCopyButton.fill_container | Boolean, default false | コンテナ幅いっぱいに広がるコピー用ボタン。 |
| SageCopyButton.borderless | Boolean example | 控えめなコピー操作。 |
| SageCopyTextCard.truncate_contents | true enables truncation | 全文を引き続き利用できる場合に限り、長いコンテンツの幅を制限します。 |
## Kajabi Sage デザインシステム完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

## Kajabi Sage デザインシステム：クリエイターのワークフロー向け共有パネル

### リンクの横にコース情報を表示し、コースを見分けやすくする

> Sage は、Kajabi のクリエイター向けインターフェースとナレッジコマースのインターフェースを支えています。コースの情報、長い技術的な値、ページ表示とは独立して失敗する可能性があるアクションを組み合わせる共有パネルは、小規模な構成例として適しています。このサンプルでは、オリジナルのカバーアートを使った架空のコースを2つ用意し、学習者向け URL とメールに使えるメッセージを示します。

コースを切り替えると、2つの出力がどちらも更新されます。出力形式を切り替えるとコピーされるテキストが変わりますが、選択中のコースは引き続き表示されます。公開や送信は行われません。任意の副作用が起きるのは、ユーザーがクリップボードボタンを操作したときだけです。

関連する仕様を確認する

## Kajabi Sage デザインシステムと Pine の依存関係の境界を明確にする

### CSS のカラー関数は、常に 16 進数カラーの検索で置き換えられるとは限りません。

Sage Assetsの現在のREADMEには、Pineのトークンは利用側のアプリケーションによって読み込まれ、sage-assetsにはバンドルされないと記載されています。また、セマンティックなCSS変数を返すsage-color()と、Sassの色演算用にレガシー値を読み込むsage-color-hex()が区別されています。現在var(...)を返す色関数を、コンパイル時の16進数計算に安全に渡すことはできません。

現在のドキュメントでは@kajabi-ui/styles/dist/pine/pine.cssを読み込んでいます。このスタイルシートのデフォルト／ライトのルートでは、プライマリの役割はgrey-900を参照します。一方、以前のREADMEにある16進数の例は青です。このガイドでは、前者を現在のセマンティックな役割、後者をレガシーな16進数参照の例として、両者を区別しています。新しい実装では、根拠なく一方を他方に置き換えないでください。

関連する仕様を確認する

## Kajabi Sage デザインシステムは抑制的に、コンテンツは表情豊かに

### アクションカラーは意味に結び付ける

Sageのカラーガイドラインでは、インターフェースに任意の個性を加えるのではなく、操作、選択状態、フィードバックを示すために色を使います。この例ではアプリケーションの枠組みをニュートラルに保ち、表情豊かな色はコースのアートワークに任せています。これにより、すべてのパネルを異なるステータスカラーで塗り分けることなく、コピー操作を見つけやすくしています。

成功は、クリップボードへの書き込みが成功した場合にのみ示します。クリップボードへのアクセスがブロックされた場合は、緑色の成功メッセージではなく、手動コピーに切り替えられる実用的な状態を表示します。選択中のコースと出力形式にはそれぞれ独立したコントロール状態があり、直近のコピー結果には左右されません。

関連する仕様を確認する

## Kajabi Sage デザインシステム 公開済みのSage仕様と現在のトークンエイリアス

### 文字の役割とHTMLのセマンティクスは独立させる

公開されているSageの表には、サイズ、行の高さ、ウェイトの組み合わせが正確に定義されたt-sage-headingおよびt-sage-bodyクラスが掲載されています。この表は、文書化された仕様を再現する際に役立ちます。新しいPineスタイルシートには、14ピクセルのミディアムウェイトの本文スタイルなど、独自の本文エイリアスもあります。そのため、現在の統合では、コンポーネントがどのレイヤーを使用するか確認してください。

要素に見出し用のスタイルクラスを適用しても、その要素のセマンティックな階層は変わりません。コース名は見出し、URLはフォームの内容、コピー操作はボタンのままです。プレビューでは公開済みのSageの32/40見出しと16/24本文のスタイルをシステムフォールバックと組み合わせて使用しており、フォントファイルがバンドルされているかのようには扱っていません。

関連する仕様を確認する

## Kajabi Sage デザインシステムのコピー用テキスト、コピー ボタン、コピー用テキストカード

### コンテンツの形に合わせて構成を選ぶ

ドキュメントでは、インラインのコピー用テキスト、ブロックカード、コピー ボタンを区別しています。ラベルと複数行の内容をひとまとまりにするには、ブロックが適しています。ボタンはコンテナ幅いっぱいにすることも、枠線なしで表示することもでき、セミボールドはコンポーネント単位で強調を加えます。

この例では、現在のペイロードにreadonly textareaを使用しています。これは意図的なネイティブ実装です。クリップボードにアクセスできない場合でもテキストを選択でき、複数行のメールメッセージも読みやすく保てます。値はブラウザーに渡されるペイロードそのもので、見えない余分なラベルや古いコースIDは含まれません。

- 短い単一の値をほかの文章の横に置く場合は、インラインのコピー用テキストが適しています。

- コピー用カードは、関連する複数行の内容をまとめ、確認しやすい幅を確保します。

- 値が長い場合や複数行の場合は、ボタンを分けることで操作を明確にできます。

関連する仕様を確認する

## Kajabi Sage デザインシステム 長いリンクもパネル内に収める

### 2カラム構成から縦並びへ

デスクトップ表示では、コース選択用のサイドレールの隣に、選択中のコースと共有コントロールを配置しています。ビューポートが小さい場合、サイドレールは横並びの2枚のカードになり、その下に共有パネルが続きます。値のフィールドはコンテナ内で折り返し、ボタンはその下に表示されます。

公式のCopy Textガイドラインでは、ローカルな最大幅の設定を推奨し、カード内の内容を省略表示する方法も紹介しています。この例では、URLの重要な部分を隠さないよう、省略表示ではなく折り返しと手動選択を採用しています。パディングには確認済みのPineの8/16/24/32の寸法段階を使用していますが、2カラムの比率とブレークポイントはアプリケーション側で決めています。

関連する仕様を確認する

## Kajabi Sage デザインシステム 完全な公開サンプルと実態に即したネイティブ実装

### ユーザーが操作するまでコピーしない

単独で動作するセットアップでは、公開されているPineトークンを読み込み、独自のHTMLとクリップボードハンドラーを用意します。Sageのパッケージアカウントがなくても実行できます。ネイティブのRailsの例は、既存のSageアプリケーション向けの構成として別途示しています。ヘルパーを貼り付けるだけでデザインシステムを導入できるとはしていません。

Sage Assetsでは、公開先レジストリとしてGitHub Packagesを指定しています。この方法を使うチームは、承認済みのレジストリアクセスを利用し、セマンティックな色変数を使用する前に外部のPineレイヤーを読み込む必要があります。また、ドキュメントにはフォントドメインの制約も記載されているため、ブランドフォントが正常に読み込まれたと暗黙に想定するより、システムフォールバックを使うほうが実態に即しています。

1. localhostまたはHTTPSからスタンドアロンの例を開き、コースとペイロード形式を選択します。

2. コピーを実行します。クリップボードのPromiseが解決した場合にのみ成功を通知し、それ以外の場合は手動コピー用にテキストを選択します。

3. コースまたは形式を変更したら、古いコピー状態をクリアし、更新前のペイロードについての表示が残らないようにします。

関連する仕様を確認する

## Kajabi Sage デザインシステムのコンポーネント例

### 完全なスタンドアロンのインタラクティブ見本

ドキュメント全体をindex.htmlとして保存し、ブラウザーで開いてください。Sage Copy Textの構成、公開されているタイポグラフィ仕様、Pineのライブデフォルト／ライト値を独自に解釈したネイティブなHTMLです。Sageランタイムや独自のフォントバンドルは使用しません。

```
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Course sharing — Sage interpretation</title><style>*{box-sizing:border-box}body{margin:0;background:#f8f8f8;color:#343332;font:16px/1.5 system-ui,sans-serif}main{max-width:1120px;margin:auto;padding:32px}.top{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.08em;border-bottom:1px solid #d2d1d1;padding-bottom:16px;gap:16px}h1{font-size:32px;line-height:40px;letter-spacing:-.5px;margin:24px 0 8px}h2{font-size:24px;line-height:32px;margin:0 0 8px}.intro{margin:0 0 24px;color:#6c6a69}.grid{display:grid;grid-template-columns:240px 1fr;gap:24px}.courses{display:grid;gap:16px;align-content:start}.course{background:white;border:1px solid #d2d1d1;border-radius:10px;padding:12px;text-align:left;color:inherit;font:inherit;cursor:pointer}.course[aria-pressed=true]{border:2px solid #343332;padding:11px}.course small{display:block;font-size:12px;color:#6c6a69}.art{position:relative;overflow:hidden;border-radius:6px;display:grid;place-content:center;letter-spacing:.08em;font-size:11px;text-align:center}.art b{z-index:1;position:relative;line-height:1.2}.art.studio{background:#f2b9a5;color:#682923}.art.studio:before{content:'';position:absolute;border-radius:50%;width:150px;height:150px;background:#c26e4f;right:-40px;top:25px}.art.studio:after{content:'';position:absolute;width:55px;height:120px;background:#f9e7bc;transform:rotate(25deg);left:20px;top:-20px}.art.journal{background:#d1ddaa;color:#203a30}.art.journal:before{content:'';position:absolute;width:100px;height:160px;border:22px solid #68865b;border-radius:60% 0;transform:rotate(20deg);right:5px;top:-5px}.art.journal:after{content:'';position:absolute;width:90px;height:70px;border:18px solid #b29f59;border-radius:50%;left:-30px;bottom:-20px}.course .art{height:115px;margin-bottom:12px}.panel{background:white;padding:24px;border:1px solid #d2d1d1;border-radius:10px}.hero{display:grid;grid-template-columns:140px 1fr;gap:24px;align-items:center;margin-bottom:24px}.hero .art{height:140px}.hero p{font-size:14px;color:#6c6a69;margin:0}.format{display:flex;gap:16px;border-bottom:1px solid #d2d1d1;margin-bottom:24px}.format button{background:none;border:0;border-bottom:3px solid transparent;padding:10px 0;font:inherit;color:#6c6a69;cursor:pointer}.format button[aria-pressed=true]{border-bottom-color:#343332;color:#343332}label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}textarea{width:100%;resize:vertical;min-height:135px;border:1px solid #d2d1d1;border-radius:10px;padding:16px;font:14px/1.5 system-ui;background:#fcfcfc;color:#343332}.copy{font:600 14px/20px system-ui;border:0;border-radius:9999px;background:#343332;color:white;padding:12px 24px;cursor:pointer;margin-top:16px}.copy:hover{background:#1a1a19}button:focus-visible,textarea:focus-visible{outline:3px solid #6c6a69;outline-offset:3px}.status{min-height:42px;font-size:13px;color:#4d4d4c}.foot{font-size:12px;color:#6c6a69;margin-top:24px}@media(max-width:650px){main{padding:20px}.grid{grid-template-columns:1fr}.courses{grid-template-columns:1fr 1fr;gap:12px}.course .art{height:85px}.hero{grid-template-columns:90px 1fr;gap:16px}.hero .art{height:110px}.panel{padding:20px}.top{flex-direction:column;gap:4px}h1{font-size:28px;line-height:36px}h2{font-size:20px;line-height:28px}}</style><main><header class="top"><b>CREATOR WORKSPACE</b><span>Local sharing specimen</span></header><h1>Give your course a clear invitation.</h1><p class="intro">Choose a sample course and prepare the exact text to share.</p><div class="grid"><nav class="courses" aria-label="Choose a course"><button class="course" data-course="studio" aria-pressed="true"><div class="art studio" aria-hidden="true"><b>STUDIO<br>NOTES</b></div><b>Studio Notes</b><small>6 lessons · Original sample</small></button><button class="course" data-course="journal" aria-pressed="false"><div class="art journal" aria-hidden="true"><b>FIELD<br>JOURNAL</b></div><b>Field Journal</b><small>4 lessons · Original sample</small></button></nav><section class="panel"><div class="hero"><div id="cover" class="art studio" aria-hidden="true"><b>STUDIO<br>NOTES</b></div><div><h2 id="title">Studio Notes</h2><p id="description">A fictional course about building a daily creative practice.</p></div></div><div class="format" aria-label="Copy format"><button data-format="link" aria-pressed="true">Course link</button><button data-format="message" aria-pressed="false">Invitation text</button></div><label for="payload">Text to copy</label><textarea id="payload" readonly></textarea><button id="copy" class="copy" type="button">Copy visible text</button><p class="status" id="status" role="status"></p></section></div><p class="foot">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.</p></main><script>const courses={studio:{name:'Studio Notes',slug:'studio-notes',desc:'A fictional course about building a daily creative practice.',art:'STUDIO<br>NOTES'},journal:{name:'Field Journal',slug:'field-journal',desc:'A fictional course about observing, collecting and recording ideas.',art:'FIELD<br>JOURNAL'}};let selected='studio',format='link';const payload=document.querySelector('#payload'),status=document.querySelector('#status');function render(){const c=courses[selected],url='https://example.com/courses/'+c.slug;document.querySelector('#title').textContent=c.name;document.querySelector('#description').textContent=c.desc;document.querySelector('#cover').className='art '+selected;document.querySelector('#cover').innerHTML='<b>'+c.art+'</b>';payload.value=format==='link'?url:'You are invited to explore '+c.name+'.\n\n'+c.desc+'\n\nView the sample: '+url;document.querySelectorAll('[data-course]').forEach(b=>b.setAttribute('aria-pressed',b.dataset.course===selected));document.querySelectorAll('[data-format]').forEach(b=>b.setAttribute('aria-pressed',b.dataset.format===format));status.textContent=''}document.querySelectorAll('[data-course]').forEach(b=>b.onclick=()=>{selected=b.dataset.course;render()});document.querySelectorAll('[data-format]').forEach(b=>b.onclick=()=>{format=b.dataset.format;render()});document.querySelector('#copy').onclick=async()=>{try{await navigator.clipboard.writeText(payload.value);status.textContent='Visible text copied.'}catch{payload.focus();payload.select();status.textContent='Copy was unavailable. The text is selected; copy it manually.'}};render();</script></html>
```

コードリファレンス

- コピー処理ではブラウザーのクリップボードAPIを使用し、失敗した場合は手動コピーに切り替えられます。例に登場するコースはオリジナルです。ネイティブのRails CopyTextコンポーネントについては別途説明しています。

### 失敗時の処理を含むコピー操作

ブラウザーの権限や埋め込み環境の制限によってクリップボードへの書き込みが許可されない場合でも、コピーするテキストを選択できます。

```
<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Share a sample course link</title>
<!-- Public Pine token stylesheet used by the Sage documentation. Pin its reviewed package version in production. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kajabi-ui/styles@latest/dist/pine/pine.css">
<style>
body{font-family:var(--pine-font-family-body);color:var(--pine-color-text);background:var(--pine-color-background-app);padding:var(--pine-dimension-md)}
main{max-width:42rem;margin:auto;background:var(--pine-color-background-container);padding:var(--pine-dimension-md);border:var(--pine-border-width) solid var(--pine-color-border);border-radius:var(--pine-border-radius-md)}
textarea{box-sizing:border-box;width:100%;padding:var(--pine-dimension-sm);font:inherit;resize:vertical}
button{font:inherit;cursor:pointer;margin-top:var(--pine-dimension-sm);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}
button:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:3px}
</style><main><h1>Share a sample course link</h1><p>This is a fictional course URL.</p>
<label for="link">Text to copy</label><textarea id="link" readonly rows="2">https://example.com/courses/studio-notes</textarea>
<button type="button" id="copy">Copy course link</button><p id="message" role="status"></p></main>
<script>
const field=document.querySelector('#link'),message=document.querySelector('#message');
document.querySelector('#copy').onclick=async()=>{
 try{await navigator.clipboard.writeText(field.value);message.textContent='Course link copied.'}
 catch{field.focus();field.select();message.textContent='Copy was unavailable. The link is selected; copy it manually.'}
};
</script></html>
```

コードリファレンス

- 「コピーしました」と表示するのは、クリップボードのPromiseが解決した後に限ります。

- 表示される値とコピーされる値は同じ文字列です。

- これは公開済みのPineトークンを使った独立した実装であり、SageのクリップボードAPIを再現したものではありません。

### ネイティブなSage Railsのコピー構成

設定済みのSage Railsアプリケーション内で、ドキュメントに記載されたRailsヘルパーを使用してください。

```
<h2 class="t-sage-heading-4">Course link</h2>
<%= sage_component SageCopyTextCard, {} do %>
  <p><b>Course:</b> Studio Notes</p>
  <p>https://example.com/courses/studio-notes</p>
<% end %>
<%= sage_component SageCopyButton, { value: "https://example.com/courses/studio-notes", semibold: true, fill_container: true } %>
```

コードリファレンス

- ヘルパーを使うには、既存の Sage Rails、アセット、システムJavaScriptとの連携が必要です。

- 広範囲に適用される太字の上書きを追加するのではなく、コンポーネント全体にセミボールドを適用してください。

## Kajabi Sage デザインシステムエージェントの設定

### 実装の出発点

単体で完結する公開トークンの実装です。HTMLファイルとして保存し、クリップボード機能を使うには localhost または HTTPS で配信してください。Sage Rails／Reactコンポーネントは読み込みません。Sage のネイティブアセットは GitHub Packages レジストリから配布されます。現在のアセット README では、Pine トークンを別途読み込む必要があります。

```
<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Share a sample course link</title>
<!-- Public Pine token stylesheet used by the Sage documentation. Pin its reviewed package version in production. -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kajabi-ui/styles@latest/dist/pine/pine.css">
<style>
body{font-family:var(--pine-font-family-body);color:var(--pine-color-text);background:var(--pine-color-background-app);padding:var(--pine-dimension-md)}
main{max-width:42rem;margin:auto;background:var(--pine-color-background-container);padding:var(--pine-dimension-md);border:var(--pine-border-width) solid var(--pine-color-border);border-radius:var(--pine-border-radius-md)}
textarea{box-sizing:border-box;width:100%;padding:var(--pine-dimension-sm);font:inherit;resize:vertical}
button{font:inherit;cursor:pointer;margin-top:var(--pine-dimension-sm);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}
button:focus-visible,textarea:focus-visible{outline:2px solid currentColor;outline-offset:3px}
</style><main><h1>Share a sample course link</h1><p>This is a fictional course URL.</p>
<label for="link">Text to copy</label><textarea id="link" readonly rows="2">https://example.com/courses/studio-notes</textarea>
<button type="button" id="copy">Copy course link</button><p id="message" role="status"></p></main>
<script>
const field=document.querySelector('#link'),message=document.querySelector('#message');
document.querySelector('#copy').onclick=async()=>{
 try{await navigator.clipboard.writeText(field.value);message.textContent='Course link copied.'}
 catch{field.focus();field.select();message.textContent='Copy was unavailable. The link is selected; copy it manually.'}
};
</script></html>
```

### あなたのプロジェクト向けプロンプト

```
コースを明示的に選択し、共有用のペイロードをコピーできるKajabi Sageのコース共有パネルを作成します。公開済みの Sage タイポグラフィと、外部から読み込む Pine トークンレイヤーを区別してください。ペイロードはそのまま表示し、クリップボードへのコピーが成功した場合にのみ成功を表示してください。コピーがブロックされた場合は、手動で選択できるようにします。実在するコース、顧客、公開システムとの連携は使用しないでください。
```

## Kajabi Sage デザインシステムの情報源と対象範囲

独立したOpenDesignガイドです。コースとカバーイラストはオリジナルです。プレビューではネイティブのHTMLと、文書化されたビジュアルリファレンスを使用しています。Rails の例には、既存の認可済み Sage 連携が必要です。コンテンツの公開や送信は行いません。

- Sage の概要 クリエイター向け製品、Rails、React。

- タイポグラフィ仕様 公開されているクラスのサイズとウェイト。

- コピーコンポーネント 構造、Rails の props、切り詰め方のガイドライン。

- カラーガイドライン 目的に応じた操作とフィードバックでの色の使い方。

- Sage のアセット依存関係 外部 Pine トークンと旧式の hex 値参照。

- アセットパッケージのメタデータ CSSのエントリーポイントと GitHub Packages での配布。

- Pine のライブスタイルシート デフォルト／ライトのトークンエイリアスと値。

## Kajabi Sage デザインシステムの関連リソース

### Kiwi Orbit

実際の製品カラーとスペーシング、標準の手荷物選択、統一された料金の内訳、ローカルで完結するレビューの一連の流れを備えた、旅行に特化したOrbitガイドです。

### Maersk デザインシステム

実際のライトテーマのロール、見出しと本文の文字サイズ、入れ子状の角丸、識別子の扱いを通して、Maerskのオペレーション用インターフェースの表現を確認します。サンプルの貨物検索では、実際の物流データにアクセスできるとは示さず、参照情報との完全一致と、アクセシブルなイベント履歴を紹介します。

### Microsoft Fluent 2

実際のセマンティックトークン、Web 向けのタイポグラフィとスペーシングの段階、制御可能なタブ、検証済みのアクセスダイアログを備えた Fluent UI React v9 のワークスペースを構築します。テーマ値を比較し、コンポーネントの構造を確認して、Reactの完全な例を使う前にローカルで操作を試してください。


- [実装リファレンス](https://sage.kajabi.com/pages/component/copy_text)
- [ソース](https://cdn.jsdelivr.net/npm/@kajabi-ui/styles@latest/dist/pine/pine.css)
- [ソース](https://sage.kajabi.com/pages/foundations/typography)
- [ソース](https://sage.kajabi.com/pages/component/copy_text)
- [関連する仕様を確認する](https://sage.kajabi.com/pages/index)
- [関連する仕様を確認する](https://raw.githubusercontent.com/Kajabi/sage-lib/develop/packages/sage-assets/README.md)
- [関連する仕様を確認する](https://sage.kajabi.com/pages/foundations/color)
- [関連する仕様を確認する](https://sage.kajabi.com/pages/foundations/typography)
- [関連する仕様を確認する](https://sage.kajabi.com/pages/component/copy_text)
- [関連する仕様を確認する](https://raw.githubusercontent.com/Kajabi/sage-lib/develop/packages/sage-assets/package.json)
- [コードリファレンス](https://sage.kajabi.com/pages/component/copy_text)
- [Sage の概要 クリエイター向け製品、Rails、React。](https://sage.kajabi.com/pages/index)
- [タイポグラフィ仕様 公開されているクラスのサイズとウェイト。](https://sage.kajabi.com/pages/foundations/typography)
- [コピーコンポーネント 構造、Rails の props、切り詰め方のガイドライン。](https://sage.kajabi.com/pages/component/copy_text)
- [カラーガイドライン 目的に応じた操作とフィードバックでの色の使い方。](https://sage.kajabi.com/pages/foundations/color)
- [Sage のアセット依存関係 外部 Pine トークンと旧式の hex 値参照。](https://raw.githubusercontent.com/Kajabi/sage-lib/develop/packages/sage-assets/README.md)
- [アセットパッケージのメタデータ CSSのエントリーポイントと GitHub Packages での配布。](https://raw.githubusercontent.com/Kajabi/sage-lib/develop/packages/sage-assets/package.json)
- [Pine のライブスタイルシート デフォルト／ライトのトークンエイリアスと値。](https://cdn.jsdelivr.net/npm/@kajabi-ui/styles@latest/dist/pine/pine.css)