Birincioğlu Ticaret Marka Kılavuzu

Bu sayfa, markamızın kimliğini, renk paletini, tipografisini ve tasarım standartlarını tanıtır.

1. Marka Kimliği

Açık zemin (bg-neutral-50)

Logomuzun koyu zemine uygun bir varyantı henüz bulunmuyor, bu nedenle şu an için yalnızca açık zemin üzerinde gösteriliyor.

Site tek bir logo dosyası kullanıyor (LOGO_URL = "/images/logo-cropped.png", src/data/products.ts), ayrı icon-only/favicon lockup yok; ayrı bir wordmark bileşeni de yok (logo görseli marka adını zaten içeriyor).

2. Renk Paleti

primary

color.primary.50

#FDF2F3

color.primary.100

#FBE2E2

100

color.primary.200

#F6C4C5

200

color.primary.300

#F09B9C

300

color.primary.400

#E9696A

400

color.primary.500

#E02E30

500

color.primary.600

#B82628

600

color.primary.700

#941F21

700

color.primary.800

#6F181A

800

color.primary.900

#4E1113

900

color.primary.950

#390D0F

950

neutral

color.neutral.0

#FFFFFF

color.neutral.50

#FFFFFF

color.neutral.100

#F4F4F4

100

color.neutral.200

#E5E5E5

200

color.neutral.300

#D4D4D4

300

color.neutral.400

#A3A3A3

400

color.neutral.500

#737373

500

color.neutral.600

#525252

600

color.neutral.700

#404040

700

color.neutral.800

#262626

800

color.neutral.900

#171717

900

color.neutral.950

#0A0A0A

950

color.neutral.1000

#000000

1000

success

color.success.50

#F0FDF4

color.success.500

#16A34A

500

color.success.700

#15803D

700

danger

color.danger.50

#FDF2F3

color.danger.500

#B82628

500

color.danger.700

#941F21

700

social

color.social.whatsapp

#25D366

color.social.whatsapp-dark

#1EBE5D

whatsapp-dark

color.social.instagram

#E4405F

instagram

color.social.facebook

#1877F2

facebook

3. Tipografi Ölçeği

font-family: "Inter", system-ui, -apple-system, sans-serif

Hızlı kahverengi tilkixs · 12px / 0.75rem · line-height 1.5

Hızlı kahverengi tilkism · 14px / 0.875rem · line-height 1.5

Hızlı kahverengi tilkibase · 16px / 1rem · line-height 1.6

Hızlı kahverengi tilkilg · 18px / 1.125rem · line-height 1.6

Hızlı kahverengi tilkixl · 22px / 1.375rem · line-height 1.4

Hızlı kahverengi tilki2xl · 28px / 1.75rem · line-height 1.3

Hızlı kahverengi tilki3xl · 36px / 2.25rem · line-height 1.2

Hızlı kahverengi tilki4xl · 48px / 3rem · line-height 1.1

4. Boşluk, Köşe Yuvarlama ve Gölge

Spacing (4px grid)

0: 0

1: 4px

2: 8px

3: 12px

4: 16px

5: 20px

6: 24px

8: 32px

10: 40px

12: 48px

16: 64px

20: 80px

24: 96px

32: 128px

40: 160px

48: 192px

56: 224px

64: 256px

px: 1px

0.5: 2px

Radius

none: 0

sm: 1px

md: 1px

lg: 1px

xl: 1px

2xl: 1px

full: 1px

Shadow

none

2xl

inner

5. Breakpoint'ler (kilitli)

İsim	Değer	Referans cihaz
xs	280px	Minimum desteklenen (Galaxy Fold)
sm	350px	Küçük telefon
md	758px	Tablet
lg	1200px	Container max-width (limit)

Bu 4 değer site genelinde kilitlidir (site-builder/specs/responsive-system.md), bu sayfadan düzenlenemez.

6. Başlıklar ve Metin

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Kalın, italik, küçük metin, işaretli metin, H₂O, m² ve bir KVKK kısaltması.

6a. Bağlantılar

Varsayılan bağlantı, site genelinde gerçek kullanılan stil (ör. içerik sayfalarının breadcrumb linkleri, product card "kategoriye dön" linki).

6b. Listeler

Sırasız öğe
İç içe
- İç içe öğe

Sıralı öğe
İkinci öğe

Terim: Tanım

6c. Tablolar

Sütun A	Sütun B
Satır 1	Değer

6d. Formlar

Onay kutusu Radyo düğmesi

6e. Butonlar (Varyant Sistemi)

Primary — Pozitif mod, açık zeminler için

Primary Inverse — Negatif mod, koyu/renkli zeminler için

Secondary — Nötr dış çizgili, açık zeminler için

Ghost — Sadece metin, ikincil aksiyon

WhatsApp — Fonksiyonel marka rengi, sadece sipariş CTA'ları

Kural: açık (beyaz/nötr) zeminlerde "primary" (dolu, pozitif mod); koyu veya renkli panellerde "primary-inverse" (beyaz dolgu, negatif mod) kullanılır; aynı buton iki zeminde de kaybolmaz veya çakışmaz. "secondary" ve "ghost" düşük vurgulu ikincil aksiyonlar için, "whatsapp" sadece sipariş CTA'ları için.

6f. Alıntı ve Kod

Kaynak gösterilen bir alıntı örneği.

Satır içi kod örneği.

function ornek() {
  return true;
}

6g. Yatay Çizgi

6h. Görseller / Figure

Figure caption örneği.

6i. Rozetler / Etiketler (Badge)

Stokta Tükendi Spec chip örneğiTükendi (görsel üstü)

6j. Kartlar

Kart başlığı: örnek ürün adı

149,90₺/ adet

6k. Uyarılar / Bilgi Kutuları (Alert)

Bilgi (info): içerik sayfalarının "Kısaca" TL;DR kutusu stili.

Başarılı (success): stok/onay rozeti stili.

Uyarı (warning): KeyFactCallout vurgu kutusu stili.

Hata (error): tükendi rozeti stili.

6l. Breadcrumb

6m. Sayfalama (Pagination)

Bu sitede henüz gerçek bir Pagination bileşeni uygulanmamış (not yet implemented); mağaza/kategori sayfaları tüm ürünleri tek sayfada listeliyor. Sahte bir bileşen icat edilmedi.

7. Etkileşimli Bileşen Durumları

default

hover (bg-primary-700)

focus-visible (Button.tsx focus-visible:outline-primary-600)

disabled

Gerçek klavye-tab odak sırası (keyboard tab) manuel erişilebilirlik denetiminde doğrulanmalıdır; yukarıdaki focus-visible örneği görsel simülasyondur. Tüm varyantlar × tüm durumlar (default/hover/focus/disabled) için bkz. bölüm 6e.

Kaynak İşaretleri

Tüm renkler tokens.config.ts'den okunur
Bileşenler gerçek sayfalardan (ProductCard, AddToCartBox, Header, [kategori]) türetildi
Butonlar paylaşımlı src/components/ui/Button.tsx varyant sisteminden render edilir