Zero Door arayüzü

Zerone tek bir tasarım dilini iki üslupla konuşur. Web sitesinin anlatacak bir derdi vardır, bu yüzden iddialıdır. Arayüz ise bütün bir vardiya boyunca açık kalan bir araçtır, bu yüzden sakindir: bilgi olmayan her şey geri çekilir, renk duruma ayrılır.

Dört kural ve her birinin zorunlu kıldığı kararlar İlkeler sayfasında anlatılır.

İki tema da aynı renk rollerini aynı adlarla tanımlar; bir bileşen bir kez yazılır. Burada arayüzün 15 rolü gösteriliyor, küçük bir grafik paleti dışarıda bırakıldı. Koyu tema grafittir, nötre yakın bir gri (OKLCH renk açısı 250); açık tema sıcak kâğıttır (renk açısı 75). Ürün koyu temayla açılır ve işletim sisteminin ayarını izlemez; herkes kullanıcı menüsünden değiştirebilir.

Derinliği üç yüzey kurar.

Gezinme ikincil yüzeyde, içerik temel yüzeyde; paneller, ipuçları ve komut paleti yükseltilmiş yüzeyde durur. Koyu temada her basamak biraz daha açıktır; açık temada üçünün en parlağı yükseltilmiş yüzeydir.

Grafit, varsayılan

Sıcak kâğıt

Odak

Klavye odağı, focus-ring rolünde 2 piksellik bir halkadır; odaklanan öğeden 2 piksel uzakta durur ve aradaki boşluk yüzey rengindedir, böylece her dolgu üzerinde okunur. Tablo satırında halka içeri, satırın kendi kenarının içine çizilir. Halka yalnızca klavye odağında görünür ve her yüzeyde 3:1 tutulur.

• Her metin ve sinyal rolü, iki temada da üç yüzeyin hepsinde en az 4,5:1 okunur.

  NedenDurumu küçük sözcükler taşır. Yeniden ayarlanan bir token çizginin altına düşerse durum okunmaz olur; bu yüzden burada yayımlanan değerler bu depoda denetlenir, ürün de kendi değerlerini CI'da denetler.

  TestHer değişiklikte bir testle korunur.

• fg-subtle, her yüzeyde hâlâ 4,5:1 okunan en sessiz ayara sabitlenmiştir.

  NedenSonraki bir düzenleme, ürünün testi başarısız olmadan üçüncül mürekkebi soldaramaz. Sabitleme yalnızca tokenı kapsar: kullanımda bazı etiketler azaltılmış opaklıkla yazılır ve test bunları denetlemez.

  ÜründeZero Door deposunda bir testle korunur.

Marka rolü arayüzde bağlantıları da boyar, ama 4,5:1 eşiğine tabi metin rolleri arasında değildir: koyu temada yükseltilmiş yüzeyde 4,36:1'e ulaşır. Bu durum Renk sayfasında anlatılır.

Arayüz, nötr bir zemin üzerinde mürekkeptir. Yukarıda gösterilen 15 arayüz rengi rolü arasında yalnızca dört sinyal doygundur: OKLCH kromaları 0,11 ile 0,18 arasındadır ve öbür rollerin hiçbiri 0,1 değerini aşmaz. Bu yüzden renkli bir sözcük tek bir şey söyler: buraya bak. Satır boyanmaz, dolu rozet kullanılmaz; renk bir noktada, bir sözcükte ya da bir simgede kalır ve anlamı hiçbir zaman tek başına taşımaz.

Önem derecesi sinyallerin üçünü kullanır: kritik için tehlike, yüksek için uyarı, orta için bilgi. Düşük ve bilgi dereceleri aynı sessiz mürekkebi, fg-subtle'ı paylaşır ve yalnızca sözcükle ayrılır. Durum rozetleri dört sinyalin hepsini kullanır. Önem derecesi dışındaki şeyleri gösteren grafikler sinyallerden ölçülmüş bir mesafede duran kendi ayarlı paletlerini kullanır; düşük doygunlukta bir mavi olan odak halkası ise yalnızca klavye odağında görünür.

• Arayüzün renk rolleri arasında yalnızca dört sinyal doygundur.

  NedenMarka, odak ve bütün nötrler düşük kromada kalır; böylece doygun bir sözcük durum olarak okunur. Yukarıda dışarıda bırakılan grafik paleti tek doygun öbür kümedir ve ürünün aşağıdaki testi onu sinyallerden uzak tutar. Bu site yayımlanan anlık görüntüyü sabitler; kuralı bozan bir eşitleme burada derlemeyi durdurur.

  TestHer değişiklikte bir testle korunur.

• Bir durum rozeti her zaman simge ve sözcük taşır; renk tek başına kalmaz.

  NedenRenk körlüğü, gri tonlu bir çıktı ya da ekrandaki parlama rengi siler. Sözcük ve biçim kalır.

  ÜründeZero Door deposunda bir testle korunur.

• Önem derecesi anlamına gelmeyen grafik renkleri her sinyal renginden ölçülmüş bir mesafede durur.

  NedenKomşu panellerde yüksek önemli bir alarm ile değiştirilmiş bir dosya asla aynı rengi paylaşmamalı.

  ÜründeZero Door deposunda bir testle korunur.

Arayüz metni Inter ile dizilir. Yazı tipi, ürünle birlikte dağıtılan tek bir değişken yazı tipi dosyasından gelir; kapalı ağdaki bir kurulumun yazı tipi sunucusuna ihtiyacı olmaz. Hiyerarşiyi boyut ve ağırlık kurar: ekranın yoğun bölümleri için dört sabit rol, 24 piksellik sayfa başlığı ve büyük harfli tablo başlığı; ağırlıklar 400, 500 ve 600. Daha kalın bir ağırlık kullanılmaz.

Sayılar ve makine metni

Tablolar her rakamı eşit genişlikte dizer; sayı ve zaman sütunları hizalı durur. Makine değerlerinin karakter karakter hizalanması gereken yerde, örneğin bir değişikliğin öncesi ve sonrasındaki özet yan yana durduğunda, ürün bu sitenin makine metni için kullandığı Geist Mono yazı tipini kullanır; o da ürünle birlikte dağıtılan ikinci bir değişken yazı tipi dosyasından gelir.

• Üç yoğun rol kesin boyut ve satır yüksekliğine, üst satır rolü ise harf aralığı ve ağırlığına sabitlenmiştir.

  NedenYoğun bir ekran ancak her tablo, liste ve panel aynı birkaç boyuttan beslenirse okunaklı kalır.

  ÜründeZero Door deposunda bir testle korunur.

• Hiyerarşi yalnızca 400, 500 ve 600 ağırlıklarını kullanır.

  NedenDaha kalın bir ağırlık ya da gösterişli bir yazı tipi arayüzü verisinden daha gürültülü yapardı.

  İncelemeBir testle değil, incelemeyle korunur.

Web sitesinin yazı tipleri ve yazı ölçeği Tipografi sayfasında anlatılır.

Token dosyası 2 ile 64 piksel arasında 12 adımlık bir ölçek tanımlar. Kullanımda bileşenler aralığı Tailwind'in karşılık gelen adımlarıyla verir; ölçekte tanımlı olmayan 10 ve 14 piksellik adımlar da kullanılır. 24 piksellik sayfa kenar boşluğu tabloları, sayfa başlıklarını ve alt bilgileri aynı çizgiye getirir.

Yoğunluk

İki yoğunluk kipi vardır: varsayılan olarak rahat, istenirse sıkı; kullanıcı menüsünden değiştirilir. Sıkı kip tek bir şeyi değiştirir: tablo satırlarının dikey iç boşluğu 12 pikselden 6 piksele iner. Yazı boyutu değişmez; sıkı tablo küçülmeden yoğunlaşır.

• Yoğunluk satır boşluğunu değiştirir, yazı boyutunu asla.

  NedenDaha çok satır sığdırmak için yazıyı küçültmek okunaklılığı sayıyla takas etmek olurdu. Ürün yazıyı korur, satırları sıkılaştırır.

  İncelemeBir testle değil, incelemeyle korunur.

Web sitesinin kapsayıcısı, ritmi ve köşe yarıçapı Yerleşim ve biçim sayfasında anlatılır.

Köşe yarıçapı 3 boyuttan oluşur ve 12 pikselde durur. Derinliği çoğunlukla yüzey basamakları ve ince çizgiler kurar; token dosyası iki gölge tanımlar: kenar çizgisinin yerine geçebilen düz bir gölge ve havada duran şeyler için yükseltilmiş bir gölge.

İki gölge, her temada ayrı.

Düz gölge, kenar çubuğundaki etkin satır gibi, bir satırı sakin bir katmandan hafifçe ayırır. Yükseltilmiş gölge yan paneller, ipuçları ve komut paleti içindir. Her tema kendi değerlerini tanımlar; kâğıtta okunan bir gölge grafitte kaybolur.

• Yarıçap ölçeği 12 pikselde durur.

  NedenKüçük köşeler yoğun yerleşimleri sıkı ve hizalı tutar; en büyük yarıçap havada duran yüzeyleri işaretler. Bu site yayımlanan anlık görüntüyü sabitler; kuralı bozan bir eşitleme burada derlemeyi durdurur.

  TestHer değişiklikte bir testle korunur.

• Token dosyası iki gölge tanımlar: düz ve yükseltilmiş.

  NedenDerinliği önce yüzey basamakları ve ince çizgiler taşır; bu yüzden gölge hâlâ bir şeyin havada durduğunu söyler. Kullanımda Tailwind'in küçük varsayılan gölgesi de iki yerde görünür: anahtarın düğmesinde ve bir panelde.

  TestHer değişiklikte bir testle korunur.

Arayüzde hareket bir eylemi doğrular ya da bir değişikliği görünür tutar; süslemez. Süre tokenları 130 ile 400 milisaniye arasındadır ve kullanımdaki hareketin neredeyse tamamı, ease-out eğrisi üzerindeki 130 milisaniyelik geri bildirim adımıdır. Üç şey tokenların dışında kalır: canlı bir güncellemenin dokunduğu satır 2200 milisaniye boyunca parlar, iskelet beklerken yavaşça nabız gibi atar ve meşgul bir düğmenin simgesi döner.

Süreler

Eğriler

Token dosyası 3 eğri tanımlar. Bir süre seçip oynatın; her birinin varışını karşılaştırın.

Basma geri bildirimi

Düğmeler ease-out eğrisiyle 130 milisaniyede boyutlarının 0,97 katına küçülür ve aynı yolla geri döner. Devre dışı bir düğme kıpırdamaz. Büyük kartlar ve paneller daha yumuşak bir basma kullanır: 0,99.

Hareket etmeyenler.

Günde defalarca yapılan klavye işleri hareket etmez: komut paleti tek karede açılır ve kapanır. Grafikler hareketsiz çizilir. Okur azaltılmış hareket istediğinde yumuşak kaydırma durur; her animasyon ve geçiş milisaniyenin yüzde birine iner ve bir kez oynar.

• Ortak parçalar geçişi yalnızca adıyla belirtilen özelliklere uygular: asla all ile bütün özelliklere, asla yerleşim ölçülerine.

  NedenDönüşümler ve renkler ucuz ve öngörülebilirdir. Genişliği, yüksekliği ya da kenar boşluklarını canlandırmak yoğun bir ekranı yeniden akıtır ve titretir.

  ÜründeZero Door deposunda bir derleme denetimiyle korunur.

• Azaltılmış hareket yumuşak kaydırmayı kapatır.

  NedenDaha az hareket isteyen okurun altından sayfa kaymamalı.

  ÜründeZero Door deposunda bir testle korunur.

• Günde defalarca yapılan klavye işleri hareket etmez.

  NedenGünde defalarca tekrarlanan bir animasyon her seferinde bir gecikmedir.

  İncelemeBir testle değil, incelemeyle korunur.

• Süre tokenları 130 ile 400 milisaniye arasındadır.

  NedenKimseyi bekletmeden doğrulayacak kadar kısa, görülecek kadar uzun. Bu site ürünün bileşenlerini değil, yayımlanan anlık görüntüyü sabitler; aralığı bozan bir eşitleme burada derlemeyi durdurur.

  TestHer değişiklikte bir testle korunur.

Web sitesinin doğrulamak yerine açıklayan hareketi Hareket sayfasında anlatılır.

Arayüz, burada rollerine göre adlandırılan birkaç düzine ortak parçadan kurulur. Düğmelerin bekleme, üzerine gelme, odak, basılı, devre dışı ve yükleniyor durumları vardır; alanların odak, geçersiz ve devre dışı durumları vardır; veri görünümleri iskeletle yüklenir.

Eylemler

Düğmeler dört türdür (birincil, ikincil, çerçevesiz ve tehlike) ve üç yüksekliği vardır: 32, 36 ve 44 piksel. Yalnızca simgeli düğmeler dokunmatik ekranda 44 piksellik bir hedefe büyür. Yüklenen bir düğme etiketini korur ve yanında küçük bir dönen simge gösterir; devre dışı bir düğme yarı yoğunlukta çizilir ve basılmaz.

İki adımlı onay

• Onay düğmesi ilk basışta hazırlanır; soruyu ve sonucunu gösterir.

  NedenBin alarmı kapatmak, bir alarmı kapatmanın gerektirdiği emek kadar düşünce istemeli.

  ÜründeZero Door deposunda bir testle korunur.

• Geri dönüşü olmayan ya da geniş kapsamlı işler iki adımlı onayı kullanır.

  NedenÜrünün testi düğmenin nasıl davrandığını tutar, nerede kullanıldığını değil; hangi işlerin onu kullanacağına incelemede karar verilir.

  İncelemeBir testle değil, incelemeyle korunur.

Girdiler

Metin alanları düğme yükseklikleriyle eşleşir; bir alan ve düğmesi aynı çizgide durur. Geçersiz bir alan tehlike rengi bir kenar alır ve yardımcı teknolojiler için geçersiz olarak işaretlenir. Arama alanı son tuştan sonra 300 milisaniye bekler, sonra arar. Seçim için kullanılan onay kutusu ve anahtar, açıkken marka rengini kullanır, asla bir durum rengini.

Durum

Yukarıda anlatılan nokta ve sözcük ile rozet. Etiket, filtreler ve kategoriler için sakin, nötr bir parçadır; asla durum rengi taşımaz. İpuçları da nötr kalır, kritik bir sayıyı açıklarken bile.

Simgeler

Simgeler 12, 16, 20, 24 ve 32 piksellik basamaklı bir ölçekte boyutlanır; simge küçüldükçe çizgisi kalınlaşır ki küçük bir simge yüzeyde kaybolmasın. Simge yanındaki metnin rengini alır ve anlamı tek başına taşımadıkça ekran okuyuculardan gizlenir. 12 piksellik basamak, etiketli bir rozetin içindeki simgelere ayrılmıştır.

• Simgeler, anlamı tek başına taşımadıkça süstür.

  NedenBir sözcüğün yanındaki simge, ekran okuyucuya aynı şeyi iki kez söyletir.

  ÜründeZero Door deposunda bir testle korunur.

• Ölçekteki her simge boyutunun kendi çizgi kalınlığı vardır.

  NedenHer boyutta aynı kalınlıkla çizilen bir simge küçük basamaklarda kıl gibi incelir ve yüzeyde kaybolur.

  ÜründeZero Door deposunda bir testle korunur.

Boş ve yükleniyor durumları

İskelet, gelecek içeriğin biçiminde sakin bir bloktur ve ekran okuyuculardan gizlenir. Boş durum öğretir: burada ne görüneceğini ve nasıl görüneceğini söyler, en fazla bir sakin eylemle. Hata durumu neyin başarısız olduğunu söyler, yeniden denemeyi önerir ve teknik ayrıntıyı bir tık uzakta tutar.

• İskelet yardımcı teknolojilerden gizlenir.

  NedenYükleniyor anlamına gelen bir biçimin ekran okuyucuya söyleyeceği bir şey yoktur; bölge, içerik geldiğinde onu duyurur.

  ÜründeZero Door deposunda bir testle korunur.

• Bir bölümün içindeki boş blok yeni bir başlık değil, bir durum satırıdır.

  NedenYoğun bir panelin içindeki başlık, ekran okuyucu kullanıcılarının dolaştığı ana hattı bozar.

  ÜründeZero Door deposunda bir testle korunur.

• Veri görünümleri ekranın ortasında dönen bir simgeyle değil, iskeletle yüklenir.

  Nedenİskelet yerleşimi sabit tutar ve neyin geleceğini gösterir; dönen simge ikisini de gizler.

  İncelemeBir testle değil, incelemeyle korunur.

• Boş durum neyin görüneceğini ve nasıl görüneceğini öğretir.

  NedenBoş bir ekran çoğu zaman ilk ziyarettir; yalnızca “burada bir şey yok” demek okuru gidecek bir yer olmadan bırakır.

  İncelemeBir testle değil, incelemeyle korunur.

Gezinme

240 piksellik kenar çubuğu 56 piksellik bir şeride daralır. Üst çubuk 56 piksel yüksekliğindedir ve komut paleti tetikleyicisini ortalar; tetikleyici Apple aygıtlarında Command tuşu ile K, diğerlerinde Ctrl K gösterir. Sayfalanan tablolar tek bir alt bilgiyi paylaşır: önceki yalnızca ilk sayfadan sonra, sonraki yalnızca son sayfadan önce görünür; tek sayfada hiçbir düğme çıkmaz.

Paneller

Ayrıntı, bitiş kenarındaki bir yan panelde açılır; varsayılan genişliği 480 pikseldir, böylece liste görünür kalır. Panel yükseltilmiş yüzeyde, yükseltilmiş gölgeyle durur; kapandığında odak onu açan öğeye döner.

Tablolar

Başlık etiketleri, satırlar kayarken yerinde kalan sabit bir başlık satırında küçük, büyük harfli sözcüklerdir; sıralanabilir bir başlık hangi yöne sıraladığını yardımcı teknolojilere söyler. Bir satır aynı anda seçili, açık ve klavye imlecinin altında olabilir. Seçim hafif bir marka rengi ve işaretli bir kutudur, açık satır ikincil yüzeyi alır, imleç ise içeriden çizilen ince bir halkadır; hem seçili hem açık bir satırda seçimin rengi görünür. 100 satırın üstünde tablo yalnızca ekrandakini çizer.

• Sıralanabilir ve düz tablo başlıkları tek bir harf biçimini paylaşır.

  Nedenİki harf biçimli bir başlık satırı iki tür sütun gibi okunur.

  ÜründeZero Door deposunda bir testle korunur.

Kesin değer her zaman elinizin altında.

Dar bir sütun yolu dizinden kısaltır ve dosya adını korur; özeti ortadan kısaltır ve iki ucunu korur, büyük bir sayıyı da kısa biçimde yazar. Tam değeri görmek için üzerine gelin; ekran okuyucular tam değeri okur.

İki üslup aynı dilin üzerinde durur. Glif, nötr kâğıt dizisi, ease-out eğrisi, 8 piksellik köşe yarıçapı ve basma hissi ortaktır; iki kural da öyle: renk hiçbir zaman tek başına çalışmaz ve azaltılmış hareket tercihine uyulur. İşin ayrıştığı yerde bilerek ayrışırlar.

• ease-out eğrisi iki yüzeyde de aynı değerdir.

  NedenSitedeki basma hissi ile arayüzdeki geri bildirim aynı elden çıkmış gibi hissettirmeli.

  TestHer değişiklikte bir testle korunur.

• Glif iki yüzeyde de aynı yoldur.

  NedenTek bir işaret tek bir şirket gibi okunmalı. Anlık görüntü, ürünün glif yolunun özetini ve viewBox değerini tutar; bu depodaki bir test ikisini bu sitenin glifiyle karşılaştırır.

  TestHer değişiklikte bir testle korunur.

• Kullanımda sitenin kâğıdı, ince çizgileri ve sessiz mürekkepleri arayüzün açık temasıyla aynı renklere çıkar.

  NedenBu eşleşmeyi tanımlayan bir belge yok; gözlemdir. Bu depodaki bir test, iki taraftan birinde oluşan sapmayı yakalar.

  TestHer değişiklikte bir testle korunur.

Sitenin bu nötrleri de içeren paleti Renk sayfasında anlatılır.

Bu sayfadaki her token değeri (renk, aralık, yarıçap, gölge, eğri ve süre) ürünün token dosyasının bir anlık görüntüsünden derleme sırasında okunur; her oran elle yazılmaz, bu değerlerden hesaplanır. Aynı eşitleme betiği başka değerleri de ürünün kaynak kodundan okur: iki yazı tipi, varsayılan tema, azaltılmış hareket ayarları, basma ölçeği, rozet, düğme, alan ve simge ölçüleri, dört yoğun yazı rolü, kabuk genişlikleri ve glif yolunun özeti. Bir desen bulunamazsa ya da bir varsayım artık tutmazsa betik hatayla durur; denetim kipi de üründen her sapmayı bildirir. Bu depodaki bir test bu denetimi ürün deposunun bulunduğu her makinede çalıştırır; CI'da ürün deposu olmadığından orada çalışmaz. Bazı eşlemeler ve ölçüler hâlâ elle, her biri kaynak yoluyla tek bir dosyada tutulur; önem noktası, ipucu, odak halkası, dönen simge, sayfa başlığı ve tablo başlığı rolleri ve birkaç süre bunlardandır. Bunları ürünle karşılaştıran bir test yok.

Anlık görüntü product-tokens.json olarak, web sitesinin kendi token dosyası da tokens.css olarak indirilebilir.

{
  "source": {
    "ref": "main",
    "date": "2026-08-23"
  },
  "radius": {
    "radius-sm": "4px",
    "radius-md": "8px",
    "radius-lg": "12px"
  },
  "ease": {
    "ease-out": "cubic-bezier(0.23, 1, 0.32, 1)",
    "ease-in-out": "cubic-bezier(0.77, 0, 0.175, 1)",
    "ease-drawer": "cubic-bezier(0.32, 0.72, 0, 1)"
  },
  "duration": {
    "duration-feedback": "130ms",
    "duration-fast": "160ms",
    "duration-default": "200ms",
    "duration-slow": "300ms",
    "duration-drawer": "400ms"
  }
}

Kuralları tutan denetimler.

Bu sayfadaki kural kartları her kuralı neyin tuttuğunu söyler: bu web sitesinin deposundaki bir test ya da Zero Door ürün deposundaki, ürünün kendi CI'ında çalışan bir test veya derleme denetimi.