# Sistema de design Kajabi Sage ## Kajabi Sage Prévia da interface do sistema de design Escolha um curso fictício, confira um link ou uma mensagem e copie o conteúdo visível exato, com uma alternativa manual. ## 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. ### Papéis de cor ativos do Pine | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --pine-color-primary | var(--pine-color-grey-900) | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | | --pine-color-primary-hover | var(--pine-color-grey-950) | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | | --pine-color-text | var(--pine-color-grey-900) | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | | --pine-color-text-primary | var(--pine-color-white) | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | | --pine-color-background-app | var(--pine-color-grey-100) | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | | --pine-color-background-container | var(--pine-color-white) | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | | --pine-color-border | var(--pine-color-grey-300) | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | ### Cores primitivas ativas do Pine | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --pine-color-grey-100 | #f8f8f8 | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | | --pine-color-grey-300 | #d2d1d1 | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | | --pine-color-grey-900 | #343332 | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | | --pine-color-grey-950 | #1a1a19 | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | | --pine-color-white | #ffffff | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | ### Dimensões e raio ativos do Pine | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --pine-dimension-xs | var(--pine-dimension-100) | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | | --pine-dimension-sm | var(--pine-dimension-200) | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | | --pine-dimension-md | var(--pine-dimension-300) | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | | --pine-dimension-lg | var(--pine-dimension-400) | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | | --pine-dimension-100 | 8px | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | | --pine-dimension-200 | 16px | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | | --pine-dimension-300 | 24px | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | | --pine-dimension-400 | 32px | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | | --pine-border-radius-md | var(--pine-dimension-125) | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | | --pine-dimension-125 | 10px | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | | --pine-border-radius-full | 9999px | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | ### Entrada tipográfica ativa do Pine | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | --pine-font-family-body | var(--pine-font-family-inter) | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | | --pine-font-family-inter | "Inter", system-ui, "Segoe UI", "Roboto", "Ubuntu", sans-serif | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | | --pine-font-size-body-md | var(--pine-font-size-100) | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | | --pine-font-size-100 | 14px | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | | --pine-font-size-body-lg | var(--pine-font-size-116) | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | | --pine-font-size-116 | 16px | Instantâneo atual da folha de estilos padrão/clara do Pine carregada pela documentação do Sage. | ### Classes tipográficas publicadas do Sage | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | t-sage-heading-1 | 40px / 48px; 700; -0.6px tracking | Especificação de tipografia da documentação publicada. | | t-sage-heading-2 | 32px / 40px; 700; -0.5px | Especificação de títulos publicada. | | t-sage-heading-3 | 28px / 32px; 700; -0.15px | Especificação de títulos publicada. | | t-sage-heading-4 | 24px / 32px; 600; -0.15px | Especificação de títulos publicada. | | t-sage-body | 16px / 24px; 400 | Especificação de texto corrido publicada. | | t-sage-body-small | 14px / 20px; 400 | Especificação de tipografia de apoio publicada. | | t-sage-body-xsmall | 12px / 16px; 400 | Especificação publicada para o menor tamanho de texto corrido. | | Body weight suffixes | -med 500 / -semi 600 / -bold 700 | Acrescente à família de classes de texto corrido. | ### Copiar propriedades do componente | Nome / Regra | Valor / Configuração | Uso | | --- | --- | --- | | SageCopyText.value | Required string | Texto a exibir e copiar. | | semibold | Boolean, default false | Destaque do bloco inteiro. | | SageCopyButton.fill_container | Boolean, default false | Largura do botão de cópia igual à do contêiner. | | SageCopyButton.borderless | Boolean example | Ação de cópia com baixa ênfase. | | SageCopyTextCard.truncate_contents | true enables truncation | Limite o conteúdo longo somente se o texto completo continuar disponível. | ## Kajabi Sage Guia completo do sistema de design Um guia prático para escolher, aplicar e avaliar este sistema em uma interface real. Orientações completas, um ponto de partida para a implementação e links para o código-fonte. ## 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. Consulte a especificação de apoio ## 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. Consulte a especificação de apoio ## 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. Consulte a especificação de apoio ## 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. Consulte a especificação de apoio ## 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. Consulte a especificação de apoio ## 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. Consulte a especificação de apoio ## 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. 1. Abra o exemplo independente em localhost ou HTTPS e selecione um curso e um formato de conteúdo. 2. 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. 3. 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. Consulte a especificação de apoio ## 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. ``` 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.

``` Referência de código - 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. ``` Share a sample course link

Share a sample course link

This is a fictional course URL.

``` Referência de código - É necessário que a promessa da área de transferência seja resolvida antes de exibir “Copiado”. - O valor exibido e o valor copiado são a mesma sequência de caracteres. - Esta é uma implementação independente que usa tokens publicados do Pine, não uma API fictícia de área de transferência do Sage. ### Estrutura nativa de cópia do Sage para Rails Use os auxiliares documentados do Rails em um aplicativo Sage para Rails já configurado. ```

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 } %> ``` Referência de código - 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. ## 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. ``` Share a sample course link

Share a sample course link

This is a fictional course URL.

``` ### Um prompt para seu projeto ``` 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. ``` ## 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. - Visão geral do Sage Produtos para criadores, Rails e React. - Especificação tipográfica Tamanhos e pesos das classes publicadas. - Componentes de cópia Estrutura, propriedades para Rails e orientações de truncamento. - Orientações de cores Uso intencional de cores em interações e feedback. - Dependência de recursos do Sage Tokens externos do Pine e referências hexadecimais legadas. - Metadados do pacote de recursos Entrada de CSS e distribuição pelo GitHub Packages. - Folha de estilos atual do Pine Aliases e valores padrão/claro dos tokens. ## Kajabi Sage Recursos relacionados ao sistema de design ### Kiwi Orbit Um guia do Orbit voltado a viagens, com cores e espaçamentos reais do produto, opções nativas de bagagem, detalhamento de preços consistente e um fluxo completo de revisão local. ### Maersk sistema de design Conheça a linguagem de interface operacional da Maersk por meio das funções reais do tema claro, das escalas de títulos e textos, dos raios aninhados e do tratamento de identificadores. Uma consulta de remessa de exemplo demonstra a correspondência exata de referências e um histórico de eventos acessível, sem alegar acesso a dados logísticos em tempo real. ### Microsoft Fluent 2 Crie um espaço de trabalho com Fluent UI React v9, tokens semânticos reais, as escalas tipográfica e de espaçamento para a web, abas controladas e um diálogo de acesso validado. Compare os valores do tema, examine a anatomia dos componentes e teste uma interação local antes de usar o exemplo completo de React. - [Referência de implementação](https://sage.kajabi.com/pages/component/copy_text) - [Fonte](https://cdn.jsdelivr.net/npm/@kajabi-ui/styles@latest/dist/pine/pine.css) - [Fonte](https://sage.kajabi.com/pages/foundations/typography) - [Fonte](https://sage.kajabi.com/pages/component/copy_text) - [Consulte a especificação de apoio](https://sage.kajabi.com/pages/index) - [Consulte a especificação de apoio](https://raw.githubusercontent.com/Kajabi/sage-lib/develop/packages/sage-assets/README.md) - [Consulte a especificação de apoio](https://sage.kajabi.com/pages/foundations/color) - [Consulte a especificação de apoio](https://sage.kajabi.com/pages/foundations/typography) - [Consulte a especificação de apoio](https://sage.kajabi.com/pages/component/copy_text) - [Consulte a especificação de apoio](https://raw.githubusercontent.com/Kajabi/sage-lib/develop/packages/sage-assets/package.json) - [Referência de código](https://sage.kajabi.com/pages/component/copy_text) - [Visão geral do Sage Produtos para criadores, Rails e React.](https://sage.kajabi.com/pages/index) - [Especificação tipográfica Tamanhos e pesos das classes publicadas.](https://sage.kajabi.com/pages/foundations/typography) - [Componentes de cópia Estrutura, propriedades para Rails e orientações de truncamento.](https://sage.kajabi.com/pages/component/copy_text) - [Orientações de cores Uso intencional de cores em interações e feedback.](https://sage.kajabi.com/pages/foundations/color) - [Dependência de recursos do Sage Tokens externos do Pine e referências hexadecimais legadas.](https://raw.githubusercontent.com/Kajabi/sage-lib/develop/packages/sage-assets/README.md) - [Metadados do pacote de recursos Entrada de CSS e distribuição pelo GitHub Packages.](https://raw.githubusercontent.com/Kajabi/sage-lib/develop/packages/sage-assets/package.json) - [Folha de estilos atual do Pine Aliases e valores padrão/claro dos tokens.](https://cdn.jsdelivr.net/npm/@kajabi-ui/styles@latest/dist/pine/pine.css)