Brand Identity

SkillDev tools

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

Available today. Use it from your connected AI after setup.

Connect ahel once, and every AI you use reads what you have installed.

Then ask your AI: use the Brand Identity skill

What this skill tells your AI

The instructions your AI receives, as published by vibeeval/vibecosystem in skills/brand-identity/SKILL.md and read by ahel’s review.

Marka kimligini olusturma ve koruma rehberi. Tutarlilik her seydir.

Voice Framework

Voice vs Tone

KavramTanimOrnek
VoiceMarkanin kalici kisilik ozellikleri"Profesyonel ama samimi"
ToneDuruma gore degisen ifade bicimiHata mesajinda: empatik, basaride: kutlamaci

Personality Traits Matrisi

Markanin 4 eksenini tanimla:

EksenSol UcSag UcSenin Pozisyon (1-5)
FormaliteResmi, kurumsalSamimi, konusma dili?
EnerjiSakin, olculuHeyecanli, enerjik?
MizahCiddi, agirbasliEglenceli, espirili?
TeknikBasit, herkes icinUzman, 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

KuralDetay
Clear spaceLogo etrafinda min logo yuksekligi kadar bosluk
Min boyutDijitalde min 24px yukseklik
Arka planHangi renklerde kullanilabilir, hangilerinde degil
VaryasyonlarFull color, monochrome, reversed (dark bg)
YasaklarStretch 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
KuralDetay
Ana renklerMax 3 (primary, secondary, accent)
Notral tonlar1 gray skalasi (50-950)
Durum renkleriSuccess (yesil), Warning (sari), Danger (kirmizi), Info (mavi)
Dark modeHer semantic token'in dark varyanti
KontrastTum text/bg kombinasyonlari WCAG AA (4.5:1)

Typography Specifications

KullanimFontAgirlikBoyutSatir Yuksekligi
DisplayPrimaryBold (700)48-72px1.1
H1PrimarySemibold (600)36-48px1.2
H2PrimarySemibold (600)24-36px1.25
H3PrimaryMedium (500)20-24px1.3
BodyPrimaryRegular (400)16px1.5
SmallPrimaryRegular (400)14px1.4
CaptionPrimaryRegular (400)12px1.3
CodeMonoRegular (400)14px1.5
Font Pairing Rehberi
BaslikGovdeKarakter
InterInterNotr, profesyonel
Cal SansInterModern, teknoloji
Playfair DisplaySource SansLuks, editoryal
Space GroteskDM SansYaratici, modern
FrauncesWork SansSicak, organik

Iconography

KuralDetay
Stil tutarliligiTek icon seti sec (Lucide, Heroicons, Phosphor)
Boyut skalasi16, 20, 24, 32px (text ile orantili)
Cizgi kalinligiSet icinde tutarli (1.5px veya 2px)
Filled vs OutlinedBirini 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

Signals

GitHub stars
530
Forks
44
Last commit
Aug 2026
Advanced
Catalog kind
skill
Gateway key
brand-identity-vibeeval
Source
github.com/vibeeval/vibecosystem