Crie um painel de compartilhamento voltado a criadores, com contexto claro sobre o curso, ações de cópia objetivas e feedback transparente da área de transferência. Explore a anatomia dos componentes Rails do Sage, suas especificações tipográficas publicadas e a camada mais recente de tokens Pine, carregada externamente.
Interpretação independente e nativa de HTML da estrutura do Sage Copy Text, das especificações de tipografia publicadas e dos valores ativos padrão/claros do Pine. Sem o ambiente de execução do Sage nem o pacote de fontes proprietárias. · Referência de implementação
02
Kajabi Sage Referência de design do sistema de design
Documentação pública dos componentes e da tipografia do Sage, além da folha de estilos padrão/clara do Pine realmente carregada pela documentação atual. A tabela de tipografia publicada do Sage e os aliases mais recentes do Pine são referências distintas; não os trate como idênticos sem confirmação.
Sistema de design Kajabi Sage: um painel de compartilhamento para o fluxo de trabalho de criadores
O curso continua identificável ao lado do link
O Sage atende às interfaces de criadores e comércio de conteúdo da Kajabi. Um painel de compartilhamento de cursos é uma composição pequena e útil, pois combina o contexto do produto, um valor técnico longo e uma ação cujo sucesso pode falhar independentemente da página. O exemplo inclui dois cursos fictícios com capas originais, um URL para alunos e uma mensagem pronta para e-mail.
Ao trocar de curso, as duas saídas são atualizadas. Ao trocar o formato de saída, o texto a ser copiado muda, enquanto o curso selecionado continua visível. Nada é publicado ou enviado; o único efeito colateral opcional ocorre quando alguém aciona o botão da área de transferência.
Sistema de design Kajabi Sage e Pine têm um limite explícito de dependência
Uma função de cor do CSS nem sempre consulta um valor hexadecimal
O README atual do Sage Assets informa que os tokens do Pine são carregados pela aplicação consumidora e não estão incluídos em sage-assets. Ele diferencia sage-color(), que retorna uma variável semântica de CSS, de sage-color-hex(), que lê valores legados para operações de cor do Sass. Uma função de cor que agora retorna var(...) não pode ser usada com segurança em um cálculo hexadecimal feito em tempo de compilação.
A documentação ativa carrega @kajabi-ui/styles/dist/pine/pine.css. Na raiz padrão/clara dessa folha de estilos, o papel primário corresponde a grey-900, enquanto o exemplo hexadecimal do README mais antigo é azul. O guia mantém esses fatos separados: o primeiro é o papel semântico ativo; o segundo ilustra uma consulta hexadecimal legada. Uma nova implementação não deve substituir um pelo outro com base em suposições.
Sistema de design Kajabi Sage Contenção na aplicação, expressão no conteúdo
Associe as cores das ações ao seu significado
As orientações de cores do Sage usam cores para identificar interações, estados selecionados e feedback, em vez de acrescentar uma personalidade arbitrária à interface. O exemplo mantém neutra a moldura do aplicativo; as ilustrações dos cursos trazem as cores expressivas. Assim, fica fácil encontrar a ação de cópia sem colorir cada painel com um tom de status diferente.
O estado de sucesso só aparece quando o texto é copiado para a área de transferência. Se o acesso à área de transferência for bloqueado, apresente uma alternativa prática para copiar manualmente, não uma mensagem verde de sucesso. O curso e o formato de saída selecionados têm estados próprios, independentes do resultado da última cópia.
Sistema de design Kajabi Sage: especificações publicadas do Sage e aliases atuais de tokens
A função tipográfica e a semântica de HTML são independentes
A tabela publicada do Sage fornece as classes t-sage-heading e t-sage-body com combinações exatas de tamanho, altura de linha e peso. Ela é útil para reproduzir essa especificação documentada. A folha de estilos mais recente do Pine também expõe seus próprios aliases de corpo de texto, incluindo uma função de corpo médio de 14 pixels. Portanto, uma integração atual deve verificar qual camada seu componente utiliza.
Aplicar a um elemento uma classe visual de título não altera seu nível semântico. O nome do curso continua sendo um título, a URL continua sendo conteúdo de formulário e a ação de cópia continua sendo um botão. A prévia usa os estilos publicados do Sage para títulos em 32/40 e leitura em 16/24, com fonte alternativa do sistema; ela não sugere que os arquivos de fontes estejam incluídos.
Sistema de design Kajabi Sage: texto para copiar, botão de cópia e cartão de texto para copiar
Escolha a estrutura conforme o formato do conteúdo
A documentação distingue texto de cópia em linha, cartão em bloco e botão de cópia. O bloco é útil quando um rótulo e várias linhas precisam ficar agrupados. O botão pode ocupar todo o contêiner ou não ter borda, e o peso semibold aplica ênfase no nível do componente.
O exemplo usa uma área de texto somente leitura para o conteúdo ativo. Essa implementação nativa é intencional: ela permite selecionar o texto quando o acesso à área de transferência não está disponível e mantém legível uma mensagem de e-mail com várias linhas. O valor é exatamente o conteúdo enviado ao navegador, sem rótulo extra invisível nem identificador desatualizado de curso.
O texto de cópia em linha é adequado para um valor curto ao lado de outro texto.
Um cartão de cópia agrupa linhas relacionadas com largura suficiente para inspecioná-las.
Um botão separado deixa a ação explícita quando o valor é longo ou tem várias linhas.
Sistema de design Kajabi Sage: links longos não devem ultrapassar os limites do painel
Uma composição em duas colunas que se reorganiza em sequência
No exemplo para desktop, uma coluna de seleção de cursos fica ao lado dos controles do curso ativo e de compartilhamento. Em telas pequenas, a coluna se transforma em dois cartões na horizontal, e o painel de compartilhamento aparece em seguida. O campo do valor quebra as linhas dentro do contêiner, e o botão permanece visível abaixo dele.
As orientações oficiais de Copy Text recomendam uma largura máxima local e oferecem truncamento para o conteúdo dos cartões. Neste exemplo, optamos por quebrar as linhas e permitir a seleção manual, em vez de ocultar uma parte importante da URL. O espaçamento interno segue os intervalos de dimensão verificados do Pine: 8/16/24/32. A proporção das duas colunas e o ponto de quebra são escolhas do aplicativo.
Sistema de design Kajabi Sage: um exemplo público completo e uma alternativa nativa transparente
Só copie depois que a pessoa acionar a ação
A configuração independente carrega os tokens públicos do Pine e fornece seu próprio HTML e manipulador da área de transferência. Ela funciona sem uma conta do pacote Sage. O exemplo nativo em Rails é identificado separadamente como uma composição para um aplicativo Sage existente; não afirma que colar apenas um auxiliar instala o sistema.
O Sage Assets declara GitHub Packages como registro de distribuição. As equipes que usam essa rota devem acessar o registro pelos meios autorizados e carregar a camada externa do Pine antes de depender de variáveis semânticas de cor. A documentação também menciona restrições de domínio para as fontes. Por isso, usar uma fonte alternativa do sistema é mais transparente do que presumir que as fontes da marca foram carregadas corretamente.
Abra o exemplo independente em localhost ou HTTPS e selecione um curso e um formato de conteúdo.
Acione a cópia; informe o sucesso somente depois que a promessa da área de transferência for resolvida. Caso contrário, selecione o texto para copiá-lo manualmente.
Ao alterar o curso ou o formato, limpe o status da cópia anterior para que ele nunca se refira a um conteúdo desatualizado.
Kajabi Sage Exemplos de componentes do sistema de design
Exemplo interativo completo e independente
Salve o documento completo como index.html e abra-o no navegador. Interpretação nativa e independente de HTML da estrutura de Copy Text do Sage, das especificações tipográficas publicadas e dos valores atuais padrão/claros do Pine. Sem o ambiente de execução do Sage nem fontes proprietárias.
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>
As tentativas de cópia usam a API da área de transferência do navegador e oferecem uma alternativa para cópia manual. Os cursos ilustrados são originais; os componentes CopyText nativos do Rails são documentados separadamente.
Interação de cópia completa, com tratamento de falhas
O texto copiado continua selecionável se as permissões do navegador ou o contexto de incorporação impedirem gravações na área de transferência.
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>
Os auxiliares exigem a integração existente do Sage Rails, dos recursos e do sistema-JavaScript.
Use semibold no componente inteiro, em vez de adicionar uma sobrescrita ampla de negrito.
04
Kajabi Sage Configuração de agente do sistema de design
Ponto de partida para implementação
Implementação independente completa com tokens públicos; salve como arquivo HTML e disponibilize em localhost ou HTTPS para oferecer suporte à área de transferência. Não carrega componentes do Sage Rails/React. Os recursos nativos do Sage são distribuídos pelo registro GitHub Packages, e o README atual dos recursos exige que os tokens do Pine sejam carregados separadamente.
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>
Um prompt para seu projeto
Prompt para agente de IA
Crie um painel Kajabi Sage para compartilhar cursos, com seleção explícita do curso e do conteúdo a copiar. Preserve a distinção entre a tipografia publicada do Sage e a camada de tokens do Pine, carregada externamente. Mantenha o conteúdo exato visível, exiba o sucesso da cópia somente quando ela for concluída e ofereça a seleção manual quando o acesso estiver bloqueado. Não use cursos, clientes nem integrações de publicação reais.
05
Kajabi Sage Fontes e escopo do sistema de design
Guia independente de OpenDesign. Os cursos e as ilustrações de capa são originais. A prévia usa HTML nativo e referências visuais documentadas, enquanto os exemplos em Rails exigem uma integração autorizada do Sage já existente. Nenhum conteúdo é publicado ou enviado.
