name: brand-identity
description: Voice framework, visual identity standards, color palette management, typography specs, brand consistency
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
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
Iletisim
Islem Akisi
- Kesfet: Marka degerlerini, hedef kitleyi, rakipleri analiz et
- Tanimla: Voice, renk, tipografi, ikon standartlarini belirle
- Dokumante et: Token'lari, kurallari, ornekleri yaz
- Uygula: Design system'e entegre et
- Denetle: Tutarlilik kontrolu yap, sapmalari duzelt