kvkkrehberi.com Tasarım Sistemi

Marka ve Logo Kullanımı

Açık zemin (birincil) · header ölçüsü

Koyu zemin (footer) · footer ölçüsü

Simge (favicon, avatar)

Logo her zaman orijinal en-boy oranıyla (7,31:1), şeffaf zeminli PNG kaynağından kullanılır. Logo döndürülmez, gölgelendirilmez, marka renkleri dışında renklendirilmez ve kontrastı düşük zeminlere yerleştirilmez. Koyu zeminlerde açık varyant, açık zeminlerde birincil varyant kullanılır.

İndirilebilir Logo ve İkon Dosyaları

• 
  Logo — birincilAçık zeminler için. Şeffaf arka plan.PNG · 768×105 px · şeffaf
  İndir
• 
  Logo — beyazKoyu zeminler için. Şeffaf arka plan.PNG · 768×105 px · şeffaf
  İndir
• 
  Simge (ikon)Favicon, uygulama ikonu ve profil görseli için. Kare.PNG · 512×512 px · şeffaf
  İndir

Renk Paleti

Rozetler, her rengin zemin olarak kullanıldığında üzerindeki otomatik seçilmiş metin rengiyle (açık zeminde #1c1c1c, koyu zeminde #fefeff) oluşan WCAG 2.1 kontrast oranını gösterir. Gövde metni için hedef AA (4.5:1), tercih edilen AAA (7:1) seviyesidir. Şeffaf (rgba) tanımlanmış token'lar için oran hesaplanmaz.

Tipografi · Urbanist

Tek yazı ailesi. Başlıklar güçlü ve net (600–800), gövde metinleri yüksek okunabilirlikte (400–500). Desktop / tablet / mobil ölçekleri her stilde ayrı tanımlıdır.

Tipografi Ölçeği

Yazı tipi yığını var(--font-urbanist), system-ui, -apple-system, sans-serif token'ından gelir. Üç kademe ayrık medya sorgularıyla değil, tek bir clamp() eğrisiyle uygulanır: tema değerleri veritabanından düz bir :root haritası olarak enjekte edildiği için medya sorgusu taşınamaz. Eğri mobil (375px) ve desktop (1280px) değerlerinden tam geçer; tablo bu yüzden hedefi değil, tarayıcının o genişlikte gerçekten çizeceği boyutu gösterir — tablet sütununda ~1px sapma görülebilir.

Boşluk Sistemi

Boşluklar 4 piksel tabanlı bir ölçekten türetilir; ara değer kullanılmaz. Bileşen içi boşluklarda 12px–24px, bileşenler arasında 32px–48px, bölümler arasında 80px–96px tercih edilir.

Grid ve Sayfa Yapısı

Tüm sayfalar 1320px genişliğinde ortalanmış tek bir konteyner kullanır; kenar boşluğu her ekran boyutunda 20px ve bu genişliğin dışında kalır. Uzun metin blokları okunabilirlik için 720px ile sınırlandırılır.

Sayfa hattı kuralı: header ve footer barı 1320px iç genişlik + 20px kenar boşluğu kullanır. İstisnasız tüm sayfa bölümleri (hero, kart ızgarası, bant, form, SSS, CTA) bu hatta oturur; böylece içerik header ve footer ile aynı noktada başlayıp biter. Sabit piksel yazılmaz; kap için max-width: calc(var(--content-wide) + 2 * var(--page-x)) + padding-inline: var(--page-x) kalıbı ya da dış kapta var(--page-x) dolgusu + iç kutuda var(--content-wide) kullanılır.

İkon Kullanımı

İkonlar her zaman 48px sabit boyutta, 1px çizgi kalınlığında ve outline stilinde kullanılmalı; dolgulu (filled) veya çok kalın çizgili ikon varyantları kullanılmamalıdır. Renk #1c1c1c (Koyu Renk) token'ından gelir; ikona özel renk tanımlanmaz.

Zemin kuralı: ikonların arkasında renkli kutu, daire veya dolgu kullanılmaz. İkon doğrudan sayfa yüzeyinde durur. Bu kural site genelinde geçerlidir; kart, uyarı, iletişim bilgisi, sosyal medya ve anket ekranlarındaki ikon kutucukları bu standarda göre kaldırılmıştır. Durum bilgisi gerektiğinde renk ikonun kendisine verilir (ör. başarı için #00a651), arkasındaki zemine değil.

Butonlar ve Etiketler

Buton yarıçapı 100px (tam yuvarlak), birincil buton zemini marka gradyanı (linear-gradient(90deg, #39a751, #2f9946)) ve gölgesi 0 10px 24px rgba(57, 167, 81, 0.35) token'ından gelir. Bir ekranda yalnızca tek bir birincil aksiyon bulunur.

Border Radius Kullanımı

Radius, öğe boyutu büyüdükçe artar: küçük ikon/etiketlerde 12px–14px, kartlarda 20px–24px, tam yuvarlak öğelerde (buton, pill, avatar) 50% / 100px kullanılır.

Form Alanları

Standart input yüksekliği 46–48px, radius 12px, border #e6e7e8'dir. Focus durumunda border #39a751 ve 0 0 0 3px rgba(141, 216, 157, 0.7) halkası kullanılır; hata durumunda aynı desen #ee3332 ile tekrarlanır.

Navigasyon

HakkımızdaBlogİletişim

AI Analizini Başlat

Header tam yuvarlak (100px) bir çubuktur; sayfa tepesinde şeffaf başlar, kaydırma ile opaklaşır. Aktif bağlantı marka rengiyle (#39a751) işaretlenir. Sayfa yolu (breadcrumb) yalnızca ikinci seviye ve altındaki sayfalarda gösterilir; son kırıntı bağlantı değildir. Mobilde ana menü tam genişlikte açılır panele dönüşür.

Uyarılar

Uyarılar her zaman durum rengiyle eşleşen %8–10 opak zemin, aynı rengin %25–30 opak border'ı ve dolu daire ikon rozeti kullanır. Radius 16px, iç boşluk 16px×20px.

Modal

Modal, koyu overlay üzerine 24px yarıçaplı, 440px maksimum genişlikte beyaz bir kart olarak açılır. Yıkıcı aksiyon butonu (Risk rengi) her zaman sağda, vazgeç/iptal her zaman solda yer alır.

İletişim Formu Bileşenleri

İletişim formları her zaman 24px yarıçaplı tek bir kart içinde toplanır; alan grupları arasında 12px boşluk kullanılır. Koşullu alt-form blokları (randevu, hizmet seçici) Light Lavender zemin (#f0faf2) ile ayrıştırılır. Gönderim sonrası her zaman ayrı bir başarı ekranı gösterilir.

Kartlar ve Bileşen Örnekleri

Kart anatomisi: kicker (mikro etiket) → ikon/başlık → açıklama → aksiyon. Standart kart zemini #fefeff, kenarlığı #e6e7e8, yarıçapı 24px, gölgesi 0 4px 6px rgba(57, 167, 81, 0.08) token'ıdır. Koyu varyant footer rengini (#1c1c1c), sakin varyant Light Lavender zemini kullanır.

Erişilebilirlik Standartları

Hedef seviye WCAG 2.1 AA'dır. Sayfa yapısı tek bir h1 ve sıralı başlık hiyerarşisi kullanır; dil niteliği tr olarak tanımlanır. Hareket duyarlılığı olan kullanıcılar için geçişler prefers-reduced-motion ile devre dışı bırakılabilir olmalıdır.