Tayfa marka sistemi
Logo, ölçüler, zeminler, uygulama ikonları ve kurumsal uygulamalar.
Buradaki her ölçü css/tokens.css içindeki token'lardan türüyor; bu sayfa
dokümanın görsel hâli, ayrı bir kaynak değil.
1 · Logo
Mark bir kap: yuvarlak köşeli, sağ alt köşesi 45° kesik, "T" harfi negatif alandan
kesilmiş. Harf boyalı bir şekil değil — gerçek bir delik
(fill-rule="evenodd"), yani logonun arkasındaki zemin harfin içinden görünür.
Turuncu zeminde beyaz kullanılmaz. #FF8A1F açık bir
renk; beyaz 2.4:1'de kalıyor, erişilebilirlik eşiği 4.5:1. Turuncu zeminde mark ve
yazı her zaman #140A02 (8.3:1).
2 · Kurgu ızgarası
Mark 64 birimlik bir ızgarada kurulu. T'nin kalınlığı Inter 800'ün gövde kalınlığıyla aynı — mark ve yazı aynı ağırlıkta okunuyor.
- kap
- x 4–60, y 4–60 · köşe yarıçapı 15
- kesik köşe
- (60, 38) → (38, 60) · 45°, kesim uzunluğu 22
- T crossbar
- x 15–49, y 17–29 · yükseklik 12
- T gövde
- x 26–38, y 17–47 · genişlik 12
- duvar
- yan 11 · üst 13 · alt 13
- uç biçimi
- düz kesim — Inter'in uçları düz, yuvarlak uç uyuşmuyor
3 · Yatay kilit ve boşluk
İkon ile yazı arasındaki optik boşluk mark yüksekliğinin %24'ü. Oran olduğu için her boyutta aynı ilişki korunuyor — CSS'te tek değişkenle yönetiliyor.
CSS'te tek değişken: --brand-size. Boşluk
calc(var(--brand-size) * .24) ile türüyor, yazı boyutu da aynı değere
bağlı. Elle boşluk girilemez — oran bozulamaz.
4 · Uygulama ikonu ve favicon
Doluluk oranı kullanıma göre değişir: favicon'da 16px'te her piksel değerli (%95), uygulama ikonunda iOS/Android kendi maskesini uyguladığı için kenarda nefes payı gerekiyor (%69).
SVG tuzağı: <use> elementine
width/height verilmezse sembol 64 birimlik ızgarası yerine
çevreleyen görüntü alanının tamamına ölçeklenir; transform ile
birleşince çerçeveden taşar. Her <use> açık ölçü taşıyacak.
5 · Kurumsal uygulamalar
Logonun ürün dışındaki hayatı: paylaşım görseli, e-posta, klip filigranı, sosyal profil.
5.1 · Paylaşım görseli (OG)
1200 × 630 · sunucuda üretilirPaylaşılan bir linkin tık oranını neredeyse tamamen bu görsel belirliyor. Üç varyant var; her biri o anın kendisini gösteriyor — düz bir marka kartı değil. Ortak dil: yayın karesi zemin, alt bantta bilgi, sağ altta markanın kesik köşesi grafik öğe olarak tekrarlanıyor.
Üretim: artwork design/og/render.html içinde yaşıyor;
yukarıdaki görseller o sayfanın gerçek çıktısı
(node design/build-assets.mjs --pack=og). Üründe aynı ölçüler sunucuda
her yayın için yeniden üretilir (/api/og/*, Satori + resvg).
Kare görüntüsü gerçek thumbnail ile değişir; thumbnail yoksa buradaki mesh gradyan kalır.
- boyut
- 1200 × 630 · PNG · hedef 300 KB altı (hız, sınır değil)
- önbellek
- Canlı yayında 60 sn, klip/VOD'da 24 saat, kanalda 1 saat
- kenar payı
- %5 — sosyal medya önizlemeleri kenarı kırpabiliyor
- başlık
- 5cqw (1200px'te 60px), en fazla 2 satır, 22ch genişlik; taşan kesilir
- satır yüksekliği
- Her metin öğesinde oran olarak tanımlı. Mutlak px bir kez miras alındığında büyük yazılar üst üste biniyor — bu şablonların ilk sürümündeki hata buydu
- durum çipi
- Üst sırada, CANLI pilinin yanında — alt sağda kesik köşeyle çakışıyordu
- tick
- Başlığın üstünde 6cqw'lik kısa turuncu çubuk. Çerçeveyi boydan boya kesen çizgi video karesi üstünde kaza gibi duruyor
- kesik köşe
- Sağ alt, kenarın %9'u · marka grafik öğesi, her varyantta var
- C varyantı
- Sağ panelin tipografisi panele göre ölçekli:
cqw1200px'lik kaba göre çözülüyor, panel ise ~555px — çerçeve ölçeğindeki boyutlar paneli taşırıyor - yedek
- Üretim hatasında statik marka kartı sunulur — asla boş OG dönmez
5.2 · E-posta şablonu
600px · tablo tabanlıEn çok gönderilen e-posta "takip ettiğin kanal yayına başladı". Tek işi var: yayına tıklatmak. Bu yüzden kare görseli büyük, düğme tek ve büyük, geri kalan her şey küçük.
Bildirim ayarları · Sadece bu kanalı sustur · Tüm bildirimlerden çık Tayfa Teknoloji A.Ş. · İstanbul, Türkiye · Gizlilik · Kullanım Şartları
Ticari elektronik ileti onayın İYS'de kayıtlıdır.
E-posta teknik kısıtları — bu demo gerçek şablon değil, ölçü kaynağı.
Gerçek şablon <table> tabanlı ve tüm CSS satır içi olmak zorunda:
Outlook (Word motoru) flexbox, grid, aspect-ratio, CSS değişkeni ve
border-radius'un bir kısmını desteklemiyor. Kurallar:
- genişlik
- 600px sabit · mobilde tek kolona akar (
max-width+ medya sorgusu) - düzen
- İç içe
<table>, satır içi stil. Flexbox/grid yok - yazı tipi
- Web font yok —
Segoe UI, Roboto, Helvetica, Arial, sans-serif. Logo PNG olarak gömülür, SVG çalışmaz - düğme
- Bulletproof button:
<table>+<a>+ VML yedeği. Köşe yuvarlaklığı Outlook'ta düzleşir, kabul edilir - koyu mod
prefers-color-scheme+<meta name="color-scheme">. Gmail renkleri kendisi çeviriyor — bu yüzden zemin #0F1114 gibi koyu seçilir, ters çevirme hasar vermez- görseller kapalıysa
- Her görselde
altmetni ve zemin rengi; mesaj görsel olmadan da anlaşılır - önizleme metni
- Gizli preheader — konu satırından sonra gelen 90 karakter
- yasal
- Gönderici kimliği, adres, tek tıkla çıkış, İYS onay referansı — Ticari İletişim Yönetmeliği gereği
- test
- Gmail (web/iOS/Android), Outlook 2016+, Apple Mail, Yandex — her sürüm öncesi
Diğer e-posta şablonları aynı iskeleti kullanır: hoş geldin · e-posta doğrulama · şifre sıfırlama · abonelik makbuzu · ödeme başarısız · payout bildirimi · haftalık yayıncı performans özeti · klip trend oldu bildirimi.
5.3 · Sosyal profil görselleri
6 · Kurallar
Boş alan mark yüksekliğinin %25'i. Hiçbir öğe bu alana girmez.
Minimum: mark 16px, yatay kilit 20px mark yüksekliği. Altında sadece mark kullanılır.
Fotoğraf üzerinde %60 koyu scrim + turuncu mark, ya da koyu kutucuk varyantı.
Germe, sıkıştırma, döndürme, eğme, gölge veya parlama efekti eklemek.
Turuncu zeminde beyaz mark veya beyaz yazı. Kontrast 2.4:1 — eşiğin yarısı.
Boşluk oranını değiştirmek. %24 sabit, elle girilemez.
T'yi boyalı şekil olarak çizmek. Her zaman negatif alandan kesilir.
Turuncu dışında marka rengi. Tek vurgu rengi var.