Görsel sistem
SellFina marka kimliği — logo kullanımı, renk paleti, tipografi ve tasarım kuralları. Her UI öğesi buradaki sisteme uyar.
Logo
Marka adı + kırmızı dot. Türkçe noktasız 'ı' karakteri + üstüne SVG dot ile dot rengi marka aksenti olur.
- · Logoyu eğme, döndürme, renk değiştirme
- · Kırmızı dot'u kaldırma — marka kimliği
- · “Sellfina”yı tüm büyük harfle yazma (SELLFINA ❌)
- · Sidebar/header için
size={24} - · Landing/auth için
size={56} withTagline - · E-posta için
variant="light"
Renk Paleti
Hex koduna tıkla kopyala. Tailwind palette token'ları design.md'de detaylı.
Brand (mor — birincil)
Mevcut UI çoğunlukla bunu kullanır. Yeni UI için kademeli olarak accent/gold ile değiştirilebilir.
Accent (kırmızı — logo dot)
Vurgu noktaları, badge'ler, “yeni” rozetleri. CTA olarak değil — tehlike çağrışımı.
Gold (sarı — tagline)
Tagline metni, premium rozet, ikonik vurgu. Amber ile karıştırma — UI uyarısı için amber kullan.
Cream (off-white — logo gövde)
Logo metni rengi. Heading vurgusu olarak slate-100'ün alternatifi.
Ink (dark navy — logo bg)
Logo arka planı. Card bg için slate-900'ün daha derin alternatifi.
Tipografi
Inter font (next/font/google ile yüklenir). Heading skalası ve gövde örnekleri.
Sayfa başlığı
Section başlığı
Alt başlık
Gövde metni Inter font, slate-300 rengi. Markadan emin olmak için bu varsayılan tonu kullan.
Footnote, meta bilgi, ikincil yardımcı metin.
Component Patterns
design.md'deki standart bileşen örnekleri.
Butonlar
Rozetler
Stat Kartı
Empty State
Henüz ürün yok
İçe aktarmaya başla.
Logo İndirme
Markayla ilgili materyallerde kullanmak için.
design.md ve webapp/src/app/components/SellfinaLogo.tsx.