Marka ve arayüz kaynağı
Bu klasör tasarımın tek kaynağı. Tarayıcıda
design/index.html dosyasını açarak kullan — sunucu gerekmiyor.
CSS dosyaları olduğu gibi Next.js'e taşınacak, dolayısıyla burada yaptığın değişiklik
doğrudan ürüne gider.
Kurumsal Görsel Kimlik
Logo, kurgu ızgarası, yatay kilit ve boşluk oranı, uygulama ikonları, paylaşım görseli, e-posta başlığı, klip filigranı, sosyal profiller, kurallar.
02Arayüz Görsel Kimliği
Üç tema, renk ve tipografi token'ları, butonlar, etiketler, form alanları, gezinme, kartlar, oynatıcı, sohbet, veri gösterimi, geri bildirim — ve tam ekranlar: canlı yayın, giriş/kayıt, yayıncı paneli.
03Prototip
25 tıklanabilir sayfa: ana sayfa, keşfet, kategori, izleme (üye ve misafir), profil, giriş/kayıt, yayıncı paneli (8 ekran) ve yönetim paneli (6 ekran). Header ve sidebar tek kaynaktan.
Dosya yapısı
design/
├── index.html bu sayfa
├── brand.html kurumsal görsel kimlik
├── ui.html bileşen kütüphanesi
└── css/
├── tokens.css tek kaynak — renk, tip, boşluk, radius, motion, ölçü
├── base.css reset + tipografi yardımcıları
├── components.css bileşen kütüphanesi
└── guide.css sadece bu rehber sayfaları için
web/public/
├── favicon.svg
└── brand/
├── mark-t-cut.svg seçilen mark
├── logo-horizontal.svg yatay kilit · 9px boşluk
├── icon-app-dark.svg 96px koyu kutucuk
├── icon-app-orange.svg 96px turuncu kutucuk
└── mark-t-*.svg elenen 9 varyasyon (arşiv)
Değişiklik disiplini: bir rengi veya boşluğu değiştirmek
istiyorsan tokens.css'i düzenle — bileşen dosyasına dokunma.
Bileşen CSS'inde sabit değer varsa bu bir hatadır, token'a çevrilir.
Durum
| Konu | Durum | Not |
|---|---|---|
| Marka adı | Onaylı | Tayfa · tayfa.live alınacak |
| Renk paleti | Onaylı | Turuncu #FF8A1F · kontrastlar doğrulandı |
| Logotype | Onaylı | Inter 800 · üretimde outline'lanacak |
| Mark | Onaylı | Kesik Köşe T |
| Boşluk oranı | Onaylı | Mark yüksekliğinin %24'ü |
| Bileşen kütüphanesi | v1 hazır | İnceleme bekliyor |
| Üç tema | Hazır | Koyu · Açık · Gece (tam siyah) |
| Canlı yayın ekranı | v1 hazır | ui.html §12 — misafir ve üye sohbeti |
| Giriş / kayıt | v1 hazır | ui.html §13 — Google, Microsoft, Discord |
| Yayıncı paneli | v1 hazır | ui.html §14 — yayın anahtarı, sağlık |
| Varsayılan avatar | Hazır | Marka T'si, kullanıcıya özel tonda |
| OG paylaşım görselleri | Hazır | 3 varyant · web/public/brand/og/ |
| Prototip | 8 sayfa | app/index.html — sohbet kabuğu — ray, kanal listesi, mesaj, üye listesi |
| Ekip yayını etkileşimi | Hazır | Seçim → düzen · sürükle-bırak · çift tık tam ekran |
| Marka tescili | Başlanmadı | TÜRKPATENT 38. sınıf, şekil + kelime |