# bilgetek brand guidelines

Sürüm 1.0. Son güncelleme: 2026-06-09.

Bu doküman bilgetek logosu, renk paleti, tipografisi ve sosyal medya görsellerinin nasıl kullanılacağını anlatır. Tüm dosyalar bu klasördedir.

---

## 1. Logo (wordmark)

bilgetek logosu, küçük harflerle yazılan "bilgetek" kelimesidir. Ayrı bir simge veya monogram zorunlu değildir; küçük alanlarda yalnızca "b" işareti kullanılır.

### Tipografi temeli

| Özellik | Değer |
|---|---|
| Font | Geist Variable |
| Ağırlık | 600 (SemiBold) |
| Letter-spacing | -0.035em |
| Yazım | Tüm harfler küçük (`bilgetek`) |
| Birincil renk | `#09090B` (Ink) |

Site başlığındaki yazı bu ayarların aynısıdır. Yeni bir görsel hazırlarken inline `text` yerine bu klasördeki SVG ya da PNG dosyalarını import edin.

### Varyantlar (dosyalar)

`logos/svg/` (vektör, path'e dönüştürülmüş — her sistemde aynı görünür):

- `bilgetek-wordmark-black.svg` — birincil, açık zeminde
- `bilgetek-wordmark-white.svg` — koyu zeminde
- `bilgetek-wordmark-blue.svg` — marka mavisi, açık zeminde vurgu için
- `bilgetek-wordmark-pink.svg` — marka pembesi, opsiyonel accent
- `bilgetek-wordmark-on-dark.svg` — koyu arka plan dahil hazır
- `bilgetek-wordmark-on-light.svg` — beyaz arka plan dahil hazır
- `bilgetek-wordmark-gradient.svg` — mavi → pembe gradyan (site hero başlığı ile aynı)

`logos/png/` (şeffaf arka plan, 512/1024/2048/4096 px):

- Her renk varyantı için 4 çözünürlük
- Print veya yüksek çözünürlüklü ekran için 4096 px

`logos/jpg/` (beyaz/koyu arka plan dahil, 1024/2048/4096 px):

- Sosyal medya post, Office döküman, e-posta imza için pratik

### Logo kullanım kuralları

Yap:
- Logoyu en az 24px (web) veya 6mm (print) yüksekliğinde göster
- Etrafında en az `b` harfinin yüksekliği kadar boşluk bırak (clear space)
- Açık zeminde siyah, koyu zeminde beyaz versiyonu kullan
- Gradyan versiyonu vurgulu ekran kullanımları için sakla (sunum kapağı, hero görsel, sosyal medya kapaklar)

Yapma:
- Harfleri tek tek ayırma, döndürme veya eğme
- Letter-spacing'i değiştirme
- Geist dışında bir fontla yeniden çizme
- Drop shadow, outline, stroke, glow eklemek
- Düşük kontrastlı zeminlere yerleştirmek (#71717A altı bir gri zemine siyah logo yapıştırma)
- Logo içinden bir harf çıkarıp ayrı simge gibi kullanma (sadece sağlanan `b-mark` dosyaları izinli)

---

## 2. Renk paleti

Tüm renkler `colors/colors.json` ve `colors/brand-tokens.css` dosyalarında tanımlıdır. Görsel kart: `colors/color-palette.png`.

| İsim | Hex | RGB | Kullanım |
|---|---|---|---|
| Ink | `#09090B` | 9, 9, 11 | Birincil siyah, başlık, gövde, buton |
| Paper | `#FFFFFF` | 255, 255, 255 | Beyaz arka plan, açık tema |
| Blue | `#3B82F6` | 59, 130, 246 | Accent, link, vurgu |
| Pink | `#EC4899` | 236, 72, 153 | Gradyan ikinci durak |
| Green | `#10B981` | 16, 185, 129 | MailDrop ürün accent'i |
| Gray Line | `#E4E4E7` | 228, 228, 231 | Hairline, çerçeve |
| Gray Text | `#3F3F46` | 63, 63, 70 | İkincil metin |
| Gray Muted | `#71717A` | 113, 113, 122 | Yardımcı ve placeholder metin |

### Marka gradyanı

```
linear-gradient(110deg, #3B82F6 0%, #3B82F6 50%, #EC4899 100%)
```

Bu gradyan site hero başlığında ve `bilgetek-wordmark-gradient.svg` dosyasında kullanılır. İlk yarı düz mavi, ikinci yarı maviden pembeye geçiş.

---

## 3. Tipografi

| Kullanım | Font | Ağırlıklar |
|---|---|---|
| Wordmark, başlık | Geist | 600 |
| Gövde metni | Geist veya Inter (site Inter fallback'i kullanır) | 400, 500 |
| Etiket, mono, kod | Geist Mono | 400, 500 |

Geist Variable dosyası `typography/Geist-Variable.ttf` altındadır. Tüm yeni materyaller için bu fontu kullanın. Office döküman, PowerPoint vb. için bilgisayara yükleyin:

1. `Geist-Variable.ttf` üzerine sağ tık → Yükle (yalnızca benim için yeterli)
2. Word/PowerPoint'i yeniden başlatın
3. Font listesinden Geist seçin, ağırlık (weight) için stiller arasından SemiBold

Web için `next/font/google` ile Geist yüklenmelidir (site şu an Inter fallback ile çalışıyor, ayrıca eklenmesi önerilir).

---

## 4. Favicon ve uygulama simgesi

`favicons/` klasörü:

| Dosya | Boyut | Kullanım |
|---|---|---|
| `favicon.ico` | multi (16/32/48/64) | Klasik tarayıcı sekmesi |
| `favicon.svg` | vektör | Modern tarayıcı, ölçeklenebilir |
| `favicon-{16..1024}.png` | kare | Genel |
| `apple-touch-icon.png` | 180x180 | iOS Safari "Ana ekrana ekle" |
| `app-icon-{...}.png` | kare, koyu zemin | macOS, Windows masaüstü kısayolu |
| `app-icon-blue-{...}.png` | kare, mavi zemin | Renkli accent gerektiren yerler |
| `b-mark-*.svg` | "b" simgesi tek başına | Sosyal profil baş harfi, watermark |

Yan tarafa not: HTML `<head>` için minimal set:
```html
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
```

---

## 5. Sosyal medya görselleri

`social/` klasörü hazır boyutlar içerir:

| Dosya | Boyut | Platform |
|---|---|---|
| `og-image-light.jpg` / `og-image-dark.jpg` | 1200x630 | Open Graph (Twitter, Facebook, LinkedIn, WhatsApp önizleme) |
| `og-image-gradient.jpg` | 1200x630 | Marka gradyanı versiyonu |
| `og-image-en.jpg` | 1200x630 | İngilizce tagline |
| `square-light-1080.jpg` / `square-dark-1080.jpg` | 1080x1080 | Instagram, LinkedIn post |
| `square-gradient-1080.jpg` | 1080x1080 | Gradyan accent |
| `x-header-{light/dark}.jpg` | 1500x500 | X/Twitter profil header |
| `linkedin-banner-{light/dark}.jpg` | 1584x396 | LinkedIn şirket sayfa header |

Tagline: "Kurumsal yazılım, bulut altyapı ve otomasyon. Az proje, dolu emek."

İngilizce: "Custom enterprise software, cloud infrastructure and automation."

---

## 6. Marka sesi (tone)

Web sitesinde kurulmuş kurallar:

- TR yazıyoruz, em-dash (—) kullanmıyoruz. Yerine nokta + boşluk veya iki nokta.
- "Az proje, dolu emek" sözü kalbi. Marketing hype değil, mühendislik vurgusu.
- İletişim sade, profesyonel, biraz kuru. Sahte coşku yok.
- İngilizce versiyonda da aynı ton korunur.

---

## 7. Dosya envanteri (özet)

```
bilgetek-brand-kit/
├── logos/
│   ├── svg/      (7 dosya, path'e dönüştürülmüş)
│   ├── png/      (7 renk × 4 boyut = 28 dosya)
│   └── jpg/      (3 kullanım × 3 boyut = 9 dosya)
├── favicons/     (favicon.ico, favicon.svg, 30 PNG, 5 SVG)
├── colors/
│   ├── colors.json
│   ├── brand-tokens.css
│   ├── color-palette.svg
│   └── color-palette.png
├── social/       (13 hazır sosyal medya görseli)
├── typography/
│   └── Geist-Variable.ttf
└── guidelines/
    └── BRAND-GUIDELINES.md  (bu dosya)
```

---

## 8. Kaynak ve yeniden üretim

Tüm görseller `_build.py` betiği ile fontTools + Pillow kullanılarak üretilmiştir. Yeni varyant gerektiğinde betiği düzenleyip yeniden çalıştırın. Geist Variable Vercel'in resmi reposundan indirildi: github.com/vercel/geist-font.

Geist lisansı: SIL Open Font License 1.1 (ticari kullanım serbest).

---

Sorular: merhaba@bilgetek.com
