Clarvia AgentsPlatformTasarım sistemi
Koyu temaReferans
Tasarım sistemi
Ürünün tip, renk, yükseklik ve hareket ölçeği ile bu ölçekten kurulan bileşenler. Buradaki her değer sayfanın açık olduğu anda tarayıcıdan okunuyor — doküman değil, ölçüm. Tema anahtarını çevirince sayılar da değişir.
40 girdi, 5 bölüm. Her girdinin kendi adresi var (/design/…): paylaşılabiliyor, yer imine eklenebiliyor ve soldaki çubuk nerede olunduğunu söylüyor.
Temeller
TipDokuz adımlık ölçek, dört ağırlık, altı harf aralığı ve dört yazı ailesi.BoşlukTaban 4px, dokuz adım. Her adım kontrol · kutu · düzen katmanlarından birine ait.Kırılma noktalarıAltı eşik. Adlar cihaz değil içerik anlatıyor — pencere genişliği sayfada ölçülüyor.Nötr rampaOn dört basamak. Koyu temada ters çevrilmiyor, yeniden kuruluyor.Marka rengiMarka paleti, yedi basamaklı ham mor merdiven ve ondan türeyen rol rampası.Aksan aileleriAltı aile · üçer rol (yazı · yıkama zemin · kenar) ve tek rolle yaşayan aksanlar.Metin ve çizgiÜç mürekkep basamağı ve üç çizgi ağırlığı — her birinin kendi kontrast eşiği ölçülüyor.GradyanlarYedi gradyan. Hepsi aynı merdivenden besleniyor, hiçbiri ham renk yazmıyor.YarıçapSekiz basamak. Ayrım yüzey mi kontrol mü değil — ne kadar büyük.YükseklikDört düzlem: zemin, kalkış, geçici katman, basış.Kontrol boyuBeş basamak, dörder piksel. Her basamağın kendi kullanım yeri var.SüreÜç süre: yerinde değişim, kısa mesafe, uzun mesafe. Üçü birlikte oynatılabiliyor.EğriGirişte yavaşlayan, çıkışta hızlanan iki eğri — çizim tokenın kendisinden türetiliyor.İkonTek kütüphane, tek çizgi kalınlığı, tek boy ailesi.
Bileşenler
DüğmeAltı sürüm, beş boy. Mor yalnızca ekranın tek birincil eyleminde.Durum kabıDurum adı ile renk adı aynı eşlemeye bağlı: iki isim, tek karar.Kontrol“N seçenekten biri” tek kontrolle soruluyor; anahtar, araç düğmesi ve arama kutusu.AlanEtiket, ipucu, girdi ve çok satırlı alan — odak halkası tek dil.Anahtar · değerÖlçülmeyen olguların listesi. Bir SAYI gösterilecekse yanlış kap.BildirimSayfa üstü bant ve üç ağırlıkta satır bildirimi.TabloSeçim kutusu, seçili satır yatağı, yüzen seçim çubuğu ve onay kipi.Boş ekranSüzgeç yüzünden boşalan liste — sessiz kap, marka anı değil.Ajan rozetiBeş sürüm. Rozet harf taşımıyor; kimliği ad, türü ikon söylüyor.Hücre motifiÜrünün kendi işareti: kare kutu, ortasında halka. Üç hâl.YüklemeBelirsiz ve belirli bekleme dilleri, iskelet ve açılış perdesi.
Veri
Ölçüm kartıBir sayı, birimi ve değişimi. Şeritte yan yana dizilir.Ölçerİki idiom, tek ölçü: yanında değer olan blok çubuk, payı gösteren dilimli çubuk.ÖlçekÖlçerin yüksekliği ve iki blok arasındaki kırpma — üç token.GrafikYığın sütun, gösterge ve eksen. Sıra ürünle birebir aynı.Ölçüm yokÖlçüm olmayan yerde uydurulmuş çubuk çizilmiyor — kap bunu söylüyor.
Levha
Bant ve rayLevhanın taşıyıcı ızgarası: yatay bant, dikey ray.Kesişim işaretiBant ile rayın kesiştiği yerdeki nokta — ızgaranın kendini gösterdiği tek yer.Şerit ve bölme başlığıBitişik hücre şeridi ve levhanın bölme başlığı.Kart kafesiKartların levha ızgarasına oturduğu düzen.Tablo bandıTablonun levha üstündeki hâli — kenarı ızgaraya bağlanıyor.
Kurallar
ErişimWCAG 2.2 AA hedefi ve odak halkası — eşikler iddia değil, sayfada ölçülüyor.KlavyeYedi sözleşme. Tek tek bileşenlerde yeniden icat edilmiyor.Renkten başka ipucuDurum tek başına renkle anlatılmaz: şekil, ikon ya da metin eşlik eder.Token katmanlarıÜç kat: ilkel, anlamsal, bileşen. Hangi katta durduğunu bilmeyen token yanlış yere bağlanıyor.DeğişmezlerToken mu ham değer mi, yeni basamak eşiği, sürüm günlüğü.