Kurumsal Kimlik

Google İşletme
Tasarım Rehberi

Bölgesel Google İşletme istihbaratı sunan bir üründe tutarlılık şart. Bu rehber renk paletini, tipografiyi, yüzeyleri ve erişilebilirlik kurallarını tek kaynakta toplar. Tüm değerler globals.css @theme bloğundan gelir (belgeli JS/TS kopyası: lib/design-system/tokens.config.ts); kodda hex/px hardcode kullanılmaz. Sistem hem açık hem koyu temada çalışır.

00

Marka Kimliği

Sitede fiilen kullanılan tek logo bileşeni — components/Logo.tsx(SVG, Navbar'da da bu component render edilir). Açık ve koyu zemin karşılığı.

Not: ayrı bir icon-only/favicon lockup yok — aynı SVG marka işareti favicon için de kullanılıyor. Belgelenmiş bir min-size/clear-space kuralı bu repoda yok, bu yüzden icat edilmedi.

01

Renk Paleti

Birincil aksan koyu mor. Açık temada #4E0052, koyu temada #C77DD4 tonuna geçer. Magenta ayrı bir roldür: odak halkası, aktif anahtar, seçili nokta. Dolgu ya da gövde metni olarak kullanılmaz. Durum renkleri (yeşil / sarı / kırmızı) marka aksanından bağımsızdır.

Marka Vurgu (tema-duyarlı)

Primary

--color-primary

Light: #4E0052 · Dark: #C77DD4

CTA dolgusu, linkler, aktif durumlar

Kontrast: Etiket 14.53:1 / 5.70:1

Durum Vurgusu

--color-accent-state

Light: #FF0DB6 · Dark: #FF4FC8

Odak halkası, aktif anahtar, seçili nokta — dolgu veya metin değil

Kontrast: 3:1 (metin dışı)

Metin adımı: açık temada #4E0052 (Primary ile aynı), koyu temada #E4A9E6 — koyu zeminde dolgu tonu metin olarak yeterince okunmadığı için bir adım açılır.

Semantik / Veri Renkleri (tema-duyarlı)

Success

--color-success

Light: #0D652D · Dark: #81C995

Olumlu durum, yüksek puan

Warning

--color-warning

Light: #8F6B03 · Dark: #FDD663

Uyarı, orta puan

Danger

--color-danger

Light: #A50E0E · Dark: #F28B82

Hata, düşük puan

Metin

Birincil

--color-text-primary

Light: #100010 · Dark: #F5E9F6

Başlıklar, ana metin

Kontrast: AA+ ✓

İkincil

--color-text-secondary

Light: #4E0052 · Dark: #D9BFDC

Paragraflar, açıklamalar

Kontrast: AA ✓

Yardımcı

--color-text-muted

Light: #895E8C · Dark: #B594B8

Alt yazılar, üst etiket

Kontrast: AA ✓

Yüzey ve Kenarlık (tema-duyarlı)

Kart

--color-bg-card

Elevated / Badge

--color-bg-elevated

Border Hover

--color-border-hover

02

Tipografi

Font: Poppins (--font-sans + --font-display), mono kapalı. Radix UI bileşenleri ile yönetilir. Minimum metin: 14px (size='2').

Başlık Token'ları

hHero

Heading size='8'

28-35px

Hero başlık (1 adet/sayfa)

İşletmeleri Keşfet

hPage

Heading size='7'

24-28px

Section başlıkları

Rakip Analizi Yol Haritası

hSection

Heading size='5'

18-20px

Kart başlıkları

Bölgesel Tarama

hCard

Heading size='4'

16-18px

Alt başlıklar

Yorum Sentiment Dağılımı

Metin Token'ları

tBody

Text size='3'

16px

Paragraf, açıklama

81 ilde gerçek zamanlı işletme verisi çekin.

tUi

Text size='2'

14px

UI metin, form, buton

Tarama: 10/10 · Cache: 21 kayıt

tSmall

Text size='1'

12px

SADECE badge, copyright

© 2026 Google İşletme

Font Ailesi

Poppins

Tüm başlıklar, gövde metni ve UI elementleri için tek font.

Light 300Regular 400Medium 500Semibold 600Bold 700

02a

Breakpoint'ler (kilitli)

4 sabit WebForge breakpoint değeri — bu sayfadan düzenlenemez. Şu an bilgi amaçlı: Tailwind'in gerçek --breakpoint-* değişkenlerine henüz kablolanmadı (sitede 16+ dosya Radix { initial, sm, md }grid props'unu varsayılan Tailwind breakpoint'leriyle kullanıyor — bkz. tokens.config.ts KNOWN GAPS #4).

TokenDeğerReferans cihaz
xs280pxMinimum destek (Galaxy Fold)
sm350pxKüçük telefon
md758pxTablet
lg1200pxContainer max-width sınırı — masaüstü

03

Erişilebilirlik

WCAG 2.1 AA. Renk körlüğü güvenli: bilgi sadece renge bağımlı değil, ikon + metin ile desteklenir.

Kontrast Kuralları

Normal metin: minimum 4.5:1 (AA)

Büyük metin (18px+): minimum 3:1

Metin token'ları light + dark temada AA karşılar

Mor zemin üzerinde mor metin

Renk Körlüğü

Durum: ikon + metin (✓ Check / ✕ X)

Vurgu zemini üzerine ters metin (--color-text-inverse)

Yüzeyler token ile: --color-bg-elevated

Tek başına kırmızı-yeşil ayrımı

04

Başlıklar & Metin

Başlık 1

Başlık 2

Başlık 3

Başlık 4

Başlık 5
Başlık 6

Normal paragraf, strong, emphasis, small text, işaretli metin, H2O, m2, HTML kısaltması.

04a

Linkler

Varsayılan linkHover durumu (altı çizili)Focus-visible durumu (Tab ile)Devre dışı link görünümü

04b

Listeler

  • Sırasız öğe
  • İç içe
    • Alt öğe
  1. Sıralı öğe
  2. İkinci öğe
Terim
Tanım metni

04c

Tablolar

Sütun ASütun B
Satır 1Değer
Toplam—

04d

Form Elemanları

Sitedeki gerçek input yüzeyi (--color-bg-input) ve odak halkası (*:focus-visible, @layer base) kullanılıyor.

04e

Alıntı & Kod

Kaynak belirten bir alıntı örneği.

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

function ornek() {
  return true;
}

04f

Yatay Çizgi

04g

Görsel / Figure

Figure caption örneği.

05

Bileşen Örnekleri

Buton Varyant Matrisi

Sitede fiilen kullanılan 3 buton stili (.btn-primary, .btn-secondary, .btn-ghost — globals.css @layer components), her biri açık ve koyu panelde.

primary

secondary

ghost

Badge

AktifVurguRadix Badge (soft, purple)

05a

Kartlar

Card örneği

bg-[var(--color-bg-card)] + border-[var(--color-border)] + hover:border-[var(--color-border-hover)] — sitede kart bileşenlerinde (.card-base) kullanılan aynı desen.

05b

Uyarı / Bilgi Kutuları

Sitede gerçek info/success/warning/error semantic renkleri var — bu blok yeni bir Alert komponenti icat etmiyor, mevcut token'ları kullanıyor.

Info callout
Success callout
Warning callout
Error callout

05c

Sayfalama

Sitede henüz bir pagination komponenti yok — burada icat edilmiyor, eksik olarak işaretleniyor.

05d

Etkileşim Durumları

Buton, link ve form input'larının default/hover/focus-visible/disabled durumları yukarıdaki ilgili bölümlerde (buton matrisi, linkler, form elemanları) gösterildi. Odak halkası site genelinde aynı *:focus-visible kuralını (@layer base) kullanıyor — gerçek doğrulama klavye Tab sırasıyla yapılmalı.

06

Yasaklar

Hardcoded hex/px — yalnızca CSS değişkeni kullan

bg-white/[0.0x] gibi dark-only opacity — light'ta kaybolur

Box className="flex" — kapsayıcıda Flex/Grid veya div kullan

Inter, Roboto font — yalnızca Poppins

Google'ın resmi ürünü/ortağıymış gibi görünmek

Doğrulanamayan iddia ("piyasa lideri", "devrim")

07

CSS Değişken Referansı

Değişiklik sadece globals.css @theme / :root / .dark içinden yapılır (ve elle tokens.config.ts'e yansıtılır). Değerler temaya göre otomatik geçer.

/* Marka — tema-duyarlı */

--color-primary: #4E0052 → #C77DD4

--color-accent-state: #FF0DB6 → #FF4FC8

/* Vurgu takma adı — --color-primary'ye işaret eder, tema ile birlikte değişir */

--color-accent: #4E0052 → #C77DD4

/* Yüzey — light → dark */

--color-bg-page: #FFF8FF → #100010

--color-bg-card: #FFFFFF → #1B0C1D

--color-border: #E4D9E5 → #332036

/* Metin — light → dark */

--color-text-primary: #100010 → #F5E9F6

--color-text-secondary: #4E0052 → #D9BFDC

--color-text-muted: #895E8C