Vibecosystem brand-identity

Voice framework, visual identity standards, color palette management, typography specs, brand consistency

install

source · Clone the upstream repo

git clone https://github.com/vibeeval/vibecosystem

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/vibeeval/vibecosystem "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/brand-identity" ~/.claude/skills/vibeeval-vibecosystem-brand-identity && rm -rf "$T"

manifest: skills/brand-identity/SKILL.md

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

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