Arcus; IT, Guard, Civitas ve Table arayüzlerinin renklerini, yazısını, durum işaretlerini ve bileşenlerini tek yerde tutar. Bu sayfadaki örnekler ürünün kullandığı dosyalarla çizilir.
Taşlar tokens.css değerleriyle boyanır. Bir taşın üzerine gelin ya da seçin.Tema düğmesine basın; taşlar öbür temadaki değerlerine döner.
Renkler
Ürün içi zemin serin kireçtaşı, metin kurşun. Her satırda açık ve koyu tema değeri yan yana; örnek taşının sol yarısı açık, sağ yarısı koyu temadır.
Yüzeyler
Örnek
Ad
Açık
Koyu
Kullanım
Kontrast (yüzey üzerinde)
Zemin--ar-ground
#e6eae9
#111517
Sayfanın arka planı.
Metin rengi değil
Yüzey--ar-surface
#f7f9f8
#191e21
Panel, tablo, kart.
Metin rengi değil
Gömük yüzey--ar-surface-sunk
#dce2e1
#0c0f11
Kenar menüsü, tablo başlığı, alt şerit.
Metin rengi değil
Üzerine gelme--ar-surface-hover
#eef2f1
#20262a
Satır ve menü öğesi vurgusu.
Metin rengi değil
Metin ve çizgi
Örnek
Ad
Açık
Koyu
Kullanım
Kontrast (yüzey üzerinde)
Mürekkep--ar-ink
#1f2629
#e2e7e7
Metin ve ana eylem düğmesi.
açık 14,5:1 AA koyu 13,5:1 AA
İkincil metin--ar-ink-muted
#556064
#a0aaad
Açıklama, etiket, alt satır.
açık 6,1:1 AA koyu 7,1:1 AA
Soluk metin--ar-ink-faint
#7a8588
#737e81
Yalnızca önemsiz yardımcı metin; AA şartı aranmaz.
açık 3,6:1 AA altında koyu 4,0:1 AA altında
Çizgi--ar-line
#c9d1d0
#2b3337
Satır ayırıcı.
Metin rengi değil
Güçlü çizgi--ar-line-strong
#a3adad
#3f4a4e
Form alanı ve panel kenarı.
Metin rengi değil
Marka
Örnek
Ad
Açık
Koyu
Kullanım
Kontrast (yüzey üzerinde)
Kilit taşı--ar-keystone
#b5532e
#d27a55
Yalnızca logo ve seçili konum kaması.
açık 4,7:1 AA koyu 5,3:1 AA
Kilit taşı bir işarettir, renk değil.
Kiremit yalnızca logoda ve gezinmede seçili konumu gösteren kamada kullanılır. Düğme, bağlantı ya da uyarı rengi olmaz: kritik uyarının kırmızısına yakın olduğu için kullanıcı bir uyarıyı marka sanabilir ya da markayı uyarı sanabilir. Ana eylem her zaman mürekkep rengindedir.
Ürün aksanları
Her ürünün tek vurgu rengi vardır; <html data-product="guard"> ile seçilir. Vurgu yalnızca ürün adında, seçili sekmede ve küçük işaretlerde kullanılır; düğme mürekkep kalır.
Örnek
Ad
Açık
Koyu
Kullanım
Kontrast (yüzey üzerinde)
Custofaber IT--ar-product
#45575e
#a3b4ba
Nötr kurşun mavisi. data-product verilmezse geçerli olan değer.
Seçtiğiniz ürünün aksanı bu sayfadaki örneklere uygulanır.
ÖBÖrnek BelediyesiÜrün adı aksan renginde
Durumlar
Durum renklerinin kontrastı kendi açık zemini (--ar-…-tint) üzerinde ölçülmüştür; rozetler bu zeminle çizilir. Tanıtım sitesi renkleri sıcak zemin üzerinde.
Örnek
Ad
Açık
Koyu
Kullanım
Kontrast (yüzey üzerinde)
Kritik--ar-critical
#a3204c
#f07f9f
Sekizgen + metin.
açık 5,8:1 AA koyu 6,2:1 AA
Uyarı--ar-warning
#855600
#e2ab4f
Üçgen + metin.
açık 5,3:1 AA koyu 7,1:1 AA
Olumlu--ar-good
#2a6b47
#6cc394
Daire + metin.
açık 5,2:1 AA koyu 7,2:1 AA
Bilgi--ar-info
#355f80
#84aed0
Kare + metin. Odak çerçevesi de bu renktir (--ar-focus).
açık 5,4:1 AA koyu 6,5:1 AA
Tanıtım siteleri
Tanıtım siteleri ürün içinden daha sıcak bir zemin kullanır. Bu değerler sitelerin kendi stil dosyalarındadır, tokens.css'te yer almaz.
Örnek
Ad
Açık
Koyu
Kullanım
Kontrast (yüzey üzerinde)
Sıcak zemin
#f2f1ee
—
Tanıtım sitelerinin arka planı.
Metin rengi değil
Mürekkep
#2b2a28
—
Metin ve düğme.
açık 12,7:1 AA
Guard çelik mavisi
#3d5a73
—
guard.custofaber.com vurgusu. Ürün içi Guard aksanından (--ar-product) biraz farklı.
açık 6,4:1 AA
Durumlar
Durum asla yalnızca renkle anlatılmaz. Her durumun kendi şekli vardır ve metin her zaman yazılır; renk görmeyen biri de ayırt edebilir.
KritikGeciktiÇözüldüAtandıAçık
Renk kalktığında şekil ve metin yine ayırt edilir.
KritikSekizgen. Hemen müdahale gerektiren durum.
UyarıÜçgen. Yakında bakılması gereken durum.
OlumluDaire. Sorun yok ya da çözüldü.
BilgiKare. Değişiklik ya da bilgi; işlem gerekmez.
NötrBoş daire. Henüz durumu olmayan kayıt.
Yazı
Tek aile: Manrope. Teknik değerler (IP, MAC adresi, seri numarası, özet) IBM Plex Mono ile yazılır; başka hiçbir yerde eş aralıklı yazı kullanılmaz.
Manrope
ğ ş ı İ ç ö ü · 0123456789 · ₺ %
Ürün içi ölçek yoğun arayüz için 14 piksel tabanlı, yaklaşık 1,2 oranında büyür. Tanıtım sitelerinde başlıklar bundan büyüktür.
Kemer biçimindeki C, kelimenin ilk harfinin yerine geçer. Marka adı tek kelimedir: Custofaber.
Doğru
Yatay logo
C kemeri ilk harfin yerinde. Başlık çubuklarında ve belgelerde bu kullanılır.
Doğru
İkon tek başına
Uygulama ikonu yalnızca tek başına kullanılır: sekme simgesi, uygulama simgesi, küçük yüzeyler. Hiçbir zaman "Custofaber" yazısının yanına ya da üstüne konmaz; kemer C zaten kelimenin ilk harfidir, yan yana gelince çift C okunur.
Custo Faber
Yanlış
İki kelime
"Custo Faber" ya da "CustoFaber" yazılmaz.
Ürün içinde: kurumun logosu sol üstte, Custofaber imzası küçük olarak altta.
Ürün kurumun kendi aracıdır; kullanıcı önce kendi kurumunu görür. Custofaber yalnızca kenar menüsünün dibinde küçük bir imzadır.
Kurumun logosu
Bileşenler
Aşağıdaki örnekler arcus-components.css ile çizilir; ürünün kullandığı sınıfların aynısıdır.
Düğmeler
Ana eylem mürekkep renginde. Ürün içinde köşeler 6 piksel (--ar-radius); tanıtım sitelerinde düğmeler köşesizdir.
Ürün içi: ar-btn, ar-btn--secondary, ar-btn--quiet, ar-btn--danger
Demo talep edinÜrünleri görün
Tanıtım sitesi: köşesiz, mürekkep
Denetim kaydı mührü
Hash zincirli denetim kaydı doğrulanınca görünür. Zincir kırıksa hangi kayıtta kırıldığı yazılır ve mühür kritik renge döner.
Zincir doğrulandıZincir 18.211. kayıtta kırık
Seçili konum kaması
Gezinmede seçili sayfa, kemerin kilit taşı gibi aşağı doğru daralan küçük bir kamayla gösterilir.
Satır düzeni
Liste ekranları çizgiyle ayrılan satırlardır. İlk sütun kaydın adıdır; teknik değerler eş aralıklı.
Cihaz
Seri no
Durum
PC-FEN-022
5CG2041XYZ
Desteği bitti
PC-MUH-114
5CG1987ABC
9 gündür görülmedi
SRV-DOSYA-01
CZ2213QRS
Güncel
Vigil bulgusu
Her bulgu aynı üç soruyu yanıtlar. Vigil eylemi önerir; uygulamayı insan onaylar.
Kritik
Kurumdan ayrılan personelin hesabıyla gece oturum açıldı
Bugün 03:12
Ne oldu
m.aksoy hesabıyla 02:41 ile 03:10 arasında 38 kez hatalı parola girildi, 03:12'de PC-FEN-022 üzerinden oturum açıldı. Hesabın sahibi kurumdan ayrıldı, ancak hesap Active Directory'de hâlâ etkin.
Neden önemli
Kimsenin kullanmadığı etkin bir hesap, parola tahmini için en kolay hedeftir. Uzun bir hatalı deneme dizisinin ardından gelen başarılı giriş, parolanın ele geçirildiğini gösteriyor olabilir.
Ne yapmalısın
Hesabı devre dışı bırakın ve açık oturumlarını kapatın.
PC-FEN-022 cihazını ağdan ayırıp inceleyin.
Ayrılan personel listesini Active Directory ile karşılaştırın.
Onayladığınız her işlem denetim kaydına geçer.
Örnek veridir.
İlkeler
Bileşenlerden önce gelen kurallar. Yeni bir ekran bunlardan birini bozuyorsa ekran değişir, kural değil.
İnternetsiz ağda çalışır.
Yazı tipleri, simgeler ve stil dosyaları ürünle birlikte gelir. CDN, Google Fonts ya da dışarıdan yüklenen hiçbir dosya yoktur.
Bu site de yazı tiplerini kendisi sunar.
Türkçe ve Türkiye biçimleri.
Arayüz Türkçedir. Tarih, saat, para ve sayılar Türkiye'ye göre yazılır.
18.10.2026 · 14:05 · 1.234,56 ₺ · %12
Açık ve koyu tema eşit.
İki tema da birinci sınıftır; tüm değişkenler ikisinde de tanımlıdır. Metin renkleri iki temada da WCAG AA eşiğini geçer (soluk yardımcı metin hariç).
Kullanıcının sistem tercihi izlenir; data-theme ile zorlanabilir.
Önce özet, sonra ayrıntı.
Liste ekranları dikkat gerektiren sayılarla açılır; ayrıntı satırlarda.
Şeffaflık görünür.
Kim, ne zaman yaptı; kayıt izi ve zincir mührü ekranda durur.
Durum renkle tek başına anlatılmaz.
Şekil ve metin her zaman yanındadır.
Dosyalar
Ürünün kullandığı dosyaların kopyaları. Asıl kaynak custofaber-platform deposundaki arcus/ klasörüdür.
arcus-tokens.css
Renk, yazı, boşluk ve köşe değişkenleri; açık ve koyu tema; ürün aksanları.
