Faz 4: Tema ve Görsel Tasarım — Design Tokens ve CSS Variables

Neden Önemli?

Bir web sitesinin görsel tasarımı, kullanıcının ilk 50 milisaniyede oluşturduğu izlenimi belirler. Stanford Üniversitesi araştırmasına göre kullanıcıların %75'i bir şirketin güvenilirliğini web sitesinin tasarımına bakarak değerlendirmektedir.

Design token sistemi olmadan çalışan bir ekip, her yeni sayfa veya bileşende farklı renkler, fontlar ve spacing değerleri kullanır. Bu tutarsızlık zamanla "Frankenstein tasarım" olarak bilinen görsel karmaşaya dönüşür ve kullanıcı güvenini zedeler.

Dark mode artık bir lüks değil, bir beklentidir. Kullanıcıların %82'si dark mode seçeneği olan uygulamaları tercih etmektedir. Sistem temasına otomatik uyum (system preference), modern web sitelerinin olmazsa olmazıdır.

Kontrol Listesi

• Renk paleti tanımlama: Birincil (primary), ikincil (secondary), vurgu (accent), nötr (neutral), başarı (success), uyarı (warning), tehlike (danger) ve bilgi (info) renkleri — her biri için 50-950 arasında shade scale oluşturulmalıdır.
• Tipografi sistemi: Başlık (heading) ve gövde (body) font ailesi, type scale (xs'den 4xl'e), satır yüksekliği (line-height), harf aralığı (letter-spacing) ve font-weight değerlerinin tutarlı tanımlanması.
• Spacing sistemi: 4px veya 8px grid tabanlı spacing scale (0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32, 40, 48, 64). Padding, margin ve gap değerlerinin bu scale'den seçilmesi.
• CSS Custom Properties tanımlama: Tüm design token'ların :root ve [data-theme="dark"] scope'larında CSS variable olarak tanımlanması.
• Light/Dark/System tema toggle: Üç modlu tema değiştirici: light, dark ve system (işletim sistemi tercihine uyum). Tema seçiminin localStorage'da saklanması ve sayfa yenilenmesinde korunması.
• Border radius sistemi: none, sm, md, lg, xl, 2xl, full değerlerinin tutarlı tanımlanması. Bileşenler arası görsel tutarlılık için merkezi radius token'ları.
• Shadow sistemi: xs, sm, md, lg, xl shadow değerleri. Dark mode'da shadow'ların border veya glow efektine dönüştürülmesi (karanlık üzerinde shadow görünmez).
• Breakpoint sistemi: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px) responsive breakpoint'leri ve her breakpoint için layout değişiklikleri planı.
• Animasyon ve transition token'ları: Duration (fast: 150ms, normal: 300ms, slow: 500ms) ve easing (ease-in-out, spring) değerlerinin standardize edilmesi.

Teknik Gereksinimler

CSS Custom Properties ile tema sistemi:

:root { --color-primary: #0F2447; --color-primary-light: #1a3a6b; --color-accent: #10b981; --color-bg: #ffffff; --color-bg-secondary: #f8fafc; --color-text: #0f172a; --color-text-muted: #64748b; --color-border: #e2e8f0; --radius-md: 8px; --radius-lg: 12px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px rgba(0,0,0,0.07); --transition-fast: 150ms ease-in-out; --transition-normal: 300ms ease-in-out; } [data-theme="dark"] { --color-bg: #0f172a; --color-bg-secondary: #1e293b; --color-text: #f1f5f9; --color-text-muted: #94a3b8; --color-border: #334155; --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 6px rgba(0,0,0,0.4); }

Tema toggle implementasyonu (JavaScript):

type Theme = 'light' | 'dark' | 'system' function setTheme(theme: Theme) { localStorage.setItem('theme', theme) const resolved = theme === 'system' ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') : theme document.documentElement.setAttribute('data-theme', resolved) } // Sistem tercihi değiştiğinde otomatik güncelleme window.matchMedia('(prefers-color-scheme: dark)') .addEventListener('change', (e) => { if (localStorage.getItem('theme') === 'system') { document.documentElement.setAttribute('data-theme', e.matches ? 'dark' : 'light') } })

Font yükleme stratejisi:

/* next/font ile optimal font yükleme */ import { Inter } from 'next/font/google' const inter = Inter({ subsets: ['latin', 'latin-ext'], display: 'swap', // FOUT tercih edilir, FOIT değil variable: '--font-inter', })

Sık Yapılan Hatalar

1. Hardcoded renk değerleri kullanmak: color: #0F2447 yerine color: var(--color-primary) kullanılmazsa, tema değişikliğinde yüzlerce dosya güncellenmek zorunda kalır.
2. Dark mode'u düşünmeden tasarlamak: Light mode'da harika görünen tasarım, dark mode'da okunaksız olabilir. Her renk seçiminin iki tema için de test edilmesi gerekir.
3. Spacing'de tutarsızlık: Bir yerde 12px, başka yerde 13px, bir diğerinde 15px kullanmak piksel mükemmelliği bozar. Scale'den çıkmayın.
4. Font subsetting yapmamak: Google Fonts'tan tüm karakter setini yüklemek sayfa performansını düşürür. Sadece kullandığınız dillerin karakter setlerini yükleyin.
5. Tema flash'ı (FOUC): Sayfa yüklenirken önce light, sonra dark tema görünmesi. HTML head'de inline script ile tema tercihi okunarak engellenmelidir.

Profesyonel İpuçları

• Design token'larınızı JSON formatında tutun ve Figma, CSS, Tailwind ve mobil platformlar için otomatik dönüştürücü (Style Dictionary gibi) kullanın — tek kaynak, çoklu çıktı.
• Renk kontrastını otomatik kontrol eden bir linting kuralı ekleyin — erişilebilirlik ve tema tutarlılığı aynı anda sağlanır.
• Dark mode'da pure black (#000) kullanmayın — #0f172a gibi koyu lacivert tonları göz yorgunluğunu azaltır ve daha şık görünür.
• CSS Custom Properties'i Tailwind CSS 4 ile birlikte kullanın — theme() fonksiyonu ile token'lar doğrudan utility class'lara bağlanır.
• Tema tercihi analitiğini takip edin — kullanıcılarınızın kaçta kaçı dark mode kullanıyor? Bu veri, tasarım önceliklerinizi belirler.