# Kajabi Sage Tasarım Sistemi ## Kajabi Sage Tasarım Sistemi Arayüz Önizlemesi Kurgusal bir kurs seçin, bağlantıyı veya mesajı inceleyin ve görünür yükü elle kopyalama seçeneğiyle aynen kopyalayın. ## Kajabi Sage Tasarım Sistemi Tasarım Referansı Sage’ın herkese açık bileşen ve tipografi belgeleriyle, mevcut belgelerin yüklediği varsayılan/açık Pine stil sayfası. Yayımlanmış Sage tipografi tablosu ile daha yeni Pine takma adları ayrı referanslardır; bunları sessizce aynı kabul etmeyin. ### Pine’ın canlı renk rolleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --pine-color-primary | var(--pine-color-grey-900) | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | | --pine-color-primary-hover | var(--pine-color-grey-950) | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | | --pine-color-text | var(--pine-color-grey-900) | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | | --pine-color-text-primary | var(--pine-color-white) | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | | --pine-color-background-app | var(--pine-color-grey-100) | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | | --pine-color-background-container | var(--pine-color-white) | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | | --pine-color-border | var(--pine-color-grey-300) | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | ### Pine’ın canlı temel renkleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --pine-color-grey-100 | #f8f8f8 | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | | --pine-color-grey-300 | #d2d1d1 | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | | --pine-color-grey-900 | #343332 | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | | --pine-color-grey-950 | #1a1a19 | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | | --pine-color-white | #ffffff | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | ### Pine’ın canlı boyutları ve köşe yuvarlaklığı | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --pine-dimension-xs | var(--pine-dimension-100) | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | | --pine-dimension-sm | var(--pine-dimension-200) | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | | --pine-dimension-md | var(--pine-dimension-300) | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | | --pine-dimension-lg | var(--pine-dimension-400) | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | | --pine-dimension-100 | 8px | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | | --pine-dimension-200 | 16px | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | | --pine-dimension-300 | 24px | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | | --pine-dimension-400 | 32px | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | | --pine-border-radius-md | var(--pine-dimension-125) | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | | --pine-dimension-125 | 10px | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | | --pine-border-radius-full | 9999px | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | ### Pine’ın canlı tipografi girdisi | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | --pine-font-family-body | var(--pine-font-family-inter) | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | | --pine-font-family-inter | "Inter", system-ui, "Segoe UI", "Roboto", "Ubuntu", sans-serif | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | | --pine-font-size-body-md | var(--pine-font-size-100) | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | | --pine-font-size-100 | 14px | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | | --pine-font-size-body-lg | var(--pine-font-size-116) | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | | --pine-font-size-116 | 16px | Sage belgelerinin yüklediği geçerli varsayılan/açık Pine stil sayfasının anlık görüntüsü. | ### Yayımlanmış Sage tipografi sınıfları | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | t-sage-heading-1 | 40px / 48px; 700; -0.6px tracking | Yayımlanmış belge tipografi belirtimi. | | t-sage-heading-2 | 32px / 40px; 700; -0.5px | Yayımlanmış başlık belirtimi. | | t-sage-heading-3 | 28px / 32px; 700; -0.15px | Yayımlanmış başlık belirtimi. | | t-sage-heading-4 | 24px / 32px; 600; -0.15px | Yayımlanmış başlık belirtimi. | | t-sage-body | 16px / 24px; 400 | Yayımlanmış gövde metni belirtimi. | | t-sage-body-small | 14px / 20px; 400 | Destekleyici tipografi belirtimi yayımlandı. | | t-sage-body-xsmall | 12px / 16px; 400 | Yayımlanmış en küçük gövde metni belirtimi. | | Body weight suffixes | -med 500 / -semi 600 / -bold 700 | Gövde sınıfı ailesine ekleyin. | ### Kopyalama bileşeni özellikleri | Ad / Kural | Değer / Yapılandırma | Kullanım | | --- | --- | --- | | SageCopyText.value | Required string | Görüntülenecek ve kopyalanacak metin. | | semibold | Boolean, default false | Tüm bloğa vurgu. | | SageCopyButton.fill_container | Boolean, default false | Kopyala düğmesinin kapsayıcının tamamını kaplamasını sağlar. | | SageCopyButton.borderless | Boolean example | Düşük vurgulu kopyalama eylemi. | | SageCopyTextCard.truncate_contents | true enables truncation | Uzun içeriği yalnızca tam metin erişilebilir kalacaksa kısıtlayın. | ## Kajabi Sage Tasarım Sistemi Eksiksiz Kılavuz Bu sistemi gerçek bir arayüz için seçmeye, uygulamaya ve gözden geçirmeye yönelik pratik bir kılavuz. Eksiksiz yönlendirme, uygulama için başlangıç noktası ve kaynak bağlantıları. ## Kajabi Sage Tasarım Sistemi İçerik üreticisi iş akışı için paylaşım paneli ### Bağlantısının yanında kurs kolayca tanınır > Sage, Kajabi’nin içerik üreticilerine ve bilgi ticaretine yönelik arayüzlerine hizmet eder. Kurs paylaşım paneli, ürün bağlamını, uzun bir teknik değeri ve başarısızlığı sayfadan bağımsız olabilen bir eylemi bir araya getirdiği için kullanışlı, küçük ölçekli bir tasarımdır. Örnek, özgün kapak görsellerine sahip iki kurgusal kurs, bir öğrenci URL’si ve e-postayla gönderilmeye hazır bir mesaj sunar. Kurs değiştirildiğinde her iki çıktı da güncellenir. Çıktı biçimi değiştirildiğinde kopyalanacak metin değişir; seçili kurs ise görünür kalır. Hiçbir içerik yayımlanmaz veya gönderilmez. İsteğe bağlı tek yan etki, kişi panoya kopyalama düğmesini etkinleştirdiğinde oluşur. Destekleyici belirtimi okuyun ## Kajabi Sage Tasarım Sistemi ile Pine arasında açık bir bağımlılık sınırı vardır ### CSS Renk işlevi her zaman bir hex değeri aramaz Mevcut Sage Assets README’sinde Pine belirteçlerinin Sage Assets paketine eklenmediği, bunların kullanan uygulama tarafından yüklendiği belirtilir. README, anlamsal bir CSS değişkeni döndüren sage-color() ile Sass renk işlemlerinde kullanılmak üzere eski değerleri okuyan sage-color-hex() işlevlerini birbirinden ayırır. Artık var(...) döndüren bir renk işlevi, derleme zamanında yapılan hex hesaplamalarında güvenle kullanılamaz. Canlı belgeler @kajabi-ui/styles/dist/pine/pine.css dosyasını yükler. Bu stil sayfasının varsayılan/açık tema kökünde birincil rol, grey-900 üzerinden çözülürken eski README’deki hex örneği mavidir. Kılavuz bu bilgileri ayrı tutar: ilki canlı anlamsal rolü, ikincisi eski hex değer aramasını gösterir. Yeni bir uygulama, varsayıma dayanarak birini diğerinin yerine kullanmamalıdır. Destekleyici belirtimi okuyun ## Kajabi Sage Tasarım Sistemi Uygulamada ölçülülük, içerikte ifade gücü ### Eylem renklerini anlamlarına bağlı tutun Sage renk yönergeleri, arayüze rastgele bir kişilik katmak yerine etkileşimi, seçili durumu ve geri bildirimi belirtmek için renk kullanır. Örnekte uygulama çerçevesi nötr tutulur; ifade gücünü kurs görselleri sağlar. Böylece her paneli farklı bir durum rengine boyamadan kopyalama eylemini bulmak kolaylaşır. Başarı durumu yalnızca pano yazma işlemi başarılı olduğunda gösterilmelidir. Pano erişimi engellendiğinde yeşil bir başarı mesajı yerine metni elle kopyalamaya yönelik kullanışlı bir durum sunulmalıdır. Seçili kurs ve çıktı biçimi kendi kontrol durumlarını kullanır ve son kopyalama sonucundan bağımsızdır. Destekleyici belirtimi okuyun ## Kajabi Sage Tasarım Sistemi Yayımlanmış Sage özellikleri ve mevcut belirteç takma adları ### Yazı tipi rolü ve HTML anlamı birbirinden bağımsızdır Yayımlanmış Sage tablosunda kesin boyut, satır yüksekliği ve kalınlık birleşimleriyle t-sage-heading ve t-sage-body sınıfları yer alır. Bu tablo, belgelenmiş özelliklerin yeniden oluşturulması için kullanışlıdır. Daha yeni Pine stil sayfası, 14 piksellik orta kalınlıkta metin rolü de dâhil olmak üzere kendi gövde metni takma adlarını sunar. Bu nedenle güncel bir entegrasyonda bileşenin hangi katmanı kullandığı incelenmelidir. Bir öğeye görsel başlık sınıfı uygulamak, o öğenin anlamsal düzeyini değiştirmez. Kurs adı başlık, URL form içeriği, kopyalama eylemi ise düğme olarak kalır. Önizlemede yayımlanmış Sage 32/40 başlık ve 16/24 okuma stilleri, sistem yazı tipi yedeğiyle kullanılır; yazı tipi dosyalarının pakete dâhil olduğu iddia edilmez. Destekleyici belirtimi okuyun ## Kajabi Sage Tasarım Sistemi Metin Kopyalama, Kopyala Düğmesi ve Metin Kopyalama Kartı ### Yapıyı içeriğin biçimine göre seçin Belgelerde satır içi metin kopyalama, blok kartı ve kopyalama düğmesi ayrı ayrı açıklanır. Etiketin ve birden çok satırın bir arada kalması gerektiğinde blok kullanışlıdır. Düğme kapsayıcının tamamını kaplayabilir veya kenarlıksız gösterilebilir; yarı kalın yazı tipi ise bileşen düzeyinde vurgu sağlar. Örnekte etkin içerik için salt okunur bir textarea kullanılır. Bu, bilinçli bir yerel uygulama tercihidir: pano erişimi kullanılamadığında metnin seçilmesini sağlar ve çok satırlı e-posta mesajını okunabilir tutar. Değeri, görünmez ek bir etiket ya da eski bir kurs tanımlayıcısı olmaksızın tarayıcıya gönderilen içeriğin aynısıdır. - Satır içi metin kopyalama, başka metinlerin yanında yer alan kısa ve tek bir değer için uygundur. - Kopyalama kartı, ilgili satırları incelemeye yetecek genişlikte bir arada tutar. - Değer uzun veya çok satırlı olduğunda ayrı bir düğme, eylemi belirginleştirir. Destekleyici belirtimi okuyun ## Kajabi Sage Tasarım Sistemi Uzun bağlantılar panelin düzenini bozmamalı ### Ardışık düzene geçen iki sütunlu tasarım Masaüstü örneğinde kurs seçim alanı, etkin kursun ve paylaşım kontrollerinin yanında yer alır. Küçük ekranlarda bu alan yatay sıralanmış iki karta dönüşür; paylaşım paneli ise bu kartların altında görünür. Değer alanındaki metin kapsayıcı içinde kaydırılır; düğme alanın altında görünür kalır. Resmî Metin Kopyalama yönergeleri, yerel bir maksimum genişlik önerir ve kart içeriğinin kısaltılmasına izin verir. Bu örnekte URL’nin önemli bir bölümünü gizlemek yerine metni kaydırma ve elle seçme tercih edilir. İç boşluklar, doğrulanmış Pine 8/16/24/32 boyut adımlarını izlerken iki sütun oranı ve kırılma noktası uygulama tercihidir. Destekleyici belirtimi okuyun ## Kajabi Sage Tasarım Sistemi Eksiksiz bir herkese açık örnek ve yerel, dürüst bir uygulama yolu ### Yalnızca kullanıcı eylemi başlattığında kopyalayın Bağımsız kurulum, herkese açık Pine belirteçlerini yükler ve kendi HTML bileşenini ve pano işleyicisini sağlar. Sage paket hesabı olmadan çalışabilir. Yerel Rails örneği ise mevcut bir Sage uygulaması için ayrı bir bileşim olarak tanımlanmıştır; tek başına yapıştırılan bir yardımcı işlevin sistemi kurduğu iddia edilmez. Sage Assets, yayımlama kayıt defteri olarak GitHub Packages’ı belirtir. Bu yöntemi kullanan ekipler onaylı kayıt defteri erişimlerini kullanmalı ve anlamsal renk değişkenlerine güvenmeden önce harici Pine katmanını yüklemelidir. Belgelerde yazı tipi etki alanı kısıtlamaları da belirtilir; bu nedenle sistem yazı tipi yedeği kullanmak, marka yazı tiplerinin başarıyla yüklendiğini varsaymaktan daha doğrudur. 1. Bağımsız örneği localhost veya HTTPS üzerinden açın, ardından bir kurs ve içerik biçimi seçin. 2. Kopyala düğmesini etkinleştirin. Yalnızca pano vaadi çözümlendiğinde başarı bildirin; aksi durumda metni elle kopyalamak üzere seçin. 3. Kursu veya biçimi değiştirdiğinizde, eski kopyalama durumunu temizleyin; böylece bu durum güncel olmayan içeriği hiçbir zaman tanımlamaz. Destekleyici belirtimi okuyun ## Kajabi Sage Tasarım Sistemi Bileşen Örnekleri ### Tamamlanmış, bağımsız ve etkileşimli örnek Belgenin tamamını index.html adıyla kaydedip tarayıcıda açın. Yayımlanmış yazı tipi özelliklerinin ve canlı varsayılan/açık tema Pine değerlerinin bağımsız, yerel HTML yorumu. Sage çalışma zamanı veya tescilli yazı tipi paketi gerekmez. ``` 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.

``` Kod referansı - Kopyalama denemelerinde tarayıcı panosu API kullanılır ve elle kopyalama seçeneği sunulur. Kurs görselleri özgündür; yerel Rails CopyText bileşenleri ayrı olarak belgelenmiştir. ### Hata yönetimi içeren eksiksiz kopyalama etkileşimi Tarayıcı izinleri veya gömülü bağlam pano yazma işlemlerine izin vermediğinde kopyalanacak metin seçilebilir durumda kalır. ``` Share a sample course link

Share a sample course link

This is a fictional course URL.

``` Kod referansı - Kopyalandı mesajı gösterilmeden önce pano vaadinin başarıyla çözülmesi gerekir. - Görünen değer ile kopyalanan değer aynı metindir. - Bu, yayımlanmış Pine belirteçlerini kullanan bağımsız bir uygulamadır; Sage panosu API değildir. ### Yerel Sage Rails kopyalama yapısı Belgelenmiş Rails yardımcılarını, önceden yapılandırılmış bir Sage Rails uygulamasında kullanın. ```

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 } %> ``` Kod referansı - Yardımcılar için mevcut Sage Rails, varlık ve sistem-JavaScript entegrasyonu gerekir. - Kapsamlı bir kalınlık geçersiz kılması eklemek yerine bileşenin tamamında yarı kalın yazı tipi kullanın. ## Kajabi Sage Tasarım Sistemi Yapay Zekâ Aracısı Kurulumu ### Uygulamaya Başlangıç Noktası Eksiksiz, bağımsız ve herkese açık belirteç uygulaması; bir HTML dosyası olarak kaydedin ve pano desteği için localhost veya HTTPS üzerinden sunun. Sage Rails/React bileşenlerini yüklemez. Yerel Sage varlıkları GitHub Packages kayıt defteri üzerinden dağıtılır; mevcut varlık README’sine göre Pine belirteçlerinin ayrıca yüklenmesi gerekir. ``` Share a sample course link

Share a sample course link

This is a fictional course URL.

``` ### Projeniz İçin Bir İstem ``` Açık kurs seçimi ve kopyalanacak içeriğe sahip bir Kajabi Sage kurs paylaşım paneli oluşturun. Yayımlanmış Sage tipografisi ile harici olarak yüklenen Pine belirteç katmanı arasındaki ayrımı koruyun. Kopyalanacak içeriği eksiksiz gösterin, pano kopyalama başarılı olduktan sonra başarı mesajı verin ve işlem engellendiğinde elle seçim seçeneği sunun. Gerçek kurs, müşteri veya yayımlama entegrasyonu kullanmayın. ``` ## Kajabi Sage Tasarım Sistemi Kaynaklar ve Kapsam Bağımsız OpenDesign kılavuzu. Kurslar ve kapak çizimleri özgündür. Önizlemede yerel HTML ve belgelenmiş görsel referanslar kullanılır; Rails örnekleri için mevcut ve yetkili bir Sage entegrasyonu gerekir. Hiçbir içerik yayımlanmaz veya gönderilmez. - Sage genel bakış İçerik üretici ürünleri, Rails ve React. - Tipografi özellikleri Yayımlanmış sınıf boyutları ve kalınlıkları. - Kopyalama bileşenleri Yapı, Rails özellikleri ve kısaltma yönergeleri. - Renk yönergeleri Amaçlı etkileşim ve geri bildirim kullanımı. - Sage varlık bağımlılığı Harici Pine belirteçleri ve eski hex değer aramaları. - Varlık paketi üst verileri CSS girişi ve GitHub Packages dağıtımı. - Canlı Pine stil sayfası Varsayılan/açık tema belirteç takma adları ve değerleri. ## Kajabi Sage Tasarım Sistemi İlgili Kaynaklar ### Kiwi Orbit Gerçek ürün renkleri ve boşlukları, yerel bagaj seçenekleri, tutarlı bir fiyat dökümü ve eksiksiz yerel inceleme akışı içeren, seyahate odaklı bir Orbit kılavuzu. ### Maersk tasarım sistemi Gerçek açık tema rolleri, başlık ve metin ölçekleri, iç içe yarıçaplar ve tanımlayıcı işleme yoluyla Maersk’in operasyonel arayüz dilini inceleyin. Örnek bir gönderi sorgulaması, canlı lojistik verilerine erişim iddiasında bulunmadan tam referans eşleştirmesini ve erişilebilir bir olay geçmişini gösterir. ### Microsoft Fluent 2 Gerçek anlamsal tasarım belirteçleri, web yazı tipi ve boşluk ölçekleri, denetimli sekmeler ve doğrulanmış erişim iletişim kutusuyla bir Fluent UI React v9 çalışma alanı oluşturun. Tema değerlerini karşılaştırın, bileşen anatomisini inceleyin ve eksiksiz React örneğini kullanmadan önce yerel bir etkileşimi deneyin. - [Uygulama başvurusu](https://sage.kajabi.com/pages/component/copy_text) - [Kaynak](https://cdn.jsdelivr.net/npm/@kajabi-ui/styles@latest/dist/pine/pine.css) - [Kaynak](https://sage.kajabi.com/pages/foundations/typography) - [Kaynak](https://sage.kajabi.com/pages/component/copy_text) - [Destekleyici belirtimi okuyun](https://sage.kajabi.com/pages/index) - [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/Kajabi/sage-lib/develop/packages/sage-assets/README.md) - [Destekleyici belirtimi okuyun](https://sage.kajabi.com/pages/foundations/color) - [Destekleyici belirtimi okuyun](https://sage.kajabi.com/pages/foundations/typography) - [Destekleyici belirtimi okuyun](https://sage.kajabi.com/pages/component/copy_text) - [Destekleyici belirtimi okuyun](https://raw.githubusercontent.com/Kajabi/sage-lib/develop/packages/sage-assets/package.json) - [Kod referansı](https://sage.kajabi.com/pages/component/copy_text) - [Sage genel bakış İçerik üretici ürünleri, Rails ve React.](https://sage.kajabi.com/pages/index) - [Tipografi özellikleri Yayımlanmış sınıf boyutları ve kalınlıkları.](https://sage.kajabi.com/pages/foundations/typography) - [Kopyalama bileşenleri Yapı, Rails özellikleri ve kısaltma yönergeleri.](https://sage.kajabi.com/pages/component/copy_text) - [Renk yönergeleri Amaçlı etkileşim ve geri bildirim kullanımı.](https://sage.kajabi.com/pages/foundations/color) - [Sage varlık bağımlılığı Harici Pine belirteçleri ve eski hex değer aramaları.](https://raw.githubusercontent.com/Kajabi/sage-lib/develop/packages/sage-assets/README.md) - [Varlık paketi üst verileri CSS girişi ve GitHub Packages dağıtımı.](https://raw.githubusercontent.com/Kajabi/sage-lib/develop/packages/sage-assets/package.json) - [Canlı Pine stil sayfası Varsayılan/açık tema belirteç takma adları ve değerleri.](https://cdn.jsdelivr.net/npm/@kajabi-ui/styles@latest/dist/pine/pine.css)