ELAY Tasarım Sistemi v2.0 · mağaza kabuğu
Tasarım sistemi
Her mağaza ekranının kurulduğu tokenlar, tipografi ve bileşenler — kategori şeritli sabit header, her zaman görünen sepet butonlu çerçeveli ürün kartları, bölüm başlıkları, açık paneller. Açık ve koyu tema, Türkçe ve İngilizce.
01
İlkeler
Kolay, hızlı ve güvenli alışveriş — ELAY'in kendi renkleri ve yazı karakterleriyle.
02
Renk
Nötr ve sakin. Açık paneller (--panel) içeriği gruplar; vurgu rengi yalnızca indirim ve uyarılarda kullanılır.
03
Tipografi
Başlıklarda Instrument Serif, geri kalan her şeyde Inter. Başlıklar ölçülü kalır — en büyüğü masaüstünde yaklaşık 52px.
h1 · 32–58pxkhead__title · 30–46pxh2 · 27–44pxshead__title · 24–32pxh3 · 21–28pxlead · 15–17pxbody · Inter 15pxpcard__price · 16px / 70004
Butonlar
46px yükseklik, 12px köşe, cümle düzeni. Ana işlem koyu, ikinci işlem çerçeveli.
05
Form alanları
Yüzen etiketler, 56px alanlar, dostça satır içi doğrulama. Mobilde yazı en az 16px (yakınlaştırma yok).
06
Seçim kontrolleri
En fazla ₺4.000
Segment07
Rozet & Bildirim
08
Header & navigasyon
Sabit, her zaman yapışkan header: logo, büyük arama kutusu ve yazılı ikonlar; masaüstünde altında açılır menülü kategori şeridi. Mobilde menü butonu, ayrı satırda arama ve alt menü.
09
Hizmet şeridi
Ana sayfa slider'ının altındaki dört söz — kargo, iade, güvenli ödeme, taksit — açık panel üzerinde.
- Ücretsiz kargo₺1.500 üzeri siparişlerde
- Kolay iade30 gün içinde ücretsiz iade
- Güvenli ödeme256-bit SSL, 3D Secure
- Taksit imkânıPeşin fiyatına 3, toplam 6 taksit
10
Kartlar
Ürün kartı: beyaz çerçeveli kart, kare görsel, rozet ve kalp, marka, iki satır ad, puan, fiyat ve her zaman görünen ekle butonu. Masaüstünde hover ile ikinci görsel, mobilde kaydırma.
11
Ürün rayı
Bölüm başlığı (solda başlık + alt metin, sağda "Tümünü gör" ve oklar) altında yatay ray: masaüstünde 5, mobilde yaklaşık 2 kart.
Parfüm
Grasse'ta bestelendi
12
Sayfa başlığı & içerik
İçerik sayfaları (Journal, bulucular, Hakkımızda, Yasal…) kompakt bir başlık paneliyle açılır: sayfa yolu, başlık ve tek satır giriş. İçerik yuvarlak kartlarda durur; uzun sayfalarda masaüstünde yapışkan içindekiler bulunur.
.kbox
İçerik kartı
Beyaz, çerçeveli, 18px köşe.
.kbox--panel
Açık panel
İlgili içeriği gruplar, çerçevesiz.
13
Katmanlar
Sepet sağdan açılan çekmece, hızlı ekleme alt panel (masaüstünde ortalı), kararlar pencere olarak açılır.
14
Akordeon & Sekmeler
Ürün detayları
Malzeme
Bakım
Sekmeler animasyonlu alt çizgi kullanır ve içerik alanını sabit tutar.
15
Boş · Yükleniyor · Hata
Boş, yükleniyor ve hata ekranları tasarımın parçasıdır — sakin, insani, asla teknik değil.
Bir şeyler ters gitti.
Lütfen tekrar dene.
16
Hareket
Easing: cubic-bezier(.16,1,.3,1). Arayüzde 200–600ms. "Azaltılmış hareket" tercihi her yerde desteklenir.
