Создайте панель обмена для авторов с понятным контекстом курса, наглядными действиями копирования и достоверным уведомлением о состоянии буфера обмена. Изучите анатомию компонентов Sage для Rails, опубликованные спецификации типографики и более новый внешний слой токенов Pine.
Руководство OpenDesign7 глав42 справочные записиАвторское руководство по приложению
01
Предварительный просмотр интерфейса дизайн-системы Kajabi Sage
Выберите вымышленный курс, просмотрите ссылку или сообщение и скопируйте в точности отображаемый текст; если копирование не сработает, воспользуйтесь ручным способом.
Независимая нативная интерпретация анатомии Sage Copy Text в HTML, опубликованных спецификаций типографики и актуальных значений Pine для темы default/light. Без среды выполнения Sage и фирменного пакета шрифтов. · Справочник по реализации
02
Справочник по дизайн-системе Kajabi Sage
Общедоступная документация компонентов и типографики Sage, а также таблица стилей Pine для тем по умолчанию и светлой, фактически загружаемая текущей документацией. Опубликованная таблица типографики Sage и более новые псевдонимы Pine — разные справочные материалы; не считайте их одинаковыми без проверки.
Kajabi Sage Система дизайна: панель для распространения материалов в рабочем процессе автора
Курс остаётся узнаваемым рядом со ссылкой
Sage используется в интерфейсах Kajabi для авторов и торговли знаниями. Панель для распространения курса — полезный небольшой пример композиции: она объединяет контекст продукта, длинное техническое значение и действие, успешность которого не зависит от страницы. В примере представлены два вымышленных курса с оригинальными обложками, ссылка для учащихся и сообщение, готовое к отправке по электронной почте.
При переключении курса обновляются оба результата. При смене формата меняется копируемый текст, а выбранный курс остаётся видимым. Ничего не публикуется и не отправляется; единственный возможный побочный эффект возникает, когда пользователь нажимает кнопку буфера обмена.
Kajabi Sage Система дизайна: у Pine и Sage чёткая граница зависимостей
CSS Функция цвета не всегда просто возвращает значение в формате hex
В актуальном README для Sage Assets сказано, что токены Pine загружаются приложением-потребителем и не входят в sage-assets. В нём также проводится различие между sage-color(), которая возвращает семантическую переменную CSS, и sage-color-hex(), которая считывает устаревшие значения для цветовых операций Sass. Функцию цвета, которая теперь возвращает var(...), нельзя безопасно использовать в вычислении hex на этапе компиляции.
В актуальной документации загружается @kajabi-ui/styles/dist/pine/pine.css. В корневом селекторе этой таблицы стилей для светлой темы по умолчанию основная роль ссылается на grey-900, тогда как в примере с hex из более старого README указан синий цвет. В руководстве эти факты разделены: первое — актуальная семантическая роль, второе — пример обращения к устаревшему hex-значению. Не следует подменять одно другим в новой реализации без проверки.
Kajabi Sage Система дизайна: сдержанность в приложении, выразительность в контенте
Связывайте цвета действий с их смыслом
Согласно рекомендациям Sage по цвету, цвет обозначает интерактивность, выбранное состояние и обратную связь, а не добавляет интерфейсу произвольную выразительность. В примере рамка приложения остаётся нейтральной, а выразительные цвета использованы в оформлении курсов. Так действие копирования легко найти, и при этом каждой панели не присваивается свой цвет статуса.
Состояние успеха уместно только после успешной записи в буфер обмена. Если доступ к буферу заблокирован, следует предложить удобное ручное копирование, а не показывать зелёное сообщение об успехе. Состояния выбранного курса и формата вывода независимы от результата последнего копирования.
Kajabi Sage Система дизайна: опубликованные спецификации Sage и актуальные псевдонимы токенов
Типографическая роль и семантика HTML независимы
В опубликованной таблице Sage указаны классы t-sage-heading и t-sage-body с точными сочетаниями размера, высоты строки и насыщенности шрифта. Эта таблица пригодится, чтобы воспроизвести задокументированную спецификацию. В более новой таблице стилей Pine также есть собственные псевдонимы для основного текста, включая роль среднего насыщения размером 14 пикселей, поэтому при актуальной интеграции следует проверить, какой слой использует компонент.
Применение визуального класса заголовка к элементу не меняет его семантический уровень. Название курса остаётся заголовком, URL — содержимым поля формы, а действие копирования — кнопкой. В примере для заголовка и основного текста используются опубликованные стили Sage 32/40 и 16/24 с системным шрифтом в качестве запасного. При этом не утверждается, что файлы шрифтов входят в пакет.
Kajabi Sage Система дизайна: текст для копирования, кнопка копирования и карточка с текстом
Выбирайте структуру в соответствии с содержимым
В документации отдельно описаны встроенный текст для копирования, блочная карточка и кнопка копирования. Блок удобен, когда подпись и несколько строк должны оставаться вместе. Кнопка может занимать всю ширину контейнера или отображаться без рамки, а полужирное начертание применяется на уровне компонента.
В примере для активных данных используется текстовая область только для чтения. Это осознанный выбор в пользу встроенного элемента: он позволяет выделить текст, если доступ к буферу обмена недоступен, и упрощает чтение многострочного сообщения для электронной почты. Его значение — это точные данные, передаваемые браузеру, без скрытой дополнительной подписи и устаревшего идентификатора курса.
Встроенный текст для копирования подходит для короткого значения в строке с другим текстом.
Карточка для копирования объединяет связанные строки и оставляет достаточно места для просмотра.
Отдельная кнопка делает действие явным, когда значение длинное или состоит из нескольких строк.
Kajabi Sage Система дизайна: длинные ссылки не должны нарушать компоновку панели
Двухколоночная компоновка, которая на небольшом экране становится последовательной
В примере для настольных экранов панель выбора курса расположена рядом с выбранным курсом и элементами управления распространением. На маленьком экране карточки курсов выстраиваются горизонтально, а панель распространения располагается ниже. Поле со значением переносит строки в пределах контейнера, а кнопка остаётся видимой под ним.
В официальных рекомендациях по Copy Text предлагается задать локальную максимальную ширину и допускается усечение содержимого карточек. В этом примере вместо скрытия важной части URL выбраны перенос строк и ручное выделение. Отступы соответствуют проверенным шагам размерной шкалы Pine 8/16/24/32, а соотношение колонок и точка перехода выбраны для приложения.
Kajabi Sage Система дизайна: полноценный публичный пример и честный встроенный вариант
Копируйте только после того, как пользователь запустит действие
Самостоятельный пример загружает публичные токены Pine и использует собственные HTML и обработчик буфера обмена. Для его запуска не нужна учётная запись Sage Packages. Пример для Rails со встроенными средствами отдельно обозначен как композиция для уже существующего приложения Sage; не утверждается, что простого добавления вспомогательного кода достаточно для установки системы.
В Sage Assets в качестве реестра публикации указан GitHub Packages. Командам, использующим этот способ, необходимо обращаться к одобренному реестру и загружать внешний слой Pine до использования семантических цветовых переменных. В документации также отмечены ограничения доменов шрифтов, поэтому системный шрифт в качестве запасного варианта честнее, чем молчаливое предположение, что фирменные шрифты загрузились успешно.
Откройте самостоятельный пример с localhost или по HTTPS, затем выберите курс и формат данных.
Нажмите кнопку копирования; сообщайте об успехе только после выполнения промиса буфера обмена. В противном случае выделите текст для копирования вручную.
При смене курса или формата сбрасывайте прежний статус копирования, чтобы он не относился к устаревшим данным.
Сохраните документ целиком как index.html и откройте его в браузере. Независимая нативная интерпретация анатомии Sage Copy Text в HTML, опубликованных спецификаций типографики и актуальных значений Pine для темы default/light. Без среды выполнения Sage и фирменного пакета шрифтов.
html
<!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 описаны отдельно.
Полный сценарий копирования с обработкой ошибок
Скопированный текст остаётся доступным для выделения, если разрешения браузера или контекст встраивания запрещают запись в буфер обмена.
html
<!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>
Для хелперов требуется существующая интеграция Sage Rails, ресурсов и системы JavaScript.
Используйте полужирное начертание для всего компонента вместо общего переопределения жирного шрифта.
04
Kajabi Sage Настройка агента системы дизайна
Отправная точка для реализации
Полноценная самостоятельная реализация с публичными токенами; сохраните её в файл HTML и откройте на localhost или по HTTPS, чтобы работал буфер обмена. Компоненты Sage Rails/React не загружаются. Ресурсы Sage распространяются через реестр GitHub Packages, а в актуальном README для ресурсов сказано, что токены Pine необходимо загружать отдельно.
html
<!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>
Запрос для вашего проекта
Промпт для AI-агента
Создайте панель для распространения курса Kajabi Sage с явным выбором курса и данных для копирования. Разграничьте опубликованную типографику Sage и внешний слой токенов Pine. Оставьте точные данные видимыми, показывайте успешное копирование только после его завершения и предлагайте ручное выделение, если доступ заблокирован. Не используйте реальные курсы, данные клиентов и интеграцию с публикацией.
05
Kajabi Sage Источники и область применения системы дизайна
Самостоятельное руководство OpenDesign. Курсы и иллюстрации обложек созданы специально для примера. В предварительном просмотре используются встроенные средства HTML и задокументированные визуальные примеры; для примеров Rails требуется уже настроенная и авторизованная интеграция Sage. Контент не публикуется и не отправляется.
