Crea un panel para compartir dirigido a creadores, con contexto claro del curso, acciones de copia evidentes y mensajes fiables sobre el portapapeles. Explora la anatomía de los componentes Rails de Sage, sus especificaciones tipográficas publicadas y la capa de tokens Pine, más reciente y cargada externamente.
Interpretación independiente y nativa de HTML que sigue la estructura de Texto para copiar de Sage, las especificaciones tipográficas publicadas y los valores predeterminados/claros vigentes de Pine. Sin entorno de ejecución de Sage ni paquete de fuentes propietario. · Referencia de implementación
02
Referencia de diseño del sistema de diseño Kajabi Sage
Documentación pública de componentes y tipografía de Sage, además de la hoja de estilos predeterminada/clara de Pine que carga la documentación actual. La tabla tipográfica publicada de Sage y los alias más recientes de Pine son referencias distintas; no los trates como si fueran idénticos.
Sistema de diseño Kajabi Sage: un panel para compartir en un flujo de trabajo para creadores
El curso se distingue junto a su enlace
Sage da servicio a las interfaces de creación y comercio de conocimiento de Kajabi. Un panel para compartir cursos es una composición breve útil porque combina el contexto del producto, un valor técnico largo y una acción cuyo éxito puede fallar independientemente de la página. El ejemplo incluye dos cursos ficticios con ilustraciones de portada originales, una URL para estudiantes y un mensaje listo para enviar por correo electrónico.
Al cambiar el curso se actualizan ambos resultados. Al cambiar el formato de salida, cambia el texto que se copiará, mientras el curso seleccionado permanece visible. No se publica ni se envía nada; el único efecto secundario opcional ocurre cuando alguien activa el botón del portapapeles.
El sistema de diseño Kajabi Sage y Pine tienen un límite de dependencia explícito
Una función de color de CSS no siempre devuelve un valor hexadecimal
El README actual de Sage Assets indica que la aplicación que los consume carga los tokens de Pine, que no están incluidos en sage-assets. Distingue sage-color(), que devuelve una variable semántica de CSS, de sage-color-hex(), que lee valores heredados para las operaciones de color de Sass. Una función de color que ahora devuelve var(...) no se puede usar de forma segura en un cálculo hexadecimal en tiempo de compilación.
La documentación vigente carga @kajabi-ui/styles/dist/pine/pine.css. En la raíz predeterminada/clara de esa hoja de estilos, la función principal se resuelve mediante grey-900, mientras que el ejemplo hexadecimal del README anterior usa azul. La guía mantiene separados estos hechos: el primero es la función semántica vigente; el segundo ilustra una consulta hexadecimal heredada. Una nueva implementación no debe sustituir una por otra basándose en suposiciones.
Sistema de diseño Kajabi Sage: sobriedad en la aplicación, expresividad en el contenido
Asocia los colores de acción con su significado
Las pautas de color de Sage usan el color para identificar interacciones, estados seleccionados y comentarios, en lugar de añadir una personalidad arbitraria a la interfaz. El ejemplo mantiene neutral el marco de la aplicación; las ilustraciones de los cursos aportan el color expresivo. Así, es fácil localizar la acción para copiar sin dar a cada panel un tono distinto de estado.
El estado de éxito corresponde a una escritura exitosa en el portapapeles. Si se bloquea el acceso al portapapeles, se debe mostrar una alternativa práctica para copiar manualmente, no un mensaje verde de éxito. El curso seleccionado y el formato de salida seleccionado tienen estados de control propios, independientes del último resultado al copiar.
Sistema de diseño Kajabi Sage: especificaciones publicadas de Sage y alias actuales de tokens
La función tipográfica y la semántica de HTML son independientes
La tabla publicada de Sage ofrece las clases t-sage-heading y t-sage-body con combinaciones exactas de tamaño, altura de línea y peso. Resulta útil para reproducir esa especificación documentada. La hoja de estilos más reciente de Pine también expone sus propios alias de texto de cuerpo, incluido un estilo de cuerpo mediano de 14 píxeles, así que una integración actual debería comprobar qué capa consume su componente.
Aplicar una clase visual de encabezado a un elemento no cambia su nivel semántico. El nombre del curso sigue siendo un encabezado, la URL sigue siendo contenido de formulario y la acción de copiar sigue siendo un botón. La vista previa usa el estilo publicado de encabezado Sage 32/40 y texto de lectura 16/24, con una fuente alternativa del sistema; no da a entender que incluya los archivos de fuentes.
Sistema de diseño Kajabi Sage: texto de copia, botón de copia y tarjeta de texto de copia
Elige la estructura según el contenido
La documentación distingue entre texto de copia en línea, una tarjeta en bloque y un botón de copia. El bloque resulta útil cuando una etiqueta y varias líneas deben permanecer agrupadas. Un botón puede ocupar todo el contenedor o presentarse sin bordes, y el peso seminegrita se aplica en el nivel del componente.
El ejemplo usa un área de texto de solo lectura para el contenido activo. Es una decisión intencional de implementación nativa: permite seleccionar el texto cuando no se puede acceder al portapapeles y facilita la lectura de un mensaje de correo de varias líneas. Su valor es exactamente el contenido que se envía al navegador, sin etiquetas adicionales invisibles ni identificadores de curso obsoletos.
El texto de copia en línea es adecuado para un único valor breve junto a otro texto.
Una tarjeta de copia agrupa líneas relacionadas y ofrece espacio suficiente para revisarlas.
Un botón separado deja clara la acción cuando el valor es largo o tiene varias líneas.
Sistema de diseño Kajabi Sage: los enlaces largos no deben desbordar el panel
Una composición de dos columnas que pasa a ser secuencial
El ejemplo de escritorio sitúa una columna de selección de cursos junto al curso activo y los controles para compartir. En pantallas pequeñas, la columna se convierte en dos tarjetas horizontales y, a continuación, aparece el panel para compartir. El campo del valor ajusta las líneas a su contenedor y el botón permanece visible debajo.
La guía oficial de Copy Text recomienda establecer un ancho máximo local y ofrece la opción de truncar el contenido de las tarjetas. Este ejemplo opta por ajustar las líneas y permitir la selección manual, en vez de ocultar una parte esencial de la URL. El espaciado sigue los pasos verificados de 8/16/24/32 de Pine, mientras que la proporción de las columnas y el punto de quiebre son decisiones de la aplicación.
Sistema de diseño Kajabi Sage: un ejemplo público completo y una alternativa nativa transparente
Copia solo cuando la persona active la acción
La configuración independiente carga los tokens públicos de Pine y proporciona su propio HTML y controlador del portapapeles. Puede ejecutarse sin una cuenta del paquete Sage. El ejemplo nativo de Rails se identifica por separado como una composición para una aplicación Sage existente; no afirma que pegar solo un helper instale el sistema.
Sage Assets declara GitHub Packages como su registro de publicación. Los equipos que utilicen esta vía deben acceder al registro autorizado y cargar la capa externa de Pine antes de usar variables de color semánticas. La documentación también señala restricciones en los dominios de las fuentes, por lo que una alternativa del sistema resulta más transparente que suponer, sin indicarlo, que las fuentes de marca se cargaron correctamente.
Abre el ejemplo independiente desde localhost o HTTPS y selecciona un curso y un formato de contenido.
Activa la copia; informa del éxito solo cuando se resuelva la promesa del portapapeles. De lo contrario, permite seleccionar el texto para copiarlo manualmente.
Cambia el curso o el formato y borra el estado de copia anterior para que nunca describa un contenido obsoleto.
Ejemplos de componentes del sistema de diseño Kajabi Sage
Muestra interactiva independiente completa
Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación nativa e independiente de HTML de la estructura de Copy Text de Sage, las especificaciones tipográficas publicadas y los valores predeterminados/claros actuales de Pine. No requiere el entorno de ejecución de Sage ni un paquete de fuentes propietario.
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>
Los intentos de copia usan el portapapeles del navegador API y ofrecen una alternativa de copia manual. Los cursos ilustrados son originales; los componentes CopyText nativos de Rails se documentan por separado.
Interacción de copia completa con gestión de errores
El texto copiado sigue siendo seleccionable si los permisos del navegador o el contexto de inserción impiden escribir en el portapapeles.
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>
Los helpers requieren la integración existente de Sage Rails, los recursos y el sistema-JavaScript.
Aplica el peso seminegrita a todo el componente en vez de añadir una regla de negrita general.
04
Configuración del agente de IA del sistema de diseño Kajabi Sage
Punto de partida para la implementación
Implementación independiente completa con tokens públicos; guarda el contenido en un archivo HTML y sírvelo desde localhost o HTTPS para que funcione el portapapeles. No carga componentes de Sage Rails/React. Los recursos nativos de Sage se distribuyen mediante el registro GitHub Packages, y el README actual de recursos indica que los tokens de Pine deben cargarse por separado.
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>
Una instrucción para tu proyecto
Instrucción para el agente
Crea un panel Kajabi Sage para compartir cursos que permita seleccionar un curso explícitamente y copiar su contenido. Mantén clara la distinción entre la tipografía publicada de Sage y la capa de tokens de Pine cargada externamente. Muestra el contenido exacto, informa del éxito de la copia solo después de que se complete y permite la selección manual si está bloqueada. No uses cursos, clientes ni integraciones de publicación reales.
05
Fuentes y alcance del sistema de diseño Kajabi Sage
Guía independiente de OpenDesign. Los cursos y las ilustraciones de portada son originales. La vista previa usa HTML nativo y referencias visuales documentadas; los ejemplos de Rails requieren una integración autorizada existente de Sage. No se publica ni se envía ningún contenido.
