Design token mimari katman ayrımı, tasarım sistemlerinde tek bir değer değiştiğinde tüm ürüne yayılan güncellemeleri mümkün kılan yapısal kararın temelidir. Semantik ve primitif (temel) katman arasındaki sınırı doğru çizmek, sistemin uzun vadeli sürdürülebilirliğini belirler. **Primitif (Global/Raw) Token Katmanı:** Ham değerler; herhangi bir bağlamsal anlam içermez. Sadece değer katalogunu oluşturur: ``` --color-blue-500: #3B82F6; --color-blue-600: #2563EB; --space-4: 16px; --font-size-base: 16px; --radius-md: 8px; ``` Bu katman renk paleti, tipografi ölçeği, boşluk skalası ve diğer ham değerleri barındırır. Doğrudan bileşenlerde kullanılmaz; yalnızca semantik katmana referans sağlar. **Semantik Token Katmanı:** Bağlama ve amaca göre primitif değerlere anlam atanır. Design token mimari katman yönetiminin kalbi burasıdır: ``` --color-primary: var(--color-blue-600); --color-primary-hover: var(--color-blue-700); --color-surface: var(--color-white); --color-on-surface: var(--color-neutral-900); --color-interactive: var(--color-blue-500); ``` Karanlık mod geçişi yalnızca semantik katmanda gerçekleşir: ```css [data-theme="dark"] { --color-surface: var(--color-neutral-900); --color-on-surface: var(--color-neutral-50); } ``` Bileşen kodu `--color-surface` kullanır, primitif değere dokunmaz. Bu sayede tema geçişi bileşen kodunda değişiklik gerektirmez. **Üçüncü katman, Component Token (opsiyonel):** Bazı sistemler bileşen özgü token katmanı ekler: ``` --button-primary-bg: var(--color-primary); --button-primary-text: var(--color-on-primary); --button-radius: var(--radius-md); ``` Bu katman, bileşen testinin izolasyonunu ve tasarım sistemi revizyonunda yalnızca bileşen token'larının güncellenmesini sağlar. Ekibin büyüklüğüne ve sistemin olgunluğuna göre bu katmanı eklemek veya atlamak tercih meselesidir. **Platform bağımsız token dağıtımı:** Style Dictionary veya Token Pipeline araçları, kaynak JSON/YAML token tanımlarını CSS custom properties, iOS Swift UI token ve Android XML'e dönüştürür. Design token mimari katman bu süreçte platform bağımsız tanım ile platform özgü çıktı arasındaki ayrımı korur. **Yaygın hatalar:** - Semantik katmanda primitif değer (hex kod) kullanmak, referans zincirine dahil etmemek, tema değiştirememe anlamına gelir. - Çok az semantik token, her bileşenin primitif değere doğrudan bağlı olması, olası bir renk güncellemesinde yüzlerce dosyayı değiştirme zorunluluğu doğurur. - Anlaşılmaz isimlendirme (`--color-blue-used-in-buttons`), amacı değil değeri tanımlayan isimler semantik katmanın mantığını kırar.