Tasarım dili Kaynaklar
Tasarım dili, açıp okuyabileceğiniz dosyalar hâlinde. Glifi indirin, sitenin derlendiği token dosyasını ve Zero Door tokenlarının anlık görüntüsünü okuyun, dili denetleyen testleri ve kapıları görün, neyin ne zaman değiştiğini ve bir değişikliğin yayına nasıl ulaştığını izleyin.
Glif iki SVG dosyası, tokenlar iki metin dosyası olarak sunulur. Her biri bu sayfanın okuduğu kaynakla aynıdır; indirdiğiniz, bu sayfaların gösterdiğinin ta kendisidir.
İki glif dosyası da sitenin kodda çizdiği tek yolu çizer; indirdiğiniz işaret, bu sayfada gördüğünüz işaretin ta kendisidir.
Açık zeminler için. Glif mürekkep rengiyle ve kendi zemini olmadan çizilir; altındaki yüzey görünür kalır.
SVG indir: zerone-glyph.svg
Kendi zemini olan kare bir işaret gereken yerler için. Tasarımcının mürekkep karesidir: köşeler kare, glif kâğıt renginde, kendi boyutunda ve ortada.
SVG indir: zerone-glyph-ink-tile.svg
/favicon.svg ayrı bir dosyadır: bu kare ve renkleri, glif sekme boyunda okunsun diye kenarın üçte ikisine büyütülmüş.Logoyu dosyalarının çizdiği gibi kullanın. Yeniden renklendirmeyin, döndürmeyin, efekt eklemeyin.
NedenTasarımcı logoya iki renk kullanımı verdi: açık zeminde mürekkep, mürekkep zeminde kâğıt. Bunlara bağlı kalmak onu her yerde tanınır kılar. Kural basın kitinde yazılıdır.
İncelemeBir testle değil, incelemeyle korunur.
İndirilen dosyalar glifi koddan çizer, yeniden çizilmiş bir kopyadan değil.
NedenKoddaki glif yolu değişirse dosyalar da onunla birlikte değişmek zorundadır; yoksa test kırılır.
TestHer değişiklikte bir testle korunur.
İndirilen dosyalardaki her dolgu bir token rengidir.
NedenSiteden çıkan bir dosya da paleti taşır: mürekkep ve kâğıt, token dosyasının tanımladığı hâliyle.
TestHer değişiklikte bir testle korunur.
Tarayıcı simgesi, /favicon.svg, mürekkep kutunun karesini, renklerini ve ortalamasını korur; glif kenarın üçte ikisidir.
Neden16 px'te tasarımcının karesi glifi sekmede okunamayacak kadar küçük bırakır; bu yüzden simge ayrı bir dosyadır. Bir test onu ölçer; büyük glif kutunun karesinden ayrışamaz.
TestHer değişiklikte bir testle korunur.
Sitenin derlendiği token dosyası ve Zero Door tokenlarının anlık görüntüsü; sonraki iki bölümün gösterdiği iki dosya.
Sitenin derlendiği dosya, olduğu gibi. Düz bir stil dosyası değil, bir Tailwind 4 @theme bloğudur.
Ürünün token dosyasındaki iki renk teması, aralık, yarıçap, gölge, eğriler ve süreler; ürün kodundan okunan, yazı tipi ve simge boyutları gibi değerler ve aşağıda anlık görüntüyle birlikte gösterilen iki tarih. Commit kimliği taşımaz.
JSON indir: product-tokens.jsonsource.repo alanındaki iç depo adı çıkarılmış hâliyleRaster bir sürüm yok. Koruma alanı, en küçük boyutlar ve kâğıt ile vurgunun baskı değerleri Zerone'un eklediği kurallardır; logo sayfası bunları yöntemleriyle birlikte yazar ve logo sisteminin tamamını gösterir. Basın kiti altı dosyasını sunar: mürekkep ve kâğıt renginde iki dizilim ve buradaki iki glif dosyası. Yazı tipi dosyaları bu site için sunulur, burada indirilmeye açılmaz.
Sitenin adlı renkleri, yazı tipi yığınları, eğrisi, köşe yarıçapları ve gölgesi tek bir dosyada tanımlanır. Aşağıdaki blok o dosyanın kendisidir; site derlenirken okunur, bu yüzden yayındaki hâlinden farklı olamaz. Kullanımda bileşenler bazı yarıçapları ve renk karışımlarını bir tokenı anmak yerine yerinde de yazar.
/* Zerone tasarim tokenlari: renk, yazi tipi yigini, egri, yaricap ve golge
degerleri. Bilesenler renkleri token adiyla kullanir (var(--color-*)).
CSS disindaki kopyalar (theme-color, SVG, OG gorseli, e-posta)
tasarim kaynaklari betiginde, RAW_HEX_COPIES
listesinde tutulur. */
@theme {
--color-*: initial;
--color-transparent: transparent;
--color-current: currentColor;
--color-paper: #fdfaf6;
--color-paper-2: #f6f3ee;
--color-hair: #e2dfdb;
--color-hair-2: #cdcac6;
--color-ink: #0f1c26;
--color-ink-muted: #5c5753;
--color-ink-subtle: #736d69;
--color-accent: #00847e;
--color-accent-deep: #006560;
--color-accent-tint: #d9f5f3;
/* Ham, dogrulanmamis degisim. Kanit sahnesinde inen egri ve isaretleri bu
renktedir: accent "dogrulanmis tek sinyal" demek oldugu icin gurultunun
de kendi rengi olmali, yoksa ikisi de koyu kaliyor ve sahne tek renkli
bir grafige donuyor. Alarm kirmizisi DEGIL, kirilmis bir tugla tonu:
kagit uzerinde 5,7:1, uzerindeki beyaz tik 5,9:1. */
--color-raw: #a9432c;
--font-sans: var(--font-newblack), system-ui, sans-serif;
--font-mono: var(--font-geistmono), ui-monospace, SFMono-Regular, monospace;
--ease-out-quart: cubic-bezier(0.23, 1, 0.32, 1);
--radius-sm: 6px;
--radius-md: 8px;
--shadow-float: 0 12px 30px -18px rgb(15 28 38 / 0.45);
}Sayfa dosyayı olduğu gibi basar; derleme kapısı da yüzde işaretinin yanındaki 99,5 dışındaki her sayıyı reddeder. Bu yüzden bir birim testi dosyaya yüzde işareti girmesini engeller ve kırıldığında nedenini söyler.
Dosya bir Tailwind 4 @theme bloğudur. İlk bildirimi olan --color-*: initial, Tailwind'in varsayılan paletini kaldırır; bg-red-500 gibi palet adıyla yazılan bir renk sınıfı ancak o ad burada tanımlıysa vardır. Geri eklenen iki anahtar sözcük vardır: transparent ve currentColor. --color-raw tokenının üstündeki yorum da dosyanın parçasıdır, çünkü o rengin neden var olduğunu kayda geçirir.
Bu tablo site derlenirken testlerden okunur. Değer, token testinin tam değeri denetlediği; varlık, yalnızca tokenın tanımlı olduğunu denetlediği anlamına gelir. Son sütun tokenı okuyan diğer testleri sayar. İki sütunda da karşılığı olmayan bir tokenı yalnızca inceleme korur.
| Token | Token testinde | Ayrıca okuyan |
|---|---|---|
| --color-transparent | Denetlenmiyor | Yok |
| --color-current | Denetlenmiyor | Yok |
| --color-paper | Değer | 1 başka test |
| --color-paper-2 | Değer | 1 başka test |
| --color-hair | Değer | 1 başka test |
| --color-hair-2 | Değer | 1 başka test |
| --color-ink | Değer | 1 başka test |
| --color-ink-muted | Değer | 1 başka test |
| --color-ink-subtle | Değer | 1 başka test |
| --color-accent | Değer | 1 başka test |
| --color-accent-deep | Değer | 1 başka test |
| --color-accent-tint | Değer | 1 başka test |
| --color-raw | Değer | 1 başka test |
| --font-sans | Varlık | 1 başka test |
| --font-mono | Varlık | 1 başka test |
| --ease-out-quart | Varlık | 1 başka test |
| --radius-sm | Varlık | 1 başka test |
| --radius-md | Varlık | 1 başka test |
| --shadow-float | Denetlenmiyor | 1 başka test |
Paletin her rengi, 11 hex renk, kendisine verilen değeri aynen korur.
NedenHer sayfadaki kontrast bu değerlerden hesaplanır; kayan bir renk bütün oranları birden kaydırır.
TestHer değişiklikte bir testle korunur.
Token dosyasında saf siyah da saf beyaz da yoktur.
NedenPaletin en koyu rengi mürekkep, en açık rengi kâğıttır.
TestHer değişiklikte bir testle korunur.
Tailwind'in varsayılan paleti kapalı kalır.
Neden--color-*: initial olmasa bg-red-500 gibi varsayılan bir renk sınıfı yine çalışır ve paletin dışına fark edilmeden çıkılırdı.
TestHer değişiklikte bir testle korunur.
Zero Door arayüzünün kendi token dosyası vardır. Onu elle yeniden yazmıyoruz: bir betik ürünün dosyalarını değiştirmeden okur ve değerleri bu depodaki tek bir JSON dosyasına yazar.
Betik, token dosyasının yanında yazı tipi, varsayılan tema ve simge boyutları gibi, ürünün kendi kodunda belirlediği değerleri de okur. İki tarih kaydeder: token dosyasının son değiştiği gün ve değer okuduğu dosyalardan herhangi birinin son değiştiği gün. Aşağıdaki tarihler, hangi sürümün anlatıldığını böyle söyler.
Metin
İkincil metin
Silik metin
Metin
İkincil metin
Silik metin
Açık temanın 6 rengi, sRGB'ye çevrildiğinde bir site rengiyle birebir aynı değeri verir; örnekleri o site rengini adıyla anar.
Her hex değeri, oklch değerinden bu sayfalarda kontrastı hesaplayan aynı kodla hesaplanır; sRGB aralığı dışına taşan bir renk kanalı kırpılır.
| Token | Değer |
|---|---|
| --radius-sm | 4px |
| --radius-md | 8px |
| --radius-lg | 12px |
| --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-feedback | 130ms |
| --duration-fast | 160ms |
| --duration-default | 200ms |
| --duration-slow | 300ms |
| --duration-drawer | 400ms |
| Token | Açık | Koyu |
|---|---|---|
| --shadow-flat | 0 1px 2px rgb(0 0 0 / 0.04) | 0 1px 2px rgb(0 0 0 / 0.20) |
| --shadow-raised | 0 8px 24px rgb(0 0 0 / 0.08) | 0 8px 24px rgb(0 0 0 / 0.40) |
Ürün değerleri elle yazılmaz, bir betikle kopyalanır.
NedenElle yazılmış bir kopya ürün değiştiği gün eskir. Anlık görüntü, ürünün token dosyasının son değiştiği günü ve okuduğu dosyalardan herhangi birinin son değiştiği günü kaydeder; eskimiş bir kopya böylece göze çarpar.
İncelemeBir testle değil, incelemeyle korunur.
Ürünün her metin tokenı, iki temada da üç yüzeyin hepsinde 4,5:1 ya da daha yüksek kontrast verir.
NedenArayüz yoğundur; metin hangi yüzeye düşerse düşsün okunur kalmalıdır.
TestHer değişiklikte bir testle korunur.
Ürünün --zd-border kenar tokenı için 3:1 iddia edilmez.
NedenBölgeleri ayırır ve iki temada da yüzeye karşı 3:1'in altında kalır. Test bunu sabitler; hiçbir sayfa daha fazlasını iddia edemez.
TestHer değişiklikte bir testle korunur.
Bu sayfalardaki her kural, onu neyin denetlediğini söyler. Dili sitenin tamamında denetleyen testler ve kapılar bunlardır; onları çalıştıran hat aşamasına göre gruplanmış, her birinin denetlediği şeyle birlikte. Yalnızca tek bir sayfanın kuralını denetleyen bir test, o kuralın kartında işaretlenir.
Token dosyasındaki paletin her renginin, 11 hex rengin, tam değerini sabitler. Yazı tipi yığınlarının, eğrinin ve yarıçapların tanımlı olduğunu denetler; dosyada hiçbir hex yazımıyla saf siyah ve beyaz bulunmamasını ve Tailwind'in varsayılan paletinin kapalı kalmasını sağlar.
Sitenin kendisinin sunduğu 6 yazı tipi dosyasının her birinin gerçek bir WOFF2 dosyası olduğunu ve boyutunun makul kaldığını denetler: 8.000 bayttan büyük, 120.000 bayttan küçük. Denetlenen ağırlıklar: New Black 400, 500, 600, 700; Geist Mono 400, 500.
Bu tasarım sayfaları dahil her sayfa sözlüğünü okur; Türkçe ve İngilizce sürümlerin yapısı farklıysa ya da herhangi bir dizede uzun tire, ürün adının tek kelimelik yazımı, başka bir yasaklı dize veya 99,5 dışında bir yüzde varsa kırılır.
Bu sayfaların kullandığı renk hesabını bilinen değerlere karşı doğrular; gösterilen bir oranın aşağı yuvarlandığını, yani eşiği geçmeyen bir oranın geçmiş gibi görünmediğini denetler; token dosyasındaki bütün renkleri sırasıyla okur; token dosyasının ve birincil düğme stilinin yorumlarında belirtilen oranları doğrular ve ink, ink-muted, ink-subtle ve accent-deep renklerinin paper ve paper-2 üzerinde en az 4,5:1 olduğunu denetler.
Her tasarım sayfasının sözlüğü, bileşeni, rota kaydı ve gezinme etiketi olduğunu; önceki/sonraki zincirinin her sayfayı bir kez gezdiğini; site tokenlarının beklenen değerlerle okunduğunu ve Zero Door anlık görüntüsünün iki temada da kontrast iddialarını koruduğunu denetler.
Bu sayfanın dosyalar hakkındaki iddialarını denetler: indirilen dosyalar glif yolunu koddan çizer ve yalnızca token renkleri kullanır, tarayıcı simgesi mürekkep kutunun karesini korur ve glifi kenarın üçte ikisidir, token dosyasında yüzde işareti yoktur, bu sayfada bir testle korunduğunu söyleyen her kural kartı var olan bir teste bağlıdır ve token renklerini tekrarlayan dosyaların listesi eksiksiz kalır.
Bütün sitenin paylaştığı tek hareket ayarını denetler: ayar oynar durumda başlar, bir duraklatma ya da sürdürme her dinleyiciye bir kez ulaşır ve tercih sabit bir anahtarla saklanır.
Sitenin uyumluluk çerçevesi listesini, ürün kataloğundan kopyalanmış 13 kimliğe sabit bir sırayla bağlar; ürün tarafındaki bir değişikliği bu test değil, inceleme yakalar. Ayrıca listedeki hiçbir adın boş olmadığını ve ürünün getirmediği çerçevelerin sabit listesinden bir ad içermediğini denetler.
Derlenmiş her sayfa ve stil dosyası üzerinde çalışır. Uzun tire, tek kelimelik ürün adı ve geniş ekranda dört sütunlu ızgara sınıfı yok; 99,5 dışında yüzde yok; her sayfada güvenlik politikası, 404 sayfası dışındaki her sayfada kanonik bağlantı ve dil bağlantıları var; Google Fonts yok, iletişim sayfasındaki adı belli tek istisna dışında dış betik yok; yayına çıkan CSS'te, adı belli tek bir Tailwind varsayılanı dışında, hiçbir yazımla (hex, anahtar sözcük ya da renk fonksiyonu; satır içi SVG görselleri dahil) saf siyah ya da beyaz yok, bir anahtar karede ya da onu adıyla anan bir geçişte opacity yok; main içinde başlık düzeyi atlanmıyor; araştırma ve yasal sayfalar dışındaki sayfaların ana içeriğinde, sitenin desteklenmeyen uyumluluk çerçeveleri listesinden hiçbir ad geçmiyor.
Derlenmiş her sayfadaki her iç bağlantıyı ve her #çapayı izler; hedef dosya ya da id yoksa kırılır.
404 sayfası dahil her derlenmiş sayfayı aşağıdaki WCAG etiketleriyle axe'den geçirir ve sıfır ihlal bekler; mobil çalıştırma yasal belgeleri ve araştırma yazılarını dışarıda bırakır, iki dizin sayfasını bırakmaz. Ortak belirme hareketiyle başlayan bir döngü kendini işaretler; ana sayfadaki gürültü alanı gibi kendi betiğiyle çalışan birkaç döngü de öyle. Test, işaretli bir döngünün görünür bir duraklatma düğmesi olmadan çalıştığı sayfayı kırar. Ayrıca 320 CSS px genişlikte hiçbir sayfanın yana kaymadığını, aşağıdaki boşluklarda adı geçen sayfalarda klavye odağının sabit üst menünün altında kalmadığını (bir masaüstü penceresinde ve bir de 390 CSS px genişlikte) ve bir duraklatma kararının sayfadan sayfaya taşındığını denetler.
WCAG etiketleri
Sabit bir sayfa listesinde Lighthouse. Eşiğin altında kalan bir puan hattı durdurur, çünkü siteyi yayımlayan işler bu işi bekler.
Eşikler
Yasal belgeler SEO puanını atlar ama diğer tek tek SEO denetimlerini korur; is-crawlable kapalıdır.
tavsiye niteliğinde
Mobil öykünmeyle, daha kısa bir sayfa listesinde Lighthouse. İş tavsiye niteliğindedir: CI başarısız olmasına izin verir, hat durmaz.
Eşikler
elle başlatılır
Üretim yayını işinde ilk sırada çalışır.
Yayını durduran durumlar
/, /zero-door ve /tr/contact.Tasarım dili sürümlerle yayımlanmaz; kaydını git tutar. Bir girdi ana dala ulaştığını söylemedikçe her tarih, değişikliğin commit edildiği gündür; en yenisi en üsttedir.
Zero Door sayfasının kunduzu kendi sayfasına, onunla birlikte de adına kavuştu. Sayfa, sahnesinin her parçasının neyi temsil ettiğini anlatır ve her parçayı Zero Door sayfasında yankıladığı metinle eşler; onun gliften nasıl çizildiğini ve nasıl hareket ettiğini de gösterir. Kuralları nerede görünebileceğini söyler. Ad, Zero Door açılışının metin karşılığı dahil, onun anlatıldığı her yerde kullanılır. Maskot sayfası temellerde, logodan sonra durur.
Kapı figürü tasarım dilinden çıktı; Zero Door sayfasının barajı figür türleri arasında onun yerini aldı. Görselleştirme sayfası artık barajı ölçüleri ve kurallarıyla canlı gösterir. Diyagramlar sayfasındaki temel öğeler barajın kartını, orijinalini, durdurulan kartını ve karar etiketini, barajın geniş bir ekranda Zero Door açılışındaki boyunda çizer.
Betikli hareket adlandırılmış süreler, eğriler ve hareketlerden oluşan tek bir modüle taşındı; bir birim testi de adıyla listelenmiş birkaç istisna dışında kendi eğrisini ya da çıplak bir süre yazan her betiği kırmaya başladı. Önceden her bileşen aynı hareketi kendi sayılarıyla tarif ediyordu. Bu dili hareket sayfası anlatır.
Bu bölüm, her sayfanın paylaştığı parçalarla geldi: gezinme, git'ten okunan son değişiklik tarihi ve her kuralı neyin koruduğunu söyleyen kural kartları. Altında bir ölçüm katmanı vardı: site tokenları derleme anında token dosyasından okunur, kontrast oranları elle yazılmaz, hesaplanır; Zero Door tokenları da üründen bir betikle kopyalanır.
Ortak belirme hareketiyle başlayan bir döngü kendini işaretlemeye başladı; erişilebilirlik testi de böyle bir döngünün görünür bir duraklatma düğmesi olmadan çalıştığı sayfayı kırmaya başladı. Mimari sayfasındaki akış diyagramı düğmesiz yayına çıkmıştı; aynı gün düğmesine kavuştu.
Bu tarihten itibaren derlenmiş sayfalar axe'den sıfır ihlalle geçmek zorunda kaldı; 320 CSS px genişlikte yana kayan bir sayfa kapıdan geçemedi. Kapı bir gün önce yazıldı, ana dala bu tarihte ulaştı. Neyin sınandığını erişilebilirlik sayfası anlatır.
Bütün site için tek bir hareket ayarı geldi: bir animasyonu duraklatmak her sayfadaki bütün animasyonları duraklattı ve tarayıcı bu tercihi hatırladı. O günün döngülü görsellerinin yanına küçük, yuvarlak bir duraklatma düğmesi geldi. Odaklanabilen öğeler de klavye odağını sabit üst menünün altından uzak tutan bir kaydırma payı kazandı. Düğmeyi hareket sayfası anlatır.
--color-raw, #a9432c, palete katıldı: ham, doğrulanmamış değişim için soluk bir tuğla tonu. Vurgu rengi doğrulanmış tek sinyal demektir; gürültünün de kendi rengi olmalıydı. İlk günden sonra eklenen tek renk budur; token testi değerini aynı gün sabitledi.
Tek bir commit token dosyasını, sitenin kendisinden sunulan New Black ve Geist Mono yazı tiplerini, glifi, temel stilleri ve ilk token ve yazı tipi testlerini getirdi. Aynı gün birincil düğme, kâğıt rengi metinle 4,5:1'e ulaşmak için accent-deep'e geçti ve belirme hareketi yalnızca transform kullanmaya başladı. Yasaklı dizeler, dış yazı tipleri ve her türlü saf siyah ya da beyaz için derleme kapıları geldi; basın kiti iki glif dosyasını yayımladı.
Dilde bir değişiklik, bir dosyada bir değişikliktir ve siteye ancak her değişikliğin geçtiği hattan geçerek ulaşır. Adımlar, hattın çalıştırdığı sırayla şunlardır.
Denetim
Derleme
Test
Yayın
Renkler, yazı tipi yığınları, eğri, yarıçaplar ve gölge token dosyasında değişir; yazı tiplerinin kendisi derleme yapılandırmasında tanımlanır. Düğmeler, bağlantılar ve temel yazı sitenin stil dosyasında ya da bileşenin kendisinde değişir. Teamül olarak bir bileşen bir renk tokenının değerini kopyalamaz, tokenı adıyla anar.
İlk aşama tür denetimini ve birim testlerini bütün çalışma alanında çalıştırır. Bir test, testi değişmeden değişen bir palet renginde kırılır; bir başkası token dosyasında ve düğme stilinde belirtilen oranları yeniden denetler; bir üçüncüsü iki dili aynı yapıda tutar.
Derleme aşaması her sayfayı iki dilde derler, ardından kapıları sonuç üzerinde çalıştırır: yasaklı dizeler, yayına çıkan CSS'te saf siyah ve beyaz ile canlandırılan opacity, başlık sırası ve her iç bağlantı ve çapa.
Tarayıcı testleri derlenmiş siteyi bir masaüstü ve bir mobil tarayıcıda açar: her sayfanın kendi testleri, derlenmiş sayfalarda axe, 320 CSS px genişlikte yeniden akış ve işaretli bir döngü çalıştıran her sayfada görünür bir duraklatma düğmesi.
Lighthouse sabit bir sayfa listesini masaüstünde puanlar ve eşiklerin altında yayını durdurur; mobil çalıştırma raporlar ama hiçbir şeyi durdurmaz.
Siteyi yayımlayan işler şunları bekler: derleme ve kapıları, tarayıcı testleri ve masaüstünde Lighthouse. Üretim yayını elle başlatılır ve ilk adım olarak yayın kapısını çalıştırır.
.note {
color: var(--color-ink-muted);
}.note {
color: #5c5753;
}Bileşen bir renk tokenını adıyla anar, hex değer yazmaz.
NedenToken dosyasının başlığı bunu söyler. Paletin dışındaki bir hex değeri yalnızca saf siyah ya da beyazsa yakalanır; kuralı inceleme korur.
İncelemeBir testle değil, incelemeyle korunur.
Token dosyası dışında yazılan bir palet değeri, listelenmiş bir kopyadır.
NedenTest siteyi, ortak paketi ve form servisini paletin her değeri için tarar. Kopyalar listesinin anmadığı bir dosyada da, listede olup artık değer taşımayan bir dosyada da kırılır.
TestHer değişiklikte bir testle korunur.
Sabitlenmiş bir değeri değiştiren commit, testini de değiştirir.
NedenToken testi paletin her renginin, 11 hex rengin, tam değerini denetler; testi değişmeyen bir renk değişikliği hattın ilk aşamasında kırılır.
TestHer değişiklikte bir testle korunur.