Design Token Nedir?
Kısa tanım
Design token, renk, boşluk, yazı boyutu, köşe yuvarlaklığı veya animasyon süresi gibi tek bir tasarım kararını ada bağlanmış bir değer olarak saklayan en küçük tasarım sistemi birimidir. Token'lar platformdan bağımsız bir kaynakta (çoğunlukla JSON) tutulur ve CSS değişkenlerine, iOS ve Android koduna dönüştürülür. Böylece aynı karar tasarım aracında, web'de ve mobil uygulamada tek bir yerden yönetilir.
Diğer adları: design tokens, tasarım token'ı, tasarım değişkeni, DTCG token
Üç katmanlı token mimarisi
Token'lar düz bir değer listesi olarak başlar, ama sistem büyüdükçe katmanlara ayrılmadan yönetilemez hâle gelir. Yaygın yaklaşım üç katmandır:
| Katman | Ne anlatır? | Örnek ad |
|---|---|---|
| Temel (primitive / global) | Mevcut ham değerler; bağlam içermez | color.teal.700, space.300 |
| Anlamsal (semantic / alias) | Değerin ne için kullanıldığı | color.text.muted, color.border.danger |
| Bileşen (component) | Tek bir bileşenin özel kararı | button.primary.background |
Bileşenler yalnızca anlamsal ya da bileşen token'larına bağlanır; temel token'lara doğrudan bakmaz. Bu ayrım sayesinde "tehlike rengi kırmızının hangi tonu olsun?" kararı tek bir eşlemeyle değişir ve hiçbir bileşen koduna dokunulmaz.
İyi bir token adı neyi söyler?
Anlamsal token adı değeri değil, amacı anlatmalıdır. color.blue-dark adlı bir token, marka rengi yeşile döndüğünde yalan söylemeye başlar; color.action.primary ise her durumda doğru kalır. Pratikte işe yarayan bir sıralama şöyledir: kategori → nesne/özellik → varyant → durum. Örneğin color.background.surface.hover. Adlandırma kuralı baştan yazılmazsa aynı kavram için muted, subtle ve secondary gibi üç farklı kelime kısa sürede birlikte yaşamaya başlar.
DTCG formatı: token'lar için ortak bir dil
Farklı tasarım araçları ve dönüştürücüler yıllarca kendi JSON yapılarını kullandı. W3C bünyesindeki Design Tokens Community Group, bu dağınıklığı gidermek için bir format tanımladı ve ilk kararlı sürümü 2025.10 adıyla 28 Ekim 2025'te yayımladı. Belge bir topluluk grubu nihai raporudur; kendi ifadesiyle W3C standardı değildir ve W3C standart yolunda da yer almaz. Yine de araç üreticileri için ortak bir referans noktası hâline gelmiştir.
{
"color": {
"teal": {
"700": {
"$type": "color",
"$value": { "colorSpace": "srgb", "components": [0.06, 0.46, 0.43] }
}
},
"action": {
"primary": {
"$type": "color",
"$value": "{color.teal.700}",
"$description": "Birincil butonlar ve vurgulu bağlantılar"
}
}
},
"space": {
"300": { "$type": "dimension", "$value": { "value": 0.75, "unit": "rem" } }
}
}Formatta özel alanlar $ ile başlar: $value değeri, $type türü (color, dimension, duration, fontFamily, shadow, typography ve diğerleri), $description açıklamayı taşır. Süslü parantezli {color.teal.700} yazımı bir takma ad (alias) oluşturur. Önerilen dosya uzantısı .tokens veya .tokens.json'dır. Ayrıntılar spesifikasyonun kendisinde yer alıyor.
Kaynaktan koda: dönüşüm hattı
Token dosyası doğrudan tarayıcıda kullanılmaz; bir derleme adımı onu her platformun anladığı biçime çevirir. Web için çıktı genellikle CSS özel değişkenleridir:
:root {
--color-teal-700: #0f766e;
--color-action-primary: var(--color-teal-700);
--space-300: 0.75rem;
}Aynı kaynak iOS için Swift sabitlerine, Android için XML kaynaklarına da dönüştürülebilir. Kaynağın JSON olması, sürüm kontrolünde değişikliklerin satır satır incelenmesini ve tasarım aracıyla kod arasında otomatik eşitleme yapılmasını kolaylaştırır.
Temalar, modlar ve sınırlar
Karanlık tema, yüksek kontrast modu ya da ikinci bir marka, anlamsal katmanın farklı temel değerlere yeniden eşlenmesiyle kurulur; bileşenler değişmez. Bu noktada her eşleme renk kontrastı açısından ayrıca kontrol edilmelidir, çünkü açık temada yeterli olan bir çift koyu temada yetersiz kalabilir. Öte yandan her sayıyı token'a çevirmek de bir hatadır: yalnızca bir kez kullanılan bir illüstrasyon ölçüsü token olduğunda liste şişer ve kimse hangisini seçeceğini bilemez. Token, tekrar eden ve ortak karar gerektiren değerler içindir. Token'ların yönetildiği daha geniş çerçeve için tasarım sistemi maddesine bakılabilir.