Tema & Gorsel Sistem — Design Tokens, Renk Paleti ve Tipografi

Bu Hizmet Nedir?

Tema & Gorsel Sistem hizmeti, web sitenizin tum gorsel degerlerini (renk, tipografi, bosluk, golge, border-radius, animasyon) merkezi bir sistemle yoneten kapsamli bir tasarim muhendisligi calismaidir. Bu sisteme "Design Tokens" denir ve modern web gelistirmenin temel tasidir.

CSS custom properties (CSS variables) uzerine kurulu bu sistem, tek bir deger degisikligiyle tum sitenin gorunumunu guncellemenizi saglar. Light, dark ve system tema destegi, responsive tipografi skalasi, tutarli bosluk sistemi ve komponent bazli stiller bu calismanin ciktilaridir.

Design token sistemine sahip ekipler, UI gelistirmede ortalama %60 daha hizlidir. Cunku her komponent icin renk, font ve bosluk kararlarini sifirdan almak yerine, onceden tanimlanmis tokenlari kullanirlar. Bu da hem hizi arttirir hem de tasarim tutarliligini garanti eder.

Neden Gorsel Sistem Kritik?

Tutarsiz gorsel deneyim, marka algisini zayiflatir ve kullanicilarda guvensizlik yaratir:

• Tasarim tutarsizligi olan sitelerde bounce rate %40 daha yuksektir
• Design system kullanan ekipler, kullanmayanlara gore %47 daha hizli urun cikarir (InVision arastirmasi)
• Renk paleti 60-30-10 kuralina uygun sitelerde gorsel hiyerarsi ve okunabilirlik belirgin sekilde artar
• Dark mode destegi sunan siteler, kullanici memnuniyetinde %25 artis goruyor
• Tutarli tipografi skalasi, icerik okunabilirligini %35 arttirir

Detayli Calisma Kapsami

CSS Custom Properties Sistemi

Tum gorsel degerleri CSS custom properties olarak tanimliyoruz. Ornegin: --color-primary: #10b981, --font-heading: 'Inter', sans-serif, --spacing-4: 1rem. Bu degiskenler :root seviyesinde tanimlanir ve [data-theme="dark"] gibi secicilerle tema bazli override edilir. Sonuc: tek bir yerde degisiklik, tum sitede guncelleme.

Design Token Yapisi

Tokenlari uc katmanda organize ediyoruz: (1) Global tokens — en temel degerler (renk skalaari, font aileleri), (2) Alias tokens — anlamsal isimler (color-primary, color-danger, font-heading), (3) Component tokens — bilesene ozel degerler (button-bg, card-border). Bu katmanli yapi, token sisteminin olceklenebilir olmasini saglar.

Light / Dark / System Tema Gecisi

Uc tema modunu destekliyoruz: Light (acik), Dark (koyu) ve System (isletim sistemi tercihine uyum). prefers-color-scheme medya sorgusu ile sistem temasini algiliyoruz. Tema tercihi localStorage'da saklanir, sayfa yenilemesinde korunur. Gecis animasyonu yumusak ve performansli sekilde gerceklestirilir — FOUC (Flash of Unstyled Content) onlenir.

Renk Paleti Olusturma (60-30-10 Kurali)

Profesyonel renk paleti 60-30-10 kuraliyla olusturulur: %60 dominant renk (arka plan), %30 sekonder renk (kartlar, butonlar), %10 aksan renk (CTA, vurgular). Her renk icin erisilebilirlik kontrastlari dogrulanir. Light ve dark modlar icin ayri paletler olusturulur. Renk skalasi 50-950 arasi tonlarla genis bir yelpaze sunar.

Tipografi Skalasi

Modular scale (ornegin 1.25 orani) ile basliktan body'ye, caption'dan label'a tutarli bir tipografi skalasi olusturuyoruz. Font optimizasyonu icin subset, preload ve font-display: swap uyguluyoruz. Responsive tipografi icin clamp() fonksiyonu ile viewportla orantili boyutlandirma sagliyoruz.

Spacing ve Layout Sistemi

4px veya 8px tabana dayali tutarli bir bosluk sistemi (spacing scale) olusturuyoruz. Grid sistemi 12-kolon yapida, responsive breakpointler mobile-first yaklasimla (sm, md, lg, xl, 2xl) tanimliyoruz. Kartlar, formlar ve listeler icin tekrar kullanilabilir layout paternleri olusturuyoruz.

Sik Yapilan Hatalar

1. Hard-coded renk degerleri: color: #10b981 yerine color: var(--color-primary) kullanilmalidir. Aksi halde tema degisikligi imkansizlasir.
2. Tailwind @apply suistimali: Tailwind CSS 4'te @apply kullanimi onerilmez. CSS variable syntax tercih edilmelidir.
3. Dark mode'da kontrast goz ardi: Light modda calisan renk kombinasyonlari dark modda yetersiz kontrast oranina dusebilir. Her iki mod icin ayri kontrast testleri yapilmalidir.
4. Font dosyalarini optimize etmemek: 500KB'lik bir font dosyasi, sayfa yukleme hizini ciddi sekilde etkiler. Subset, WOFF2 format ve preload ile optimize edilmelidir.
5. Z-index kaosu: Plansiz z-index degerleri (z-index: 9999!) overlay catismarina neden olur. Token sisteminde z-index skalasi tanimlanmalidir.

Beklenen Sonuclar ve Metrikler

• UI gelistirme hizinda %60 artis
• Tum sayfalarda birebir tutarli gorsel deneyim
• Aninda tema gecisi (sayfa yenilemesi gerektirmez)
• Font optimizasyonu ile sayfa yukleme hizinda iyilesme
• Gelistirici deneyiminde (DX) belirgin iyilesme

Neden Profesyonel Destek Gerekli?

Design token sistemi kurmak, hem tasarim hem gelistirme uzmanligi gerektiren disiplinler arasi bir calismadir. Yanlis yapilandirilmis token sistemi, zaman icerisinde bakimi imkansiz bir karmasikliga donuser. Profesyonel bir ekip, olceklenebilir, performansli ve bakimi kolay bir sistem kurar; ekibinizi egitir ve surekli tutarlilik saglanmasini garanti eder.