vibeeval/brand-identity

Brand Identity

Marka kimligini olusturma ve koruma rehberi. Tutarlilik her seydir.

Voice Framework

Voice vs Tone

| Kavram | Tanim | Ornek | |--------|-------|-------| | Voice | Markanin kalici kisilik ozellikleri | "Profesyonel ama samimi" | | Tone | Duruma gore degisen ifade bicimi | Hata mesajinda: empatik, basaride: kutlamaci |

Personality Traits Matrisi

Markanin 4 eksenini tanimla:

| Eksen | Sol Uc | Sag Uc | Senin Pozisyon (1-5) | |-------|--------|--------|----------------------| | Formalite | Resmi, kurumsal | Samimi, konusma dili | ? | | Enerji | Sakin, olculu | Heyecanli, enerjik | ? | | Mizah | Ciddi, agirbasli | Eglenceli, espirili | ? | | Teknik | Basit, herkes icin | Uzman, teknik dil | ? |

Voice Checklist

• [ ] 3-5 kelimelik voice tanimi var (orn: "Guvenilir, samimi, net")
• [ ] Her voice ozelliginin "yapma" karsiligi var
• [ ] Ornek cumleler var (ana sayfa, hata mesaji, onboarding)
• [ ] Tone varyasyonlari tanimli (basari, hata, bekleme, bilgi)

Visual Identity Standards

Logo Kullanim Kurallari

| Kural | Detay | |-------|-------| | Clear space | Logo etrafinda min logo yuksekligi kadar bosluk | | Min boyut | Dijitalde min 24px yukseklik | | Arka plan | Hangi renklerde kullanilabilir, hangilerinde degil | | Varyasyonlar | Full color, monochrome, reversed (dark bg) | | Yasaklar | Stretch etme, renk degistirme, efekt ekleme |

Color Palette Management

3-Katman Token Mimarisi

LAYER 1: Primitive (Ham renkler)
  blue-500: #3b82f6
  blue-600: #2563eb
  gray-100: #f3f4f6

LAYER 2: Semantic (Anlam tasiyan)
  color-primary: {blue-600}
  color-danger: {red-600}
  color-surface: {white}
  color-text: {gray-900}

LAYER 3: Component (Kullanim yeri)
  button-primary-bg: {color-primary}
  button-primary-hover: {blue-700}
  card-bg: {color-surface}
  input-border: {gray-300}

Palette Kurallari

| Kural | Detay | |-------|-------| | Ana renkler | Max 3 (primary, secondary, accent) | | Notral tonlar | 1 gray skalasi (50-950) | | Durum renkleri | Success (yesil), Warning (sari), Danger (kirmizi), Info (mavi) | | Dark mode | Her semantic token'in dark varyanti | | Kontrast | Tum text/bg kombinasyonlari WCAG AA (4.5:1) |

Typography Specifications

| Kullanim | Font | Agirlik | Boyut | Satir Yuksekligi | |----------|------|---------|-------|-----------------| | Display | Primary | Bold (700) | 48-72px | 1.1 | | H1 | Primary | Semibold (600) | 36-48px | 1.2 | | H2 | Primary | Semibold (600) | 24-36px | 1.25 | | H3 | Primary | Medium (500) | 20-24px | 1.3 | | Body | Primary | Regular (400) | 16px | 1.5 | | Small | Primary | Regular (400) | 14px | 1.4 | | Caption | Primary | Regular (400) | 12px | 1.3 | | Code | Mono | Regular (400) | 14px | 1.5 |

Font Pairing Rehberi

| Baslik | Govde | Karakter | |--------|-------|----------| | Inter | Inter | Notr, profesyonel | | Cal Sans | Inter | Modern, teknoloji | | Playfair Display | Source Sans | Luks, editoryal | | Space Grotesk | DM Sans | Yaratici, modern | | Fraunces | Work Sans | Sicak, organik |

Iconography

| Kural | Detay | |-------|-------| | Stil tutarliligi | Tek icon seti sec (Lucide, Heroicons, Phosphor) | | Boyut skalasi | 16, 20, 24, 32px (text ile orantili) | | Cizgi kalinligi | Set icinde tutarli (1.5px veya 2px) | | Filled vs Outlined | Birini sec, karistirma |

Brand Consistency Checklist

Dijital Urunler

• [ ] Primary font tanimli ve yuklendi
• [ ] Color token'lari CSS variable olarak tanimli
• [ ] Logo tum varyasyonlarda mevcut (SVG)
• [ ] Favicon ve og:image marka tutarli
• [ ] Button, input, card stilleri tutarli
• [ ] Hata mesajlari marka voice'una uygun
• [ ] Empty state illust/copy marka ile uyumlu
• [ ] Loading animasyonu marka ile uyumlu
• [ ] 404 sayfasi marka ile uyumlu

Iletisim

• [ ] Email template'leri marka tutarli
• [ ] Bildirim mesajlari voice rehberine uygun
• [ ] Onboarding akisi marka tonunda
• [ ] Dokumantasyon stili tutarli

Islem Akisi

1. Kesfet: Marka degerlerini, hedef kitleyi, rakipleri analiz et
2. Tanimla: Voice, renk, tipografi, ikon standartlarini belirle
3. Dokumante et: Token'lari, kurallari, ornekleri yaz
4. Uygula: Design system'e entegre et
5. Denetle: Tutarlilik kontrolu yap, sapmalari duzelt