İşletme Tara
Tasarım Rehberi
Bu sayfa projenin renk paleti, tipografi sistemi ve erişilebilirlik kurallarını tanımlar. Tüm tasarım kararlarının tek kaynağıdır. Palette dışı renk kullanımı yasaktır.
01
Renk Paleti
3 renk: Arka plan (#0F1528) + Mavi vurgu (blue-500, blue-400) + Gri metin. Başka renk yoktur.
Arka Plan (Tek Renk)
Sayfa / Navbar / Bar
#0F1528
--color-bg-page
Tüm arka planlar — tek renk
Marka Vurgu (2 Ton)
Primary
#3b82f6
--color-primary
CTA, linkler, aktif durumlar
Primary Light
#60a5fa
--color-primary-light
İkincil vurgu, gradient
Metin
Birincil
#ffffff
--color-text-primary
Başlıklar, mavi bg üzeri metin
Kontrast: 16:1 ✓ AAA
İkincil
#d1d5db
--color-text-secondary
Paragraflar, açıklamalar
Kontrast: 9.5:1 ✓ AAA
Yardımcı
#9ca3af
--color-text-muted
Alt yazılar, yardımcı
Kontrast: 5.2:1 ✓ AA
Yüzey ve Kenarlık
Kart
white/[0.03]
Elevated / Badge
white/[0.08]
Border Hover
white/[0.12]
02
Tipografi
Font: Poppins. Radix UI bileşenleri ile yönetilir. Minimum metin: 14px (size='2').
Başlık Token'ları
h-hero
Heading size='8'
28-35px
Hero başlık (1 adet/sayfa)
İşletmeleri Keşfet
h-page
Heading size='7'
24-28px
Section başlıkları
Puan Yükseltme Yol Haritası
h-section
Heading size='5'
18-20px
Kart başlıkları
Müşteri Memnuniyeti
h-card
Heading size='4'
16-18px
Alt başlıklar
Hassas Ortalama
Metin Token'ları
t-body
Text size='3'
16px
Paragraf, açıklama
İşletmelerin performansını analiz edin.
t-ui
Text size='2'
14px
UI metin, form, buton
Arama: 10/10 · Cache: 21 kayıt
t-small
Text size='1'
12px
SADECE badge, copyright
© 2026 İşletme Tara
Font Ailesi
Poppins
Tüm başlıklar, gövde metni ve UI elementleri için tek font.
03
Erişilebilirlik
WCAG 2.1 AA. Renk körlüğü güvenli. Bilgi sadece renge bağımlı değil.
Kontrast Kuralları
Normal metin: minimum 4.5:1 (AA)
Büyük metin (18px+): minimum 3:1
gray-400 (#9ca3af): 5.2:1 ✓ dark bg
gray-500 (#6b7280): 3.8:1 ✗ metin için YASAK
Renk Körlüğü
Durum: ikon + metin (✓ Check / ⚠ Alert / ✕ X)
Mavi arka plan → beyaz metin
Tüm badge: bg-white/[0.08] + text-white
Kırmızı-yeşil ayrımı
04
Bileşen Örnekleri
Buton
Badge (Dark BG)
05
Yasaklar
Kırmızı, yeşil, mor, amber, turuncu — hiçbir renk
#1d4ed8 (koyu mavi) — palette dışı
#fbbf24 (amber) — palette dışı
text-white/50, text-white/60 gibi opacity metin
Mavi bg üzerinde mavi metin
Hardcoded hex — CSS variable kullan
Inter, Roboto font — sadece Poppins
06
CSS Değişken Referansı
Değişiklik sadece globals.css :root içinden yapılır.
/* Marka */
--color-primary: #3b82f6
--color-primary-light: #60a5fa
/* Arka Plan */
--color-bg-page: #0F1528
/* Metin */
--color-text-primary: #ffffff
--color-text-secondary: #d1d5db
--color-text-muted: #9ca3af