Tokens · Typography

Line-height (leading)

Beş aşamalı satır yüksekliği skalası — display başlıklar için sıkı (1.0), uzun gövde metni için rahat (1.7). Tüm tipografi bileşenleri bu token'lardan birini referanslar; ham sayı yazılmaz.

01 · Skala

Yeşil çizgiler her token'ın baseline ızgarasıdır
--nb-leading-none1.0
Display, hero rakamlar, dashboard counter'lar — satırların üst üste binmemesi gereken yer
İşletmenin tüm zekası,
tek bir kanalda
--nb-leading-tight1.15
H1–H2 başlıklar, kart başlıkları, metric label
Sipariş Panosu — bugün
247 sipariş işlendi
--nb-leading-snug1.35
H3–H4, kanban kart başlıkları, label çiftleri
Hazırlanıyor: Margerita pizza
2x · 370 TL · 12dk
--nb-leading-normal1.5
Default body — panel kopyası, form yardım metni
Müşterileriniz sadece WhatsApp kullanarak sipariş verir. Ekstra uygulama gerektirmez. Onboarding süreci 30 saniyede tamamlanır.
--nb-leading-relaxed1.7
Uzun pasajlar — FAQ cevapları, blog/dokümantasyon, marketing açıklama
Nexberry; mesajlaşma, sipariş, sadakat, ödeme, kurye yönetimi ve raporlamayı tek bir akışta birleştirir. WhatsApp Business API üzerine inşa edilmiş katmanlı bir mimari sayesinde her etkileşim aynı bağlamda kayıt altına alınır. Restoran, perakende, emlak ve mobilya için optimize edilmiş hazır akışlar günler içinde üretime girer.

02 · Bileşen → token eşleşmesi

Her tipografi rolünün hangi leading'i kullandığı
BileşenTokenDeğerNotlar
nb-display (hero)--nb-leading-none1.0clamp(2.5rem, 6vw, 6rem); kelime sarımı manuel <br/>
nb-h1--nb-leading-tight1.15Düşürülmüş; eskiden 1.05 idi — orfan satırı engellemek için
nb-h2 / kart başlığı--nb-leading-tight1.15Tek satıra sığması beklenir; iki satıra düşerse snug'a geç
nb-h3 / panel section--nb-leading-snug1.35Kanban kart başlığı 14px → 19px satır yüksekliği
nb-body--nb-leading-normal1.5Default; eski değer 1.6 → bu token'a hizalandı
nb-body-sm--nb-leading-normal1.514px metin için yeterli; 1.55 olarak yuvarlanır
nb-app (12px panel)--nb-leading-snug1.35Dense panel; 1.5 fazla boşluk yaratır
FAQ cevap, blog--nb-leading-relaxed1.740+ karakterli paragraflar için
nb-caption--nb-leading-snug1.3511–12px yardımcı metin

Kullanım kuralları

· Hardcoded line-height: 1.6 yazma — token kullan: line-height: var(--nb-leading-normal).
· Marketing display'lerde --nb-leading-none kullan; satırlar üst üste binmesin diye satır sonlarını manuel <br/> ile yönet.
· Çok dilli içerikte (TR/AR) --nb-leading-relaxed'a kadar çıkmaktan kaçınma; Türkçe diakritik (ç, ğ, ş) için tight'tan altına inme.
· Form input'larda token kullanılmaz — input line-height: 1 + dikey padding ile dengeler.
· Erişilebilirlik: WCAG SC 1.4.12 gereği body metni en az 1.5; bu nedenle --nb-leading-normal minimum body değeridir.