Logo
İki kavisli yelken + gövde: ilk bakışta tekne okunur. Kelime işareti marka fontuyla yazılır; direk boşluğu sabittir.
Birincil işaret
Sosyal medya
Koyu zemin üstü
Site başlığı, evrak — birincil kullanım
Kartvizit, dar alan
16-32px · kaşe ve gravür
Amblemin her yanında en az amblem yüksekliğinin %25'i kadar boşluk bırakılır.
- Germe veya sıkıştırma (en-boy oranı korunur)
- Döndürme veya eğme
- Marka dışı renklerle boyama
- Gölge, kabartma veya degrade ekleme
- Kalabalık fotoğraf üstüne doğrudan yerleştirme (önce sakin alan açılır)
- Amblemi kelime işaretiyle yeniden kurgulama (kilitler hazır verilmiştir)
Amblem 20px'in altında kullanılmaz; 16px favicon için sadeleştirilmiş sürüm vardır. Yatay kilit 120px genişliğin altında kullanılmaz — ad okunmaz hâle gelir.
Renk
Aydınlık zemin, tek canlı turkuaz. Koyu bölüm istisnadır, kural değil.
Canlı turkuazın üstünde beyaz yazı okunmaz (2.48:1 ölçüldü). Bu yüzden renk üç role ayrılır — Apple ve Shopify da böyle yapar.
- Ana metin / zemin — 15.06:1 (AAA)
- İkincil metin / zemin — 5.27:1 (AA)
- Link (#00798D) / zemin — 5.10:1 (AA)
- Link / yumuşak zemin — 4.87:1 (AA)
- Koyu buton + beyaz yazı — 15.06:1 (AAA)
- Canlı turkuaz rozet + koyu yazı — 8.33:1 (AAA)
- Canlı turkuaz / koyu bölüm (link) — 8.33:1 (AAA)
- Başarı 5.19:1 · Uyarı 5.93:1 · Hata 5.69:1 (hepsi AA)
- ⚠️ Canlı turkuaz üstüne beyaz yazı 2.48:1 → YASAK
- ⚠️ Nötr-400 (#9AAFB6) beyazda 2.29:1 → yalnız dekor, metin değil
Tipografi
Plus Jakarta Sans başlıkta, Inter gövdede, JetBrains Mono rakamda.
Yuvarlak ve modern — dost ama ciddi.
Ekranda en yüksek okunurluk, tarafsız.
Fiyat, stok, sipariş no hizalanır.
Bileşenler
Her ekran aynı dili konuşur — reçeteler burada.
⭐ Birincil eylem KOYU'dur. Canlı turkuaz buton yapma — beyaz yazı okunmaz.
⭐ Canlı turkuazın asıl yeri burası. Üstündeki yazı KOYU.
⚠️ Yer tutucu nötr-600'den açık OLAMAZ (kontrast).
Kart varsayılan olarak GÖLGESİZ; yükseltme gerekiyorsa `kart` gölgesi.
4'ün katları — ara değer uydurulmaz.
Orta (14px) markanın imzası.
Yumuşak ve az — ağır gölge eski web hissi verir.
Eğri: cubic-bezier(.22,1,.36,1)
Dil
Marka en çok ürünün içinde konuşur — buton, boş ekran, hata.
“Bugün aç, yarın sat. Takıldığın yerde biz varız.”
“5 dakikada profesyonel e-ticaret sitesi!”
Gerçekçi söz güven kurar; tutmayan hız vaadi ilk hayal kırıklığında markayı bitirir.
“Google'da bulunman için gerekenler kutudan geliyor.”
“Gelişmiş SEO/GEO altyapımızla organik trafiğinizi maksimize edin.”
Hedef kitle teknik değil. Terim değil sonuç konuşulur.
“Ödemeyi kendi hesabınla alırsın; para bizden geçmez.”
“Sektörün lideri ödeme altyapısıyla cironuzu artırın.”
Somut ve doğrulanabilir olan söylenir. 'Lider' ve ciro iddiası markanın değişmez yasağı.
“Panel herkeste var. Yürüten yok.”
“Rakiplerin panelleri karmaşık ve yetersiz.”
Konumlanma bir DURUMA karşı kurulur, rakip markaya değil — ad vererek saldırmak hem riskli hem küçültücü.
İlk ürününü ekle, mağazan görünmeye başlasın.
Boş durum suçlayıcı değil, davet edicidir. 'Hiçbir şey yapmadınız' DEME.
Siparişler geldiğinde burada listelenecek. Mağaza adresini paylaşmak iyi bir başlangıç.
Beklemeyi eyleme çevir — kullanıcıyı boş ekranla yalnız bırakma.
Hata oluştu. İşlem başarısız.
Ne olduğunu ve ne yapılacağını söyle. Suçlama, teknik kod verme.
Geçersiz giriş.
Kullanıcı hata yapmaz, form anlaşılmamıştır.
- Sen dili kullanılır ('siz' değil) — esnafla konuşuyoruz, kurumla değil.
- Cümleler kısa. Bir ekranda tek fikir.
- Teknik terim yerine sonuç: 'SEO' değil 'Google'da bulunma'.
- Ünlem işareti kullanılmaz; heyecan renkle ve boşlukla verilir.
- Yükleniyor yerine ne olduğunu söyle: 'Ürünlerin getiriliyor…'
Ayrım ve ritim
Bir arayüzün dağınık görünmesinin bir numaralı sebebi: her sınırın ayrımını başka yolla yapmak.
🔴 Bir sınırda TEK ayrım yöntemi kullanılır.
Bu kural components/ui.tsx içinde tip düzeyinde zorunlu: zemin değişen bölüme çizgi eklemek DERLENMEZ.
Varsayılan. İki bölüm arasında BOSLUK.bolum kadar boşluk; çizgi/renk YOK.
Bölüm zemini bir kademe değişir (zemin ↔ yuzey). Çizgi EKLENMEZ — renk zaten ayırdı.
1px `cizgi` rengi. Yalnız yoğun listelerde ve üst/alt barlarda; boşluk zaten azdır.
Sayfa zemini ve içerik kartları.
Bölüm zemini, panel arka planı, girdi dolgusu.
Yüzey üstünde duran kutu.
İSTİSNA. Sayfada en fazla BİR koyu şerit.
clamp(28px, 4vw, 40px)
clamp(44px, 6vw, 64px)
clamp(56px, 8vw, 80px)
Görsel alanları
Görsel süs değil, tasarımın taşıyıcısı. Her alanın oranı ve BOŞ HÂLİ önceden tanımlıdır — müşteri ne koyarsa koysun düzen bozulmaz.
- Boş görsel alanı DÜRÜST bir yer tutucu gösterir (ince çerçeve + 'Görsel ekle'); sahte fotoğraf BASILMAZ.
- Kırpma yıkıcı değildir: odak noktası (`focal`) saklanır, aynı görsel her orana göre yeniden kadrajlanır.
- ⚠️ Hero'da görselin ÜSTÜNE yazı geliyorsa sabit karartma katmanı ZORUNLU — okunurluk görsele bırakılmaz.
- SVG kabul EDİLMEZ: içinde script taşıyabilir (kiracı yüklemesi = güvenilmez kaynak).
Koyu bölüm istisnadır — hero ve kapanış gibi tek bir vurgu için. Sayfanın geri kalanı aydınlık kalır.