Tasarım sistemleri buyudukce renk, tipografi, spacing ve gölge gibi degerlerin merkezi yönetimi zorunlu hale gelir. CSS custom properties (degiskenleri) runtime'da değiştirilebilir, cascade'e uyumlu ve JavaScript'ten okunabilir yapida olduklarindan tema ve marka varyasyonlari icin ideal temel sağlar. Sass degiskenlerinden farklı olarak DOM'da yasarlar ve media query ile birlikte calisirlar.
Token hiyerarsisi
Etkili bir tasarım sistemi uc katmanli token yapisi kullanır: global (primitive), alias (semantic) ve component token'lari. Global katmanda --color-blue-500 gibi ham degerler; semantic katmanda --color-primary gibi anlam tasiyan referanslar; component katmaninda --button-bg gibi bilesene özel atamalar bulunur.
:root {
--color-blue-500: #3b82f6;
--color-neutral-900: #111827;
--color-primary: var(--color-blue-500);
--color-text: var(--color-neutral-900);
}
.button {
--button-bg: var(--color-primary);
background: var(--button-bg);
color: var(--color-text-on-primary, #fff);
}Bu hiyerarsi marka degisikliginde yalnizca alias katmaninin guncellenmesini sağlar. Primitive token'lar Figma'daki style library ile birebir eslesmelidir. Isimlendirme konvansiyonu (kebab-case, namespace on eki) tüm ekip tarafindan benimsenmelidir.
Tema değiştirme: light, dark ve otesi
Dark mode icin prefers-color-scheme media query veya data-theme attribute ile token seti değiştirilir. Sistem tercihine saygi gosterilirken kullanıcıya manuel geçiş de sunulmalidir. Seçim localStorage ile kalıcı hale getirilebilir; FOUC onlemek icin inline script ile erken tema uygulanir.
[data-theme='dark'] {
--color-bg: #0f172a;
--color-text: #f1f5f9;
--color-primary: #60a5fa;
--shadow-elevation: 0 4px 12px rgba(0,0,0,0.4);
}Renk kontrasti her temada WCAG AA minimumunu karsilamali. Otomatik kontrast hesaplayicilar token tasarımında kullanılır. Dark mode yalnizca arka plani ters cevirmek degildir; gölge, border ve vurgu renkleri ayri ayarlanir.
Spacing ve tipografi olcekleri
Spacing token'lari genelde 4px veya 8px tabanli ölçek kullanır: --space-1: 0.25rem ile --space-16: 4rem. Tutarlı ölçek magin ve padding kararlarini hizlandirir. Tipografi icin fluid scale (clamp) responsive baslik boyutlari sağlar.
:root {
--font-size-sm: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
--font-size-lg: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
--line-height-body: 1.6;
--font-family-sans: 'Inter', system-ui, sans-serif;
}Line-height ve letter-spacing de token olarak tanimlanir. Baslik ve govde metni icin ayri font stack'ler marka kimligini guclendirir. Variable font kullanımı weight token'lari ile eslestirilebilir.
CSS degiskenleri vs preprocessors
Sass/Less degiskenleri compile time'da cozulur; tema runtime degisimi icin uygun degildir. CSS degiskenleri ile Sass mixin'leri birlikte kullanılabilir: Sass yapı üretir, CSS degiskenleri tema tasir. PostCSS veya Style Dictionary Figma token'larini her iki formata export eder.
- Runtime tema: CSS custom properties zorunlu.
- Build-time optimizasyon: Sass fonksiyonlari hala degerli.
- Tip güvenliği: TypeScript'te token objesi + CSS Modules.
- Dokumantasyon: Storybook Design Token addon veya Styleguidist.
Bilesenlerde token tuketimi
Bilesen stilleri ham hex veya px degerleri icermemeli; yalnizca token referansi kullanmali. CSS Modules, styled-components veya Tailwind CSS farklı tüketim modelleri sunar. Tailwind'de theme.extend ile token'lar config'e aktarilir; utility class'lar semantic isimlerle uretilir.
Scoped token override: bir kart bileseni icinde --card-padding yeniden tanimlanarak varyant oluşturulabilir. Inheritance sayesinde alt elemanlar otomatik güncellenir. !important kullanımı token sistemini bozar; specificity yerine katman (layer) veya cascade layer tercih edilir.
@layer ve maintainability
Modern CSS'de @layer reset, base, components ve utilities sirasini garanti eder. Token tanimlari base layer'da; bilesen stilleri components layer'da tutulur. Bu yapı specificity savaslarini azaltir.
@layer base, components, utilities;
@layer base {
:root { /* design tokens */ }
}
@layer components {
.btn { padding: var(--space-2) var(--space-4); }
}Erisilebilirlik ve token'lar
Focus ring rengi, minimum touch target boyutu (44x44px) ve motion tercihi prefers-reduced-motion token'larla ifade edilir. High contrast modu icin ayri token seti veya prefers-contrast media query kullanılır.
Renk tek basina bilgi tasimamali; hata durumlari icin ikon ve metin eslik etmeli. Token dokumantasyonunda erisilebilirlik notlari her semantic renk icin belirtilmelidir.
Performans ve bundle boyutu
Binlerce custom property tanımlamak parse maliyetini hafif artirir; ancak genelde ihmal edilebilir. Kullanılmayan token'lar dead code elimination ile temizlenemez; token audit periyodik yapilmali. Critical CSS icinde temel token subset'i inline edilebilir.
Container queries ile bilesen token'lari viewport yerine container genisligine gore degisebilir. Bu pattern tasarım sisteminde responsive davranisi merkezilestirir.
Figma'dan koda pipeline
Design Tokens Community Group (DTCG) formati Figma plugin'leri ile JSON export sağlar. Style Dictionary veya Terrazzo token'lari CSS, SCSS, iOS ve Android ciktilarina donusturur. CI'da token drift kontrolu: Figma export ile repo karsilastirmasi PR'da uyarı verir.
- Tasarimci token isimlerini onaylar.
- Otomatik export main branch'e merge edilir.
- Görsel regresyon testi token degisikliginde çalışır.
- Breaking token rename migration script ile yapilir.
Versiyonlama ve breaking change
Token rename veya silme downstream bilesenleri kirar. Semver: alias token degisikligi minor, primitive silme major sayilir. Deprecation period'da eski ve yeni token birlikte desteklenir. Codemod ile className ve CSS guncellemesi otomatiklestirilebilir.
Ölçek ve cok marka
White-label urunlerde data-brand attribute ile token seti değiştirilir. Paylasilan core token'lar marka özel override'larla genisler. CDN uzerinden marka basina ayri CSS dosyasi veya tek dosyada scope'lu degiskenler secilebilir.
CSS degiskenleri ve tasarım sistemi birlikte dusunuldugunde tutarlılık, hiz ve erisilebilirlik kazanilir. Token'lar yalnizca stil dosyasi degil; ürün dilinin teknik ifadesidir. Erken yatırım, gec donemdeki tutarsizlik ve refactor maliyetini onler.
Golge, radius ve motion token'lari
Elevation sistemi gölge token'lari ile tanimlanir: --shadow-sm, --shadow-md, --shadow-lg. Dark temada gölge opakligi artirilir cunku siyah uzerinde hafif gölge gorunmez. Border radius ölçeği --radius-sm ile --radius-full arasinda tutarlıdır; pill buton ve kart koseleri ayni dilde konusur.
Motion token'lari sure ve easing fonksiyonlarini merkezilestirir: --duration-fast: 150ms, --ease-out: cubic-bezier(0,0,0.2,1). prefers-reduced-motion aktifken duration sifirlanir. Tutarlı animasyon dili marka algisini guclendirir.
JavaScript ile token okuma ve yazma
getComputedStyle(document.documentElement).getPropertyValue('--color-primary') ile runtime deger okunur. setProperty ile tema değiştirme dinamik marka veya kullanıcı tercihi icin kullanılır. Canvas veya chart kutuphaneleri CSS token'larini okuyarak grafik renklerini arayüz ile senkron tutar.
function setTheme(name) {
document.documentElement.dataset.theme = name;
localStorage.setItem('theme', name);
}Sik yapılan hatalar
- Primitive token'i bilesen icinde dogrudan kullanmak (semantic atlama).
- Hard-coded fallback olmadan var() kullanmak; eski tarayici kirilir.
- Token isimlerinde tutarsiz namespace (color-primary vs primary-color).
- Dark mode'da yalnizca background değiştirmek, metin kontrastini unutmak.
- Figma guncellenmeden kodda token eklemek (design drift).
Token audit araci kullanılmayan degiskenleri listeler. Refactor onceligi en cok tekrarlanan hard-coded degerlerden baslar. Design system maturity modeli seviye 1'den (daginik stiller) seviye 4'e (otomatik senkron pipeline) evrimi tanimlar.
Gelecek: OKLCH ve geniş renk gami
OKLCH renk uzayi algisal tutarlılık sağlar; token tanimlarinda hex yerine oklch() kullanımı artmaktadir. wide-gamut ekranlarda P3 renk paleti marka renklerini daha canli gösterir. Fallback hex degeri eski ekranlar icin korunmalidir.
CSS degiskenleri modern tasarım sisteminin omurgasidir; Sass, Tailwind ve CSS-in-JS cozumleriyle birlikte çalışır. Tek kaynak prensibi Figma token'larindan baslar, kod uretimine ve bilesen dokumantasyonuna kadar uzanir. Ekip buyudukce token governance board kurulmasi isim catismalarini ve gereksiz varyantlari onler.
