Ana renk
--brand · #172b4dBirincil eylemler, odak, aktif durum.
Aynı dil.
Her ekranda.
Mağaza deneyiminin renkleri, ölçüleri ve bileşenleri. Bu sayfa, prototiple aynı tasarım değişkenlerini ve stilleri kullanır.
Prototipe dön ↗01 / Renkler
Vurgu
--accent · #ff6b4aAna çağrı butonları ve küçük görsel ayrıntılar. Durum bildirimleri ayrı başarı / hata renklerini kullanır.
Yüzey
--bg / --surface / --cardİçerik katmanları ve açık / koyu tema.
02 / Tipografi
Hero · 42–88 px / 1.04 / 560; vurgu Georgia italik
İşinizin yeni adresi.
Bölüm · 32–48 px / 1.13 / 680
Birlikte büyüyelim.
Kart · 24 px / 1.22
Her şey aynı yerde.
Gövde · 16 px / 1.6
Türkçe karakterler: ğ, ş, ı, İ, ö, ü, ç. Sade cümleler, anlaşılır eylemler.
03 / Boşluk ve şekil
4 px taban
4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96
--space-1 … --space-24Köşe yarıçapı
Kontrol 8 px
Kart 12 px
Ana yüzey 16 px
--radius-sm / --radius / --radius-lgHareket
350 ms, yumuşak çıkış. İlerleme 600 ms. Azaltılmış hareket tercihi desteklenir.
--duration / --ease04 / Eylemler
Birincil eylem lacivert; açılış ve son formda mercan vurgu; ikincil eylem çerçeveli. Klavye odağı görünür. Dokunma alanları en az 44 px olacak şekilde düzenlenir.
05 / Form durumları
Geçerli bir e-posta yazın.
Durum etiketleri
Yakında✓ Adım tamamlandı
Bir sonraki adım bekleniyor
06 / Bileşen sözleşmeleri
Demo formu
Mağaza adı ve e-posta. Alan altında hata, görünür etiket ve onay kutusu. Aynı form hem sayfada hem pencerede.
Kurulum sahnesi
Çalışıyor, tamamlandı ve hata durumları. Yedi adımlı ilerleme ve ekran okuyucu bildirimi. Kullanıcı adı güvenli metin olarak işlenir.
İçerik kartları
Özellik, paket ve karşılaştırma için ortak kenarlık, yüzey ve boşluklar. Mobilde tek sütun; karşılaştırma kartlara dönüşür.
07 / Uygulama sınırları
Bu sürüm Türkçedir. Fiyatlar yer tutucudur. Gerçek mağaza açılmaz; veri kalıcı kaydedilmez ve e-posta gönderilmez. İş akışları ayrı servis dosyasından gerçek sisteme bağlanabilir.
08 / Hareket ve keşif
İş akışı sekmeleri
Beş gerçek iş konusu. Ok tuşları, Home ve End ile gezinme; tek odak sırası. Sekme değişiminde 420 ms giriş.
Kontrollü hareket
Hafif vitrin hareketi, bölüm girişleri ve adımlı akış. Görünmeyen bölümler durur; kullanıcı akış hareketini durdurabilir. Azaltılmış hareket tercihine uyulur.
Özellik keşfi
Konu filtresi + Türkçe arama + açılır detaylar. Sonuç sayısı bildirilir. Planlanan işler “Yakında” etiketi taşır.
09 / Ürün önizleme dili
Yönetim panelinin düzenini koruyan lacivert menü, mercan aktif durum ve açık gri çalışma yüzeyi. Ürün önizlemeleri Ticera kimliğine uyarlanmıştır. Temsili ekranlar kişisel veri içermez.
Menü · #172b4dAktif · #FF6B4AYüzey · #F5F6F810 / Editoryal tasarım yaklaşımı
Ticera kimliği: #172B4D lacivert, #FF6B4A mercan. Ferah açılış, iki satırlı güçlü başlık ve yalnızca ana başlıklarda serif vurgu. Önce ürünün günlük faydası, sonra ayrıntı keşfi. Düz hizalanmış ürün ekranları, ince ayırıcılar ve düşük gölge yoğunluğu.
Hareket: bölüm girişinde 12 px / 600 ms; butonlarda 2 px / 350 ms; vitrin önizlemesinde 4 px / 7 sn. Ekran dönüşleri ve sürekli sallanma kullanılmaz. Azaltılmış hareket tercihi desteklenir.