Ortak çekirdek
Navy, Primary Blue, başarı/hata, köşe ve aralık düzeyleri ile odak halkaları uyumludur; CRM ve web sitesinde tanınır.
Marka · Ürün · Web sitesi
İki sistem.
İki sistem.
Tek marka.
AgenticUltimate ortak bir marka temeli ve üzerine kurulu iki tasarım sistemi kullanır: eklentinin ürün arayüzü için ve AgenticUltimate için.
Neden iki tasarım sistemi?
Ürün ve pazarlamanın görevleri farklıdır. Ortak temel markayı tanınabilir tutar; ayrı token katmanları CRM'in açılış sayfası, web sitesinin yönetim paneli gibi görünmesini önler.
Ayrı roller
Eklenti yoğunluğu ve kullanımı optimize eder. Web sitesi ölçülü vurgularla açıklığı, dönüşümü ve kaliteli görünümü optimize eder.
Ölçeklenebilir
Yeni modüller ve sayfalar belgelenmiş token ve bileşenlerden yararlanır; daha az görsel istisna ve daha hızlı uygulama sağlar.
AgenticUltimate UI 1.0
Ürün tasarım sistemi (eklenti)
SuiteCRM arayüzü için: formlar, tablolar, iletişim kutuları, sihirbazlar ve yoğun çalışma yüzeyleri. İşlevsel, açık ve kurumsal kullanıma uygun.
| Alan | İçerik |
|---|---|
| Renkler | Navy (#001631), Primary (#165DCC), anlamsal durum renkleri, açık çalışma bağlamları için yüzeyler |
| Tipografi | Etiket, tablo ve form metinleri için kompakt arayüz ölçeği; yüksek bilgi yoğunluğunda okunabilirlik |
| Aralık ve köşe yarıçapı | 4/8/12/16/24/32 temeli; girişler, kartlar ve iletişim kutuları için sm–lg yarıçap |
| Bileşenler | Düğmeler, girişler, seçimler, iletişim kutuları, sekmeler, tablolar, sihirbaz adımları ve durum rozetleri |
| Yoğunluk | Yönetim ve liste görünümleri için isteğe bağlı kompakt gösterim |
Hedef kitle CRM yöneticileri ve ileri düzey kullanıcılardır. Her karar şu soruyu izler: Verileri daha hızlı ve güvenli işlemeye yardımcı oluyor mu?
AgenticUltimate Web 1.0
Web sitesi tasarım sistemi (pazarlama)
AgenticUltimate için: ana tanıtım alanı, özellik kartları, güven, mega menü ve koyu mod. Kaliteli, teknik, kontrollü camgöbeği ve mor kullanımıyla.
İlkeler
Efektten önce açıklık – ekran başına en fazla 1–2 geçiş.
Tek baskın renk – ana renk yönlendirir, camgöbeği/mor destekler.
Kartlar faydayı anlatır – yumuşak gölgeler, ince kenarlıklar ve hafif üzerine gelme efekti.
Yapı taşları
Başlık tipografisi, giriş rozetleri, özellik kartları, güven şeritleri, ürün görselleri, kapanış çağrıları ve mega menü. Açık ve koyu mod tek token kaynağından.
| Token ailesi | Örnekler |
|---|---|
| Marka çekirdeği | --su-navy, --su-primary, --su-ink |
| Vurgular | --su-cyan, --su-violet (ölçülü) |
| Yüzeyler | Düz · Yükseltilmiş · Üst katman · Ana tanıtım |
| Gölgeler | --su-shadow-sm ile --su-shadow-lg; neon halkasız üzerine gelme efekti |
| Hareket | prefers-reduced-motion tercihine uyan kısa geçişler |
Ürün köprüsü
Paylaşılanlar ve bilinçli olarak ayrı tutulanlar.
Ortak
Navy ve Primary Blue · Success/Danger · sm–lg yarıçap · Aralık temeli · Ana renkte odak halkası · Marka adı ve simge dili
Yalnızca web sitesi
Camgöbeği/mor vurgular ve geçişler · Aurora arka planları · Büyük başlıklar · Kayan şerit ve pazarlama gölgeleri · Ölçülü cam efekti (üst bilgi)
Ekipler ve uygulama için
Sistemleri günlük işte kullanma.
Ürün geliştirin
Yeni eklenti ekranları için AgenticUltimate UI 1.0'ı referans alın. Varyant oluşturmadan önce mevcut bileşenleri tercih edin.
Web sitesini genişletin
AgenticUltimate Web 1.0 ve site.css tokenları. Yeni bölümleri ana tanıtım → güven → özellikler → eylem çağrısı düzenine göre hazırlayın.
Kaliteyi koruyun
Kontrastı, klavye kullanımını ve azaltılmış hareketi kontrol edin. PageSpeed ve erişilebilirlik teslim standardının parçasıdır.
Tasarım sistemlerini canlı keşfedin
Etkileşimli web sitesi tasarım sistemi tokenları, bileşenleri ve koyu modu gösterir. Ürün arayüzü SuiteCRM eklentisi için kılavuz olmayı sürdürür.