İlkeler

Ürün bir dosyaya zaten orada olduğu için güvenmez. Bir sayfa da içeriği için sonradan çalışması beklenen bir betiğe güvenmez: içerik yerini sunucunun gönderdiği HTML ile kazanır. O HTML bitmiş hâldir: her kelime okunur, her görsel çizilmiştir.

Ortak belirme hareketi bu hâlin üzerine ancak betiği çalıştıktan sonra ve ziyaretçi daha az hareket istemediyse hareket ekler. Yani belirme hareketi içeriğin ortaya çıkma yolu değildir; zaten orada olan içeriğin hareket etme yoludur. Ana sayfanın açılışı ve iki kaydırma sahnesi ise başlangıç duruşlarını kendileri yazar ve betik kapalıyken ya da daha az hareket istendiğinde bitmiş hâle döner.

html.motion [data-r] {
  transform: translateY(14px);
  transition: transform 0.8s var(--ease-out-quart);
}
html.motion [data-r].in { transform: none; }
html.motion [data-r="rule"] { transform: scaleX(0); transform-origin: left; }
html.motion [data-r="rule"].in { transform: none; }

Kural 01: tasarımda zorunlu kıldıkları

• Betik kapalıyken her sayfa bütün çizimlerini yine gösterir; hiçbir belirme bloğu ön durumunda beklemez.

  NedenBetik hata verebilir, engellenebilir ya da kapatılabilir. Sayfa yine de iddia ettiği her şeyi söylemek zorundadır.

  TestHer değişiklikte bir testle korunur.

• Azaltılmış harekette hiçbir sayfa html.motion eklemez, her belirme bloğu son yerindedir ve hiçbir döngü başlamaz; bu yüzden duraklatma düğmesine gerek kalmaz.

  NedenDaha az hareket istemek, içeriği koreografisiz görmek istemektir; daha eksik bir sayfa istemek değil.

  TestHer değişiklikte bir testle korunur.

• Ortak belirme hareketi ön durumunu yalnızca html.motion altında yazar; bu sınıfı bir betik, yalnızca azaltılmış hareket kapalıyken ekler.

  NedenO ön durum varsayılan stillerde dursaydı, hiç çalışmayan bir betik içeriği gizli bırakırdı.

  TestHer değişiklikte bir testle korunur.

• Sitede hiçbir şey opacity ile hareket etmez. Belirme hareketi transform, clip-path ya da kendini çizen bir çizgiyle yapılır; metin her karede tam kontrasttadır.

  NedenKısmi opacity, geçişin ortasında ölçülen kontrastı düşürüyordu. Ziyaretçinin görebileceği her kare, geçmesi gereken bir karedir.

  TestHer değişiklikte bir testle korunur.

Bir tasarım kuralı da ürünün kanıtı gibi denetlenir: kimsenin sözüyle değil, her değişiklikte koşan bir denetimle. Bu sayfalardaki her kural kartı, kuralı bir testin mi denetlediğini yoksa yalnızca incelemenin mi koruduğunu söyler. Kimsenin çalıştırmadığı bir kılavuz, bir iddiadır.

Sayılar da aynı kurala uyar. Bu sayfalardaki değerler derleme sırasında kaynak dosyalarından hesaplanır, elle yazılmaz; kontrast oranı iki ondalıkta kesilir, asla yukarı yuvarlanmaz. Böylece eşiğin hemen altındaki bir çift, eşiği geçmiş gibi görünmez.

Kural 02: tasarımda zorunlu kıldıkları

• Bir kural onu neyin koruduğunu söyler: her değişiklikte koşan bir test mi, inceleme mi. Test yoksa kart bunu açıkça söyler.

  NedenBir test, kuralın çiğnendiği gün yayından önce derleme hattını durdurur; inceleme ise yalnızca incelemecinin fark ettiğini yakalar. Bu sayfa kendi kartlarını da denetler: test diye işaretlenen her kart, o adla var olan bir teste bağlıdır; test yeniden adlandırılır ya da silinirse derleme hattı yine durur.

  TestHer değişiklikte bir testle korunur.

• Kontrast oranları token değerlerinden hesaplanır ve iki ondalıkta kesilir, asla yukarı yuvarlanmaz.

  NedenElle yazılan bir sayı, anlattığı tokendan zamanla kopar. Yuvarlanmış bir oran, geçmeyen bir çifti geçiyormuş gibi gösterebilir.

  TestHer değişiklikte bir testle korunur.

• Yüzde işareti tek bir sözleşme rakamına ayrılmıştır. Yanına başka bir sayı yazılırsa, görünen metinde de alt, title ya da meta açıklaması gibi bir metin özniteliğinde de derleme başarısız olur.

  NedenYüzde bir ölçüm gibi okunur. Sayfada görünen tek yüzde, sözleşmeye yazılmış bir taahhüttür; işaretin yanındaki başka her sayı bir iddia olurdu.

  TestHer değişiklikte bir testle korunur.

• Ölçemeyen bir görsel daha çok değil, daha az söyler. Betiği yokken bütünlük satırı sayı göstermez ve noktası sönük kalır.

  NedenSayı, sayfanın kendi güvenlik başlığından gelir. Başka bir yerden gelen sayı bir iddia olurdu.

  TestHer değişiklikte bir testle korunur.

Üründe her değişiklik alarm olabilmeden önce tartılır ve çoğu hiç alarm olmaz. Sitede renk de aynı sırayla harcanır. Token dosyası iki renge bir anlam verir: ana sayfadaki kanıt sahnesinde ham renk ham, doğrulanmamış değişiklikleri, vurgu rengi ise triyajdan sonra kalan sinyali, yani tek alarmı çizer. Ham renk alarm kırmızısı değil, soluk bir tuğla tonudur. Sitenin başka yerlerinde kullanıldığı hâliyle vurgu rengi tarama çizgilerini, ilerlemeyi, bağlantı alt çizgilerini ve odak halkasını da işaretler; ham renk ise işaretlenen dosyaları ve bulguları. Geri kalan her şey sıcak kâğıt üzerinde mürekkeptir.

Hareket de aynı tutumla kullanılır. Bir görsel bir şeyi anlatmak için hareket eder, sonra sonucunu tutar; süren bir döngü o sonucu hiç silmez ve her zaman duraklatılabilir.

Kural 03: tasarımda zorunlu kıldıkları

• Palet kapalıdır. Tailwind'in varsayılan renkleri silinmiştir; renk sınıfları yalnızca tek bir dosyadaki tokenlar için vardır: 11 renk, artı transparent ve current.

  NedenVarsayılan bir Tailwind rengi bir yardımcı sınıfla içeri giremez. Keyfi değerler ve bileşen stillerine elle yazılan renkler ise bir testin değil, incelemenin işidir.

  TestHer değişiklikte bir testle korunur.

• Kanıt sahnesinde ham renk her ham değişikliği çizer; vurgu rengi yalnızca triyajdan sonra kalan sinyali çizer.

  NedenTek renkle çizilmiş bir sahne tek bir grafik gibi okunur. Gürültünün kendi rengi olmalı; token dosyası bu rengi alarm kırmızısı değil, soluk bir tuğla tonu olarak tutar.

  İncelemeBir testle değil, incelemeyle korunur.

• Vurgu rengi küçük metin taşımaz. Vurgu tonundaki metin accent-deep ile yazılır; vurgu renginin kendisi çizgileri, halkaları ve noktaları işaretler.

  NedenKâğıt üzerinde vurgu rengi 4,38:1 hesaplanır; küçük metin için AA alt sınırının altındadır. Erişilebilirlik taraması her sayfada çalışır ve ölçebildiği, eşiğin altında kalan her metinde başarısız olur.

  TestHer değişiklikte bir testle korunur.

• Belirme motorunun başlattığı her döngünün yanında, aynı sayfada görünür bir duraklatma düğmesi vardır.

  NedenZiyaretçi istemedikçe bir döngü gürültüdür. Duraklatma kararı her sayfada geçerli kalır; döngüler ekran dışında ve arka plandaki bir sekmede de durur.

  TestHer değişiklikte bir testle korunur.

Ürün dışarıya hiçbir yol olmadan her tespiti çalıştırmayı sürdürür; site de kendini aynı kurala bağlar. Bir sayfa çizilmek için başka bir kökenden hiçbir şeye ihtiyaç duymaz: iki yazı tipi ailesi de bu depodaki dosyalardır, paylaşım görselleri derleme sırasında çizilir ve bu sayfadaki token değerleri, oranlar ve dosya boyutları derleme sırasında dosyalardan okunur, bir servisten çekilmez.

Tek bir istisna gizlenmez, denetimde açıkça tanımlıdır: iletişim formundaki bot denetimi betiğini kendi sağlayıcısından yükler, yalnızca o sayfada. Her sayfanın politikası betikler, çerçeveler ve bağlantılar için bu sağlayıcıyı yine de anar; betiği iletişim sayfasında tutan şey denetimdir.

default-src 'self';
img-src 'self' data:;
font-src 'self';
object-src 'none';
base-uri 'self';

Kural 04: tasarımda zorunlu kıldıkları

• Yazı tipi bu kökenden sunulur. İki aile de yerel dosyadır ve güvenlik politikası yazı tiplerine yalnızca bu kökenden izin verir; bir sayfa bir yazı tipi servisini ansa bile onu yükleyemez.

  NedenBir yazı tipi servisini bekleyen sayfa, o servise ulaşılamayan yerde farklı görünür ya da hiç görünmez.

  TestHer değişiklikte bir testle korunur.

• Paylaşım görselleri derleme sırasında çizilir; sayfa bir görseli anmadan önce o görsel derlemede var olmak zorundadır.

  NedenÖnizleme kartı sayfanın bir parçasıdır. Depodaki dosyalardan üretilir, bir görsel servisinden istenmez.

  TestHer değişiklikte bir testle korunur.

• Sayfalar betikleri yalnızca bu kökenden yükler. Tek istisna iletişim formundaki bot denetimidir ve derleme denetimi onu adıyla anar: o betik, o sağlayıcıdan, yalnızca iletişim sayfasında.

  NedenKapalı bir ağ başka bir kökene ulaşamaz. Denetimin adıyla andığı bir istisna yayılamaz: aynı betik ikinci bir sayfada ya da ikinci bir sağlayıcıdan gelen bir betik derlemeyi durdurur.

  TestHer değişiklikte bir testle korunur.

• Bu sayfa başka bir kökenden hiçbir şey istemez. Kendi testi, sayfanın yaptığı her isteği kaydeder ve dışarı çıkan herhangi bir istekte başarısız olur.

  NedenKural, söylendiği yerde denetlenir.

  TestHer değişiklikte bir testle korunur.

Tek bir dil iki üslupla konuşur; her üslup, onu okuyan insanlar için seçilmiştir.

Sitenin derdini anlatmak için birkaç saniyesi vardır; bu yüzden iddialı üslupla konuşur: tam ağırlıkta başlık yazısı, sıcak kâğıt, sinyal için tek bir vurgu rengi ve bir şeyi anlatan hareket. Zero Door ise uzun süre okunan bir çalışma aracıdır; bu yüzden sakin üslupla konuşur: varsayılan olarak koyu tema, duruma ayrılmış doygun renk, bir eylemi onaylayan kısa hareket ve veri için yoğunluk.

Üsluplar bilerek farklıdır ama aynı ailedendir. İkisinin altında da dört kural, glif, ease-out eğrisi ve orta köşe yarıçapı vardır. Ürünün açık teması sitenin kâğıt, ince çizgi ve ikincil metinden oluşan nötr ton dizisini de kullanır; varsayılan koyu teması kullanmaz. Aşağıdaki tablolar iki token dosyasını doğrudan karşılaştırır: her eşleşme hesaplanır, öne sürülmez.

İki dosya da yayımlanır: sitenin token dosyası ve Zero Door token anlık görüntüsü.

İki üslubun paylaştıkları

Bilerek ayrıldıkları yerler