Yerleşim ve biçim

Her sayfa tek bir sütuna, sitenin stil dosyasındaki wrap yardımcı sınıfına oturur. Bu sınıf içeriği ortalar, 1200px genişlikte büyümeyi bırakır ve iki yanda 28px genişliğinde bir oluk tanımlar; böylece en geniş içerik satırı 1144px olur. İkinci, daha dar bir kapsayıcı da, içinde bir sütun ızgarası da yoktur.

İçerik genişliği, wrap genişliğinden iki oluk çıkarılarak bulunur. 1200px altında wrap pencereyi doldurur; üstünde yan boşluklar büyür, sütun yerinde kalır.

Oluğu korumak

wrap bir Tailwind yardımcı sınıfıdır; utilities katmanında durur ve bir bileşenin kendi stilleri onu ezer. Bu yüzden wrap taşıyan bir öğe yalnızca dikey iç boşluğunu, padding-block ile yazar. padding kısaltması yatay iç boşluğu da belirler ve oluğu siler.

Kullanımda kısaltmayı yazan bir öğe yok; her wrap her pencere genişliğinde oluğunu korur.

Okuma genişliği

Daha dar ölçüler bileşenlerin içinde, çoğunlukla ch birimiyle verilir. Araştırma yazıları ve yasal metinler en fazla 68ch genişliğinde tek bir sütun kullanır ve bu sütun kapsayıcıda ortalanır. 1180px ve üstünde sağa, 56px uzağa 220px genişliğinde bir içindekiler şeridi eklenir.

Kenardan kenara sahneler

Ekrana sabitlenen üç sahne kapsayıcının dışına bilerek çıkar: ana sayfanın açılışı ve iki kaydırma sahnesi, yani ana sayfadaki sonuçlar sahnesi ile Zero Door sayfasındaki karar sahnesi. Açılışın sahnesi pencereyi doldurur, metni ise wrap içinde kalır. Diğer ikisinde sahne pencerenin sağ kenarına kadar uzanır ve metin sütunu sol iç boşluğunu kendisi belirler: max(28px, calc((100vw - 1200px) / 2 + 28px)). Bu değer 1200px genişliğe kadar oluğa, daha geniş pencerelerde wrap'in yan boşluğu ile oluğun toplamına eşittir. Böylece metin her pencere genişliğinde sayfanın geri kalanıyla aynı sütun kenarından başlar.

Sabit üst menünün altında

Üst menü sayfa kayarken yukarıda kalır: 66px yüksekliğinde bir satır ve altında 1px kalınlığında bir kıl çizgi. Klavye odağı alabilen her öğenin üstünde 84px, bağlantıların atladığı Section bileşeninin üstünde 80px kaydırma payı bulunur; böylece hiçbiri menünün altında kalmaz.

• wrap yardımcı sınıfı en fazla 1200px genişliğindedir ve iki yanda 28px genişliğinde bir oluk tanımlar.

  NedenTek bir sütun kenarı üst menüyü, her bölümü ve alt bilgiyi hizalar. Test yardımcı sınıfı sitenin stil dosyasından okur; bir değer değişirse ya da oradaki bir medya sorgusu onu değiştirirse başarısız olur.

  TestHer değişiklikte bir testle korunur.

• wrap taşıyan bir öğe yalnızca dikey iç boşluğunu, padding-block ile yazar.

  NedenBileşenin kendi iç boşluğu utilities katmanını ezer; padding kısaltması bu yüzden oluğu siler. Test, wrap taşıyan bir öğeye yatay iç boşluk yazan her stili bulur; bilinen istisnalar listesinde olmayan birini bulursa başarısız olur. Bu liste bugün boştur.

  TestHer değişiklikte bir testle korunur.

• Klavye odağı sabit üst menünün altında gizlenmez.

  NedenWCAG 2.2 başarı ölçütü 2.4.11. Odaklanabilen her öğenin üstünde menünün yüksekliğinden fazla, 84px kaydırma payı vardır. Testler /, /zero-door ve /tr/contact sayfalarında, masaüstü penceresinde ve bu pencere 390px genişliğe daraltılmışken bir kez daha ileri ve geri sekme tuşuyla gezer; odaktaki bir öğe tamamen örtülürse başarısız olur.

  TestHer değişiklikte bir testle korunur.

• Tek bir kapsayıcı vardır. Daha dar ölçüler bileşenlerin içinde, çoğunlukla ch birimiyle verilir.

  Nedenİkinci bir kapsayıcı ikinci bir sütun kenarı demektir. ch biriminde bir ölçü yazı boyutunu izler; satır her genişlikte okunur kalır.

  İncelemeBir testle değil, incelemeyle korunur.

Web sitesinde bir aralık ölçeği yoktur. Dikey boşluğu sayfayı oluşturan bileşenler belirler ve her biri kendi iç boşluğunu taşır. Bir iç sayfa bölümünün üstünde ve altında her pencere genişliğinde 72px boşluk vardır.

Bu tablodaki her değer 8'in katıdır: 32px, 40px, 56px, 64px, 72px ve 96px. Derleme ve bir birim testi bunu denetler; bir bandın iç boşluğu değişirse bu sayfayla birlikte gözden geçirilir.

Bölüm içindeki satırlar

Sırayla yön değiştiren özellik satırları kendi iç boşlukları ve aralarındaki kıl çizgiyle ayrılır: Zero Door sayfasında üstte ve altta 48px, Hizmetler sayfasında 56px. 900px ve altında bu değerler 36px ve 40px olur.

Bileşenlerin içinde

Bir bileşenin içinde aralıklar düz piksel değerleriyle yazılır. Yayındaki bileşenlerde padding, margin ve gap için yazılmış sıfırdan büyük 810 değerin 772 tanesi çift sayıdır, 471 tanesi 4'ün, 268 tanesi 8'in katıdır. En çok kullanılanlar: 10px, 12px, 14px, 28px ve 8px. Bu değerler 4 ya da 8 piksellik bir ızgaraya oturmaz; bu sayfa da varmış gibi bir ızgara göstermez. Zero Door arayüzünün ise bir aralık ölçeği vardır; sayfanın sonunda yer alır.

• İç sayfaları Section ile kurun ve CtaBand2 ile kapatın.

  Nedenİkisi de aynı 72px iç boşluğu, üstte bir kıl çizgiyi ve 80px kaydırma payını taşır; böylece her iç sayfa aynı ritmi korur ve çapa bağlantıları aynı yere iner.

  İncelemeBir testle değil, incelemeyle korunur.

• Sayfa düzeyindeki iç boşlukları 8'in katlarında tutun.

  NedenYukarıdaki tabloda her bant buna uyar. Büyük ritim düzenli kalır, bileşenler ise daha ince adımlar kullanmakta serbest kalır. Test her bandı kendi bileşeninden okur.

  TestHer değişiklikte bir testle korunur.

Başka sistemlerin her öğeyi bir kutuya koyduğu yerde web sitesi çizgi çeker. Yapılandırılmış bir küme 1px kalınlığında bir mürekkep çizgisiyle açılır, öğeleri aynı kalınlıkta kıl çizgilerle ayrılır, numaralı öğeler sıralarını Geist Mono ile taşır. Bu sayfada ince çizgi 1px kalınlığındaki her çizgidir; kıl çizgi ise --color-hair ile çizilenidir.

• İçeriği yapılandıran 1px kalınlığındaki mürekkep çizgisi yalnızca bir kümenin üst kenarıdır.

  NedenMürekkep çizgisi bir grubun nerede başladığını söyler. Öğelerin arasına girerse listeyi bir deftere çevirir ve bu anlamını yitirir. Test sitedeki ve bu sayfadaki her bileşenin stilini okur; mürekkep düğme (bir kontrol öğesi), ana sayfada açılmış bir kuralın çerçevesi (bir kutu) ve yukarıdaki Yapmayın örneği dışında başka bir kenarda mürekkep bulursa başarısız olur.

  TestHer değişiklikte bir testle korunur.

• Kenardan kenara her bant bir kıl çizgiyle açılır, her başlık alanı bir kıl çizgiyle kapanır.

  NedenTek bir çizgi ve bir ton değişimi bandın değiştiğini gösterir; hiçbir bandın kutuya ya da gölgeye ihtiyacı kalmaz.

  İncelemeBir testle değil, incelemeyle korunur.

Bölümler paper ya da paper-2 üzerinde durur ve sayfa genellikle ikisi arasında sırayla geçer; böylece her bölüm kendi bandı olarak okunur. Bant zemini olarak accent renginin açık tonu, accent-tint, tek bir yere ayrılmıştır: sayfayı bir eylem çağrısıyla kapatan banda.

• --color-paper#fdfaf6Sayfanın kendisi ve varsayılan Section.
• --color-paper-2#f6f3eeTonu paper-2 olan Section, alt bilgi ve görsel çerçeveleri.
• --color-accent-tint#d9f5f3Yalnızca kapanıştaki eylem çağrısı bandının zemini.
• --color-ink#0f1c26Koyu bantlar ve paneller: Zero Door sayfasındaki kanıt şeridi, kod ve dosya panelleri.

accent-tint üzerinde ink-subtle 4,5:1 değerine ulaşmaz. Bu yüzden kapanış bantlarında metin ink, ink-muted ve accent-deep ile yazılır.

Sırayla geçmek bir alışkanlıktır.

Kullanımda Mimari, Fiyatlandırma ve çözüm sayfaları tonları sıkı biçimde sırayla dizer; Şirket, Güven merkezi ve Zero Door sayfaları ise aynı tondaki iki bölümü art arda kullanır. Kod bu sıralamayı dayatmaz; bu yüzden bu sayfa ona kural demez.

• accent-tint'i bant zemini olarak yalnızca kapanıştaki eylem çağrısında kullanın.

  NedenAccent doğrulanmış sinyal demektir. Bant olarak sayfada bir kez, sayfanın okurdan bir şey yapmasını istediği yerde görünür. Başka bir bant zemininde accent-tint kullanırsa test başarısız olur; görsellerin içindeki etiketler ve satırlar onu kullanabilir.

  TestHer değişiklikte bir testle korunur.

Web sitesinin bir sütun ızgarası yoktur. Metin ve görseli yan yana koyan bölünmeler her bileşende eşit olmayan fr oranlarıyla yazılır; böylece bir taraf, çoğunlukla metin, öbüründen belirgin biçimde dar olur. İşin çoğunu dört oran görür.

Dar ekranda önce metin

900px ve altında her bölünme tek sütuna iner; aralık çoğunlukla 28px olur. Ters bir satır geniş ekranda metnini order: 2 ile ikinci sütuna taşır ve kırılım noktasında bunu 0 değerine geri alır; böylece telefonda metin her zaman görselden önce gelir.

Bölünmüş başlık alanları ve özellik satırları yalın fr izlerini korur ve görsel sütunlarına min-width: 0 verir; böylece geniş bir çizim kendi izini genişletemez. Yeni bir bölünme, tanım satırlarının yaptığı gibi her izi minmax(0, 5fr) olarak yazabilir; o zaman ikisine de gerek kalmaz.

Eşit sütunlar ve kart ızgaraları

Üçlü kümeler üç eşit iz kullanır; Mimari sayfasında bunlar repeat(3, minmax(0, 1fr)) olarak yazılır, yani küçülebilir. Mimari sayfasındaki ikili kartlar gibi birkaç çift iki eşit iz kullanır. Kart koleksiyonlarının çoğu ise boyutunu kendisi belirler: en küçük genişliği olan bir auto-fit iz; böylece sütun sayısı eldeki alanı izler.

• Metin ve görseli yan yana koyan bir bölünmeyi kapsayıcının içinde, eşit olmayan bir fr oranıyla yazın.

  NedenHizalanacak bir ızgara yoktur. Oran her düzen için ayrı seçilir; eşit olmayan bölünme metni daha büyük bir görselin yanında okunur bir genişlikte tutar. Uzun bir içerik sütunu genişletmesin diye görsel sütuna min-width: 0 verin ya da izleri minmax(0, …) ile yazın.

  İncelemeBir testle değil, incelemeyle korunur.

• Dar ekranda metin görselden önce gelir.

  NedenDar ekranda görsel sıra kaynak sırasına döner; okuma ve odak sırası okurun gördüğünü izler (WCAG 1.3.2 ve 2.4.3). Geniş ekranda yalnızca sütunun yeri değişir, anlam değişmez.

  İncelemeBir testle değil, incelemeyle korunur.

Web sitesi önce masaüstü için tasarlanır. Düzenini değiştiren bileşenler bunu çoğunlukla max-width sorgularıyla yapar; yayındaki bileşen ve stil dosyalarından genişlik sorgusu içeren 46 dosyanın 40 tanesi aynı değeri kullanır: 900px. Birkaç bileşen kendine ait bir kırılım noktası ekler. Kırılım noktası tokenı yoktur; her değer onu kullanan bileşenin içinde yazılıdır.

900px ve altında neler değişir

• Üst menünün bağlantı satırı ve sağdaki öğeler gizlenir; bir menü düğmesi aynı bağlantıları içeren bir panel açar.
• İki sütunlu bölünmeler tek sütuna iner, önce metin gelir.
• Çizgili sütunlar alt alta dizilir, yan çizgileri üst çizgiye dönüşür.
• Bölünmüş başlık alanlarının üst ve alt boşluğu 64px / 56px değerinden 40px / 32px değerine iner.
• Alt bilginin ızgarası iki sütuna iner.

• Önce masaüstü için tasarlayın ve max-width: 900px değerinde geçiş yapın.

  NedenOrtak tek bir kırılım noktası, üst menünün, bölünmelerin ve çizgili kümelerin pencere daraldıkça tek tek değil, birlikte değişmesi demektir. 900px dosyaların çoğunun kullandığı sorgu olmaktan çıkarsa test başarısız olur.

  TestHer değişiklikte bir testle korunur.

• Bir kırılım noktasını ona ihtiyaç duyan bileşenin içinde, düz bir değer olarak yazın.

  NedenBaşvurulacak bir kırılım noktası tokenı yoktur; değer, değiştirdiği düzenle aynı yerde durur ve tek bakışta okunur.

  İncelemeBir testle değil, incelemeyle korunur.

Her sayfa, WCAG 2.2'nin 1.4.10 başarı ölçütü için kullandığı genişlik olan 320 CSS pikselde, sayfa yana kaymadan yeniden akmak zorundadır. Bir test derlenen her sayfayı bu genişlikte açar; belge pencereden genişse başarısız olur.

Bu sayfadaki her tablo böyle bir kutunun içindedir. 320px genişlikte tablo kendi içinde kayar, sayfa yerinde durur.

• 320 CSS px genişlikte hiçbir sayfa yana kaymaz.

  NedenWCAG 2.2 başarı ölçütü 1.4.10, Yeniden akış. Test derlemedeki her sayfayı gezer; yeni bir sayfa eklendiği gün kapsama girer.

  TestHer değişiklikte bir testle korunur.

Biçim ölçülüdür. İki köşe yarıçapı tokenı vardır: kontrol öğeleri ve görsel üstü etiketler için 6px, kartlar ve görsel çerçeveleri için 8px. Çizgili yapılar, bölüm bantları ve ana sayfadaki kuralların çerçeveleri köşeli kalır: bunlar kutu değil, çizgidir.

İki tokenın dışında yarıçaplar düz değerle yazılır. Yaygın olanlar daireler ve 4px değeridir; 999px ise iki kapsül biçimini yuvarlar. Yukarıdaki satırlar yayındaki her bileşenden okunur; yeni bir düz değer burada görünür ve gözden geçirilene kadar bir birim testini kırar. Geri kalanlar yalnızca birkaç yerde geçer: 3px, 2px, 12px, 8px, 10px ve calc(8 * var(--u)).

• İki köşe yarıçapı tokenı 6px ve 8px değerindedir.

  NedenDaha büyük bir token yoktur. Test token dosyasını okur; bir değer değişirse ya da üçüncü bir yarıçap tokenı eklenirse başarısız olur.

  TestHer değişiklikte bir testle korunur.

• Kontrol öğelerinde ve görsel üstü etiketlerde radius-sm, kartlarda ve çerçevelerde radius-md kullanın.

  NedenKullanımda kontrol öğeleri ve yüzen etiketler çoğunlukla radius-sm, kartlar ve çerçeveler radius-md alır; bu yüzden köşe çoğu zaman bir kontrol öğesini bir kapsayıcıdan ayırır. Ayrım kesin değildir: yazılardaki kod blokları, yasal metin uyarısı ve bazı bulgu kartları radius-sm alır.

  İncelemeBir testle değil, incelemeyle korunur.

• Çizgili yapıları köşeli tutun.

  NedenÇizgili bir küme çizgilerden oluşur. Köşelerini yuvarlamak onu yeniden bir kutuya çevirir.

  İncelemeBir testle değil, incelemeyle korunur.

Tek bir gölge tokenı vardır, bir yükselti ölçeği yoktur. Gölge yalnızca bir sayfanın ya da bir görselin üzerinde yüzen nesnelerde kullanılır: menü paneli, görsel üstü etiketler ve damgalar, çipler ve görsellerin içindeki yüzen kartlar. Sayfanın akışındaki kartların bir kenar çizgisi vardır, gölgesi yoktur.

--shadow-float: 0 12px 30px -18px rgb(15 28 38 / 0.45);

Gölge siyahla değil, mürekkep rengiyle (--color-ink #0f1c26) ve 0,45 alfa değeriyle düşer.

İki yarıçap tokenı ve gölge sitenin token dosyasında durur; dosyanın tamamı tokens.css olarak indirilebilir.

• --shadow-float'u yalnızca yüzen nesneler düşürür.

  NedenGölge, bir şeyin sayfanın üstünde durduğunu söyler. Akıştaki kartlar bunun yerine kıl çizgi bir kenarla ve tonla ayrılır. Test yayındaki bileşenlerde tokenın her kullanımını listeler ve yeni bir kullanımda başarısız olur; böylece her yeni kullanım bu kurala göre gözden geçirilir.

  TestHer değişiklikte bir testle korunur.

Zero Door arayüzü aynı dili sakin bir üslupla konuşur ve web sitesinin yapmadığını yapar: bir aralık ölçeği tanımlar. Aşağıdaki token değerleri ürünün token dosyasından, 2026-08-23 tarihli hâlinden alındı.

Bu bölümdeki ürün değerleri ürünün token ve bileşenlerinden alınmış bir anlık görüntüden gelir; bu anlık görüntü product-tokens.json olarak yayımlanır.

Aralık ölçeği

Ölçek 2px ile 64px arasında 12 adımdan oluşur. Her çubuk adımının gerçek genişliğinde çizildi. Kodda adımlar tek bir değişkeni besler, Yoğunluk başlığı altında gösterilen satır iç boşluğunu; bileşenler aralıklarını aynı değerleri taşıyan Tailwind yardımcı sınıflarıyla verir.

• --space-12px
• --space-24px
• --space-36px
• --space-48px
• --space-512px
• --space-616px
• --space-720px
• --space-824px
• --space-932px
• --space-1040px
• --space-1148px
• --space-1264px

Kabuk

Her ekranı çevreleyen çerçeve bileşenlerinde token olarak değil, Tailwind sınıfları ya da bir bileşen varsayılanı olarak yazılır. Aşağıdaki değerler bu bileşenlerden, 2026-10-09 tarihli hâllerinden okunur. İçerik oluğu 24px; web sitesinde ise 28px.

Yarıçap

Üründe üç yarıçap tokenı vardır: giriş alanları, rozetler, etiketler, ipuçları ve küçük düğmeler için 4px; orta ve büyük düğmeler, menüler ve boş durumlar için 8px; komut paleti gibi en büyük yüzeyler için 12px.

• --radius-sm4px
• --radius-md8px
• --radius-lg12px

Gölge

Ürün her tema için iki gölge tokenı tanımlar. Düz gölge seçili bir öğeyi, örneğin kenar çubuğundaki etkin satırı işaretler; yükseltilmiş gölge katmanların altında durur: iletişim kutuları, yan paneller, çekmeceler, menüler, ipuçları ve komut paleti. İki token da siyahla düşer; web sitesi ise tek gölgesini mürekkep rengiyle düşürür.

Yoğunluk

Ürün iki yoğunluk kipi sunar. Sıkı kip kodda tek bir şeyi değiştirir: tablo satırlarının dikey iç boşluğu 12px değerinden 6px değerine iner. Varsayılan rahat kiptir; kullanıcı menüsündeki bir kontrol öğesi ikisi arasında geçiş yapar.

Web sitesiyle ortak olan: radius-md ikisinde de 8px. Farklı olan: küçük yarıçap üründe 4px, web sitesinde 6px; ürün ayrıca en büyük yüzeyleri için 12px ekler.