Zerone Tasarım Dili

Site iddialı bir üslupla konuşur: New Black, sıcak kâğıt, doğrulanmış sinyal anlamına gelen tek bir bakır yeşili vurgu, ince çizgilerle kurulan yapı ve bir şeyi anlatan hareket. Zero Door arayüzü sakin bir üslupla konuşur: açık ve koyu tema, grafikler dışında yalnız duruma ayrılmış renk, kısa ve işlevsel hareket, veri için yoğunluk. Alttaki dil ise tektir.

Aynı durum, iki ayrı sesle.

Aşağıda tek bir fikir iki üslupla çizildi: kontrollerini geçmiş bir değişiklik. Soldaki panel sitenin kendi tokenları ve yazı tipiyle kuruldu. Sağdaki, ürünün varsayılanı olan Zero Door koyu temasıyla, ürünün eşitlenmiş kopyasındaki değerlerle boyandı. Ürünün Badge bileşenindeki gibi her satır durumunu bir simge ve bir sözcükle söyler; toplam ise bir nokta ve bir sözcükle verilir. Bu, üründe kullanımda olan bir kalıptır.

İkisinin paylaştıkları.

Her satır bu sayfa derlenirken hesaplanır. Site değerleri token dosyasından ve stil dosyasından gelir. Ürün değerleri ürünün eşitlenmiş kopyasından gelir: tokenlarından ve bir eşitleme betiğinin ürünün kaynak dosyalarından okuduğu olgulardan. "Aynı", iki tarafta da aynı değer demektir; yalnızca bir renkte kullanılan "Yakın" ise iki rengin OKLab'de 0,05 değerinden az farklı olduğunu söyler.

Site metnini mürekkeple, #0f1c26 ile dizer. Ürün açık temasında bu mürekkebin yakın bir kopyasını, #15242c, birincil eylemlerde kullanır; metnini ise daha sıcak, siyaha yakın bir tonla, #221d19 ile dizer.

Altı değer, ikişer ad.

Sitenin kâğıt, kıl çizgi ve ikincil metin renkleri ürünün açık temasına yalnızca yakın değil; farklı adlar taşıyan aynı değerler. Aşağıdaki her çipin yarısı site tokenıyla, yarısı ürün değeriyle boyandı; değerler aynıysa iki yarı dikişsiz birleşir. Üstteki ve alttaki kısa çentikler buluştukları yeri gösterir.

• --color-paper=--surfaceSite#fdfaf6Zero Dooroklch(0.985 0.006 75)
• --color-paper-2=--surface-subtleSite#f6f3eeZero Dooroklch(0.965 0.007 75)
• --color-hair=--zd-borderSite#e2dfdbZero Dooroklch(0.905 0.006 75)
• --color-hair-2=--zd-border-strongSite#cdcac6Zero Dooroklch(0.840 0.006 75)
• --color-ink-muted=--fg-mutedSite#5c5753Zero Dooroklch(0.460 0.010 60)
• --color-ink-subtle=--fg-subtleSite#736d69Zero Dooroklch(0.540 0.010 60)

Ayrıldıkları yerler.

İki üslubu tek üsluptan ayıran şey bu farklardır. Aynı yolla hesaplanırlar.

İkisinin de uyduğu bir kural.

İki üslup da anlamı tek başına renge bırakmaz. Sitede metin içindeki bağlantıların bugünkü kullanımda altı çizilir; yalnızca renklendirilmezler. Üründe Badge bileşeni her sinyal rengini bir simge ve bir sözcükle birlikte verir.

• Renk iki üslupta da anlamı tek başına taşımaz.

  NedenRenkleri ayırt edemeyen bir okur da anlamı almalıdır. Bunun bir kısmı denetlenir: axe, metin içinde çevresindeki yazıdan yalnızca ona çok yakın bir renkle ayrılan bağlantıyı yakalar. Ürün ekranlarının tamamı dahil geri kalanını inceleme korur.

  İncelemeBir testle değil, incelemeyle korunur.

Tasarım dili, şirketin kendine koyduğu dört kurala hizmet eder. Aşağıda ana sayfadaki hâlleriyle, kelimesi kelimesine alıntılandılar; her biri bir ret ya da denetlenebilir bir sözdür. Her birinin yanında, tasarımda gerektirdiği bir karar durur. İlkeler sayfası her kuralı daha ileriye kadar izler.

Her kural tasarımı nasıl biçimlendirir

Dilin geri kalanı, gezinmedeki gruplarıyla 13 sayfada anlatılır. Her sayfa kurallarını, onları neyin denetlediğiyle birlikte verir.

Bir tasarım dili, belgesi ile kodu ayrı yaşadığında kayar. Burada ayrı yaşamazlar: sayfalar değerlerini site derlenirken koddan okur, söyledikleri kurallar da her değişiklikte test ve kapı olarak koşar.

Değerler kaynağından okunur.

Bu sayfadaki değerler site derlenirken şu 8 kaynaktan gelir. Ürüne ait her değer bunlardan biri üzerinden gelir: bir eşitleme betiğinin ürünün kaynağından okuduğu kopya.

Bu sayfadaki değerlerin geldiği yer

Sitenin token dosyası

Sitenin 11 rengi, iki yazı tipi yığını, eğrisi, iki köşe yarıçapı ve gölgesi.tokens.css indir

Glif

Glifin yolu ve viewBox değeri; sitedeki her glif bileşeni ve paylaşım görselleri onu buradan çizer. Site simgesi ve basın indirmeleri birer kopya taşır; bir test onları bununla karşılaştırır.

Zero Door token anlık görüntüsü

İki temada Zero Door arayüz renkleri (grafik rampası dışarıda), aralıklar, yarıçaplar, gölgeler, eğriler ve süreler; yanında adı belli ürün dosyalarından okunan olgular. Bu sayfa bunlardan glif özetini, basma ölçeğini, azaltılmış hareket süresini, iki yazı tipini, varsayılan temayı, Badge'in zeminini, kenarını, boyunu ve simgesini, bir de iki yazı boyunu kullanır. Dosyayı bir eşitleme betiği ürün deposundan üretir; dosya bu depoda tutulur. İndirilen kopyada iç alanlardan biri, deponun adı yer almaz.product-tokens.json indir

Sitenin stil dosyası

Sitedeki düğmenin basma ölçeği ve azaltılmış harekette geçiş süresi.

Hareket süreleri

Sitedeki her betikli hareketin aldığı adlandırılmış süreler; farklar tablosunun süre satırı onları sayar.

Karşılaştırmalar

Bu değerlerden çıkarılan karşılaştırmalar: hangi renklerin aynı hex değerini paylaştığı, iki renk arasındaki OKLab farkı, ürün ölçeklerinin aralıkları ve Badge zemininin yüzeye bindirilmiş hâli.

Renk hesabı

İki ondalığa aşağı yuvarlanmış kontrast oranları ve OKLCH'den çevrilmiş hex değerleri.

Değişiklik tarihleri

Her sayfanın altındaki "Son değişiklik" tarihi; sayfanın kaynaklarına dokunan son commit'ten alınır.

Kontrast hesaplanır.

Bunlar yukarıdaki örneğin metin renkleri; bu sayfa derlenirken WCAG 2 formülüyle zeminlerine karşı ölçüldüler. Oranlar iki ondalığa aşağı yuvarlanır: 4,499:1 olan bir çift 4,49:1 okunur ve kaçırdığı bir eşiği geçmiş gibi görünmez.

Kurallar neyle korunduklarını söyler.

Bu sayfalardaki bir kural ya her değişiklikte koşan bir testle denetlenir ya da incelemeyle korunduğunu açıkça söyler. Dilin en çok dayandığı testler ve kapılar bunlar.

• Sitenin her renk tokenı değerini korur. Birini değiştirmek bir yan etki değil, testte verilen bir karardır.

  NedenPalet bilerek küçük tutuldu. Sessizce kayan bir değer onu kullanan her sayfayı değiştirir.

  TestHer değişiklikte bir testle korunur.

• Token dosyasında saf siyah ya da saf beyaz bir hex değeri yoktur.

  NedenZeminler sıcak kâğıt, metin mavimsi siyah bir mürekkeptir. Saf değerler bu paletin dışına düşer.

  TestHer değişiklikte bir testle korunur.

• Derlemenin yayımladığı stil dosyalarında, hangi renk yazımıyla olursa olsun, saf siyah ya da saf beyaz yoktur.

  NedenSaf bir değer bir sayfaya bileşenin kendi CSS'iyle de girebilir. Kapı yayımlanan her stil dosyasını ve sayfaların içindeki her stil bloğunu okur; hex değerlerini ve renk işlevlerini olduğu gibi anahtar sözcükleri de yakalar ve yalnızca tek bir çatı varsayılanını, Tailwind'in ring-offset rengini, tanımlandığı iki yerde dışarıda bırakır.

  TestHer değişiklikte bir testle korunur.

• Sitenin metin tokenları ink, ink-muted, ink-subtle ve accent-deep iki kâğıt tonunda da 4,5:1'e ulaşır.

  NedenMetin tokenları gövde boyutlarında kullanılır; WCAG orada 4,5:1 ister.

  TestHer değişiklikte bir testle korunur.

• Bu sayfalardaki bir oran aşağı yuvarlanır, asla yukarı değil.

  Neden4,499:1 olan bir çift geçmiş gibi okunmamalı.

  TestHer değişiklikte bir testle korunur.

• Zero Door metin ve durum renkleri iki temada da üç yüzeyin hepsinde 4,5:1'e ulaşır.

  NedenÜrün, tokenlarının eşitlenmiş kopyasından anlatılır. Test, bu sayfaların söylediğiyle anlattığı değerleri bir arada tutar.

  TestHer değişiklikte bir testle korunur.

• Ortak her değerin site tarafı (glif, eğri, orta yarıçap, basma ölçeği ve azaltılmış harekette geçiş süresi) eşitlenmiş kopyadaki ürün değeriyle aynıdır.

  NedenYukarıdaki karşılaştırma hesaplanır, ama çevresindeki cümleler yazılır. Test ürünü yalnızca eşitlenmiş kopya üzerinden görür; üründeki bir değişiklik kopya yeniden eşitlendiğinde yakalanır, daha önce değil.

  TestHer değişiklikte bir testle korunur.

• 404 sayfası dahil, derlenen her sayfa WCAG 2.2 AA etiket setiyle axe-core'dan sıfır ihlalle geçer.

  NedenYeni bir sayfa derlendiği anda denetime girer. Kimsenin onu eklemeyi hatırlaması gerekmez.

  TestHer değişiklikte bir testle korunur.

• 404 sayfası dahil, derlenen hiçbir sayfa 320 CSS pikselde yana kaymaz.

  NedenWCAG 1.4.10: yüzde 400 yakınlaştıran bir okur iki yönde kaydırmak zorunda kalmamalı.

  TestHer değişiklikte bir testle korunur.

• Bir sayfanın İngilizce ve Türkçe metinleri aynı anahtarlara, alanlara ve liste uzunluklarına sahiptir; ikisi de uzun tire, tek kelime yazılmış ürün adı (alan adı gibi makine adları dışında) ya da 99,5 dışında bir yüzde taşımaz.

  Nedenİki dil aynı yapıyı korur; sitenin yazım kuralları bir incelemecinin fark etmesine bağlı kalmaz.

  TestHer değişiklikte bir testle korunur.

• Her iç bağlantı ve her çapa bir yere çıkar.

  NedenBir başvuru kaynağındaki kırık bağlantı okuru orada olmayan bir kurala gönderir.

  TestHer değişiklikte bir testle korunur.

Duraklatma düğmesi için bir bekçi

WCAG 2.2.2, kendi kendine beş saniyeden uzun süren her hareketin duraklatılabilmesini ister. Tarayıcı kısa bir girişi bir döngüden ayıramaz; bu yüzden her döngü kendini işaretler, erişilebilirlik testi de sayfada görünür bir duraklatma düğmesi arar. Ortak hareket yardımcısı başlattığı her döngüyü işaretler. Onun dışında yazılmış birkaç döngü, örneğin gürültü tuvalleri, ana sayfa girişindeki kaydırma ipucu ve iki kaydırma sahnesinin bekleme döngüleri, aynı işareti kendisi koyar. Derleme sırasında bir denetim, her bileşen dosyasının kurduğu döngüleri (sonsuz bir zaman çizelgesi, sonsuz bir CSS animasyonu ya da bir gürültü tuvali) koyduğu işaretlerle karşılaştırır; döngü işaretten fazlaysa derleme durur. Başka bir yolla kurulan döngüyü yine inceleme yakalar.

1. 01

   Döngü kendini işaretler.

   Bir görsel girişini bitirip ortak hareket yardımcısıyla bekleme döngüsüne geçtiğinde yardımcı ona data-ambient="on" yazar. Yardımcının dışındaki bir döngü aynı özniteliği kendisi yazar.

   [data-ambient="on"]
2. 02

   Test onu bulur.

   Erişilebilirlik testi her sayfayı baştan sona kaydırır, görsellerin oynamasını bekler ve bu işareti taşıyan öğeleri sayar.

   locator('[data-ambient="on"]').count()
3. 03

   Düğme görünür olmalı.

   Bir döngü çalışıyorsa sayfada görünür bir duraklatma düğmesi olmalıdır; yoksa test başarısız olur. Tek düğme sitedeki bütün döngüleri duraklatır ve karar sayfadan sayfaya hatırlanır.

   [data-motion-toggle]:visible

Azaltılmış harekette hiçbir döngü başlamaz; duraklatılacak bir şey olmadığı için düğme de gizli kalır. Bu sayfada döngü yok.

• İşaretli bir döngü çalıştıran sayfa görünür bir duraklatma düğmesi gösterir.

  NedenWCAG 2.2.2 Duraklat, Durdur, Gizle. Otomatik bir tarama bunu yargılayamaz; bu yüzden derlenen her sayfada axe'yi çalıştıran test, taramadan sonra bunu da denetler. Bu kartla axe kartının aynı testle korunması bundandır.

  TestHer değişiklikte bir testle korunur.

Dili tutan bütün denetimler, kaynaklar sayfasında

Bu konuların kodda ya da bir tasarım belgesinde tanımı yok. Bir eksiklik kural sanılmasın diye listelendiler. Sitenin bugün zaten yaptığı bir şey varsa, onu anlatan sayfa bunu bir standart olarak değil, kullanımda olan bir şey olarak anlatır.

Tanımlı değil · Dilin tanımlamadığı konular

• Site için sütun ızgarası

  Sayfalar ortalanmış tek bir kapsayıcının içinde durur ve onu bölüm bölüm böler. Sütun sayısı da sütun aralığı tokenı da yok.

• Site için aralık ölçeği

  Bileşenler kendi aralıklarını belirler. Ürünün bir aralık ölçeği var; site onu kullanmaz.

• Sitenin CSS'inde süre tokenları

  Betikli hareket sürelerini ve eğrilerini tek bir modülden alır. CSS geçişleri her süreyi hâlâ kendi bileşeninde yazar; ürünün süre tokenları burada kullanılmaz.

• Koyu site teması

  Site yalnızca açık temadadır. Koyu tema Zero Door arayüzüne aittir.

• Fotoğraf

  Fotoğraflar için bir yönerge yok.

• Piktogramlar

  Bir piktogram seti yok. Simgeler ve diyagramlar basit şekillerden çizilir ve diyagramlar sayfası bunları anlatır; bir mekanizmayı anlatan figürler görselleştirme sayfasındadır.